zydx-plus 1.30.148 → 1.30.150
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="sketchpad">
|
|
3
|
-
<canvas id="
|
|
3
|
+
<canvas :id="id"></canvas>
|
|
4
4
|
<div class="tool">
|
|
5
5
|
<div class="tool-list" @click="set">
|
|
6
6
|
<img src="./img/shezi.png" alt="" />
|
|
@@ -76,10 +76,15 @@ export default {
|
|
|
76
76
|
strokeColor: ['#000','#f00','#0f0','#00f','#f0f','#ff0','#0ff'], // 画笔颜色
|
|
77
77
|
textShow: false, // 文本
|
|
78
78
|
textData: ['14','16','18','20','22','24','28','30'], // 文本数据
|
|
79
|
-
text: ''
|
|
79
|
+
text: '',
|
|
80
|
+
id: null
|
|
80
81
|
}
|
|
81
82
|
},
|
|
82
83
|
props: {
|
|
84
|
+
data: {
|
|
85
|
+
type: Object,
|
|
86
|
+
default: () => {}
|
|
87
|
+
},
|
|
83
88
|
width: {
|
|
84
89
|
type: Number,
|
|
85
90
|
default: 800
|
|
@@ -90,8 +95,20 @@ export default {
|
|
|
90
95
|
}
|
|
91
96
|
},
|
|
92
97
|
emits: ['save'],
|
|
98
|
+
watch: {
|
|
99
|
+
data: {
|
|
100
|
+
handler(val) {
|
|
101
|
+
this.canvas.loadFromJSON(val)
|
|
102
|
+
},
|
|
103
|
+
deep: true
|
|
104
|
+
}
|
|
105
|
+
},
|
|
93
106
|
mounted() {
|
|
94
|
-
|
|
107
|
+
// 生成随机id
|
|
108
|
+
this.id = Math.random().toString(36).substr(2)
|
|
109
|
+
setTimeout(() => {
|
|
110
|
+
this.init()
|
|
111
|
+
},0)
|
|
95
112
|
window.addEventListener('keydown', this.handleKeyEvent)
|
|
96
113
|
},
|
|
97
114
|
beforeDestroy() {
|
|
@@ -117,13 +134,13 @@ export default {
|
|
|
117
134
|
this.setShow = !this.setShow
|
|
118
135
|
},
|
|
119
136
|
init() {
|
|
120
|
-
this.canvas = new fabric.Canvas(
|
|
137
|
+
this.canvas = new fabric.Canvas(this.id, {
|
|
121
138
|
isDrawingMode: false,
|
|
122
139
|
width: this.width,
|
|
123
140
|
height: this.height,
|
|
124
141
|
});
|
|
125
142
|
this.canvas.selectionColor = "rgba(255,255,255,0)";
|
|
126
|
-
|
|
143
|
+
this.canvas.loadFromJSON(this.data)
|
|
127
144
|
},
|
|
128
145
|
// 画笔
|
|
129
146
|
brush() {
|
|
@@ -319,6 +336,7 @@ export default {
|
|
|
319
336
|
this.canvas.add(this.textbox)
|
|
320
337
|
},
|
|
321
338
|
save() {
|
|
339
|
+
console.log(this.canvas.toJSON())
|
|
322
340
|
this.$emit('save', this.canvas.toJSON())
|
|
323
341
|
},
|
|
324
342
|
clear() {
|