|
|
@@ -165,20 +165,20 @@ export default {
|
|
|
name: "粗细",
|
|
|
fun: "",
|
|
|
},
|
|
|
- {
|
|
|
- icon: "#icon-fangda_huaban1",
|
|
|
- name: "放大",
|
|
|
- fun: () => {
|
|
|
- return this.handleBeLarge();
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "#icon-suoxiao_huaban1",
|
|
|
- name: "缩小",
|
|
|
- fun: () => {
|
|
|
- return this.handleBeSmall();
|
|
|
- },
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-fangda_huaban1",
|
|
|
+ // name: "放大",
|
|
|
+ // fun: () => {
|
|
|
+ // return this.handleBeLarge();
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-suoxiao_huaban1",
|
|
|
+ // name: "缩小",
|
|
|
+ // fun: () => {
|
|
|
+ // return this.handleBeSmall();
|
|
|
+ // },
|
|
|
+ // },
|
|
|
],
|
|
|
activeTool: 1,
|
|
|
tools: [
|
|
|
@@ -187,26 +187,26 @@ export default {
|
|
|
name: "画笔",
|
|
|
toolType: 1,
|
|
|
},
|
|
|
- {
|
|
|
- icon: "#icon-zhixian_huaban1",
|
|
|
- name: "直线",
|
|
|
- toolType: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "#icon-yuanquan_huaban1",
|
|
|
- name: "圆形",
|
|
|
- toolType: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "#icon-juxinggongju_huaban1",
|
|
|
- name: "矩形",
|
|
|
- toolType: 4,
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "#icon-xiangpi_huaban1",
|
|
|
- name: "橡皮",
|
|
|
- toolType: 5,
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-zhixian_huaban1",
|
|
|
+ // name: "直线",
|
|
|
+ // toolType: 2,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-yuanquan_huaban1",
|
|
|
+ // name: "圆形",
|
|
|
+ // toolType: 3,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-juxinggongju_huaban1",
|
|
|
+ // name: "矩形",
|
|
|
+ // toolType: 4,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-xiangpi_huaban1",
|
|
|
+ // name: "橡皮",
|
|
|
+ // toolType: 5,
|
|
|
+ // },
|
|
|
{
|
|
|
icon: "#icon-wenzi_huaban1",
|
|
|
name: "文字",
|
|
|
@@ -214,20 +214,20 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
btns: [
|
|
|
- {
|
|
|
- icon: "#icon-chexiao",
|
|
|
- name: "上一步",
|
|
|
- fun: () => {
|
|
|
- return this.handlePrev();
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "#icon-zhongzuo",
|
|
|
- name: "下一步",
|
|
|
- fun: () => {
|
|
|
- return this.handleNext();
|
|
|
- },
|
|
|
- },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-chexiao",
|
|
|
+ // name: "上一步",
|
|
|
+ // fun: () => {
|
|
|
+ // return this.handlePrev();
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "#icon-zhongzuo",
|
|
|
+ // name: "下一步",
|
|
|
+ // fun: () => {
|
|
|
+ // return this.handleNext();
|
|
|
+ // },
|
|
|
+ // },
|
|
|
// {
|
|
|
// icon: "#icon-lajixiang_huaban1",
|
|
|
// name: "清除",
|
|
|
@@ -324,12 +324,19 @@ export default {
|
|
|
this.prevDis = true;
|
|
|
this.nextDis = true;
|
|
|
this.baseMap = this.bg || bgA;
|
|
|
- // 用于绘制的画板
|
|
|
- this.canvas_front = document.getElementById("ctx_front");
|
|
|
+ // // 用于绘制的画板
|
|
|
+ // this.canvas_front = document.getElementById("ctx_front");
|
|
|
+ // // 用于生成绘制后图片的画板
|
|
|
+ // this.canvas_back = document.getElementById("ctx_back");
|
|
|
+ // // 底图画板，橡皮擦除时获取像素放到绘制画板中，达到不擦出底图的效果
|
|
|
+ // this.canvas_base = document.getElementById("ctx_base");
|
|
|
+
|
|
|
+ // 用于绘制的画板
|
|
|
+ this.canvas_front = this.$refs.ctx_front
|
|
|
// 用于生成绘制后图片的画板
|
|
|
- this.canvas_back = document.getElementById("ctx_back");
|
|
|
+ this.canvas_back = this.$refs.ctx_base;
|
|
|
// 底图画板，橡皮擦除时获取像素放到绘制画板中，达到不擦出底图的效果
|
|
|
- this.canvas_base = document.getElementById("ctx_base");
|
|
|
+ this.canvas_base = this.$refs.ctx_back;
|
|
|
|
|
|
this.ctx_base = this.canvas_base.getContext("2d");
|
|
|
this.ctx_front = this.canvas_front.getContext("2d");
|
|
|
@@ -447,12 +454,12 @@ export default {
|
|
|
e = e || window.event;
|
|
|
sx = e.clientX - this.canvas_front.offsetLeft;
|
|
|
sy = e.clientY - this.canvas_front.offsetTop;
|
|
|
- const cbx = this.ctx_base.getImageData(
|
|
|
- e.offsetX - this.slide / 2,
|
|
|
- e.offsetY - this.slide / 2,
|
|
|
- this.slide * 2,
|
|
|
- this.slide * 2
|
|
|
- );
|
|
|
+ // const cbx = this.ctx_base.getImageData(
|
|
|
+ // e.offsetX - this.slide / 2,
|
|
|
+ // e.offsetY - this.slide / 2,
|
|
|
+ // this.slide * 2,
|
|
|
+ // this.slide * 2
|
|
|
+ // );
|
|
|
this.ctx_front.moveTo(sx, sy);
|
|
|
this.canDraw = true;
|
|
|
switch (type) {
|
|
|
@@ -494,12 +501,12 @@ export default {
|
|
|
document.getElementsByClassName("d_body")[0].scrollTop;
|
|
|
mx = e.clientX + scrollL;
|
|
|
my = e.clientY + scrollT;
|
|
|
- const cbx = this.ctx_base.getImageData(
|
|
|
- e.offsetX - this.slide / 2,
|
|
|
- e.offsetY - this.slide / 2,
|
|
|
- this.slide * 2,
|
|
|
- this.slide * 2
|
|
|
- );
|
|
|
+ // const cbx = this.ctx_base.getImageData(
|
|
|
+ // e.offsetX - this.slide / 2,
|
|
|
+ // e.offsetY - this.slide / 2,
|
|
|
+ // this.slide * 2,
|
|
|
+ // this.slide * 2
|
|
|
+ // );
|
|
|
if (this.canDraw) {
|
|
|
switch (type) {
|
|
|
case 1:
|
|
|
@@ -549,7 +556,7 @@ export default {
|
|
|
this.canDraw = false;
|
|
|
this.ctx_front.closePath();
|
|
|
if (type != 6) {
|
|
|
- this.handleSaveCanvasStore();
|
|
|
+ // this.handleSaveCanvasStore();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -568,7 +575,7 @@ export default {
|
|
|
text.style.display = "none";
|
|
|
this.text = "";
|
|
|
text.value = "";
|
|
|
- this.handleSaveCanvasStore();
|
|
|
+ // this.handleSaveCanvasStore();
|
|
|
},
|
|
|
/** 上一步*/
|
|
|
handlePrev() {
|
