fl-web-component 1.1.6 → 1.1.8

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.
@@ -1 +1 @@
1
- @charset "UTF-8";#fl-model[data-v-574500c1],#konva-container[data-v-300b3063]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-300b3063]{z-index:3;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-51e374ea]{cursor:pointer;height:100%;width:100%}
1
+ @charset "UTF-8";#fl-model[data-v-097943ab],#konva-container[data-v-0a4da738]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-0a4da738]{z-index:3;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-09d5c9d8]{cursor:pointer;height:100%;width:100%}
package/package.json CHANGED
@@ -1,15 +1,20 @@
1
1
  {
2
2
  "name": "fl-web-component",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "scripts": {
5
+ "tip1": "仅调试本组件不涉及业务组件,请执行dev",
5
6
  "dev": "vue-cli-service serve",
6
7
  "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",
7
8
  "prettier": "prettier --write \"packages/**/*.{js,css,less,scss,vue,html}\"",
9
+ "tip2": "同时调试本组件与业务组件,请执行watch",
8
10
  "watch": "vue-cli-service build --watch --mode production --target lib --name fl-web-component --formats commonjs ./src/main.js",
9
11
  "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
10
12
  "build:test": "vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
11
- "publish2": "npm version patch && npm run build && npm publish",
12
- "publish1": "npm version patch && npm run build && npm publish"
13
+ "publish:base": "npm run build && npm publish",
14
+ "tip3": "发版注意: 小版本执行publish:fix,中版本执行publish:feat,大版本执行publish:perf",
15
+ "publish:fix": "npm version patch && npm run publish:base",
16
+ "publish:feat": "npm version minor && npm run publish:base",
17
+ "publish:perf": "npm version major && npm run publish:base"
13
18
  },
14
19
  "files": [
15
20
  "dist",
@@ -1,308 +1,299 @@
1
1
  <template>
2
-
3
- <div ref="svgDraw" id="konva-container" style="height:100%"></div>
2
+ <div ref="svgDraw" id="konva-container" style="height: 100%"></div>
4
3
  </template>
5
4
 
6
5
  <script>
7
- function base64ToBlob(base64) {
8
- const byteCharacters = atob(base64);
9
- const byteArrays = [];
10
-
11
- for (let offset = 0; offset < byteCharacters.length; offset += 512) {
12
- const slice = byteCharacters.slice(offset, offset + 512);
13
- const byteNumbers = new Array(slice.length);
14
- for (let i = 0; i < slice.length; i++) {
15
- byteNumbers[i] = slice.charCodeAt(i);
16
- }
17
- const byteArray = new Uint8Array(byteNumbers);
18
- byteArrays.push(byteArray);
19
- }
20
- return new Blob(byteArrays, { type: 'application/pdf' });
6
+ function base64ToBlob(base64) {
7
+ const byteCharacters = atob(base64);
8
+ const byteArrays = [];
9
+
10
+ for (let offset = 0; offset < byteCharacters.length; offset += 512) {
11
+ const slice = byteCharacters.slice(offset, offset + 512);
12
+ const byteNumbers = new Array(slice.length);
13
+ for (let i = 0; i < slice.length; i++) {
14
+ byteNumbers[i] = slice.charCodeAt(i);
15
+ }
16
+ const byteArray = new Uint8Array(byteNumbers);
17
+ byteArrays.push(byteArray);
21
18
  }
19
+ return new Blob(byteArrays, { type: 'application/pdf' });
20
+ }
21
+
22
+ function createObjectURL(blob) {
23
+ return URL.createObjectURL(blob);
24
+ }
25
+
26
+ function downloadPDF(base64, fileName) {
27
+ const blob = base64ToBlob(base64);
28
+ const url = createObjectURL(blob);
29
+ const link = document.createElement('a');
30
+ link.href = url;
31
+ link.download = fileName || 'downloaded_pdf.pdf'; // 设置下载文件名,如果没有提供文件名,则默认为'downloaded_pdf.pdf'
32
+ document.body.appendChild(link); // 添加到DOM树中以便触发下载
33
+ link.click(); // 模拟点击下载
34
+ document.body.removeChild(link); // 下载完成后移除元素
35
+ URL.revokeObjectURL(url); // 释放URL对象
36
+ }
37
+ import Konva from 'konva';
38
+ import DxfParser from 'dxf-parser';
39
+ import jsPDF from 'jspdf';
40
+ import { formatEntity, handleFn, centering } from './components/entityFormatting';
41
+ var konvaStage = null,
42
+ konvaLayer = null;
43
+ var recordLayerConfig = {};
44
+ export default {
45
+ name: 'Fl2dcanvas',
46
+ components: {},
47
+ data() {
48
+ return {};
49
+ },
50
+ mounted() {
51
+ //resize方法
52
+ window.addEventListener('resize', () => {
53
+ if (konvaStage) {
54
+ const obj = document.getElementById('konva-container');
55
+ konvaStage.setWidth(obj.clientWidth);
56
+ konvaStage.setHeight(obj.clientHeight);
57
+ konvaStage._resizeDOM();
58
+ }
59
+ });
60
+
61
+ this.$nextTick(() => {
62
+ console.log(document.getElementById('konva-container'));
63
+ console.log(this.$refs.svgDraw);
64
+ konvaStage = new Konva.Stage({
65
+ className: 'stage',
66
+ container: 'konva-container',
67
+ width: this.$refs.svgDraw.clientWidth,
68
+ height: this.$refs.svgDraw.clientHeight,
69
+ draggable: true,
70
+ });
71
+ //init layer
72
+ konvaLayer = new Konva.Layer({
73
+ name: 'konva-layer',
74
+ x: 0,
75
+ y: 0,
76
+ });
77
+ //设置清晰度
78
+ konvaLayer.getCanvas().setPixelRatio(2);
79
+ konvaStage.add(konvaLayer);
80
+ konvaLayer.draw();
81
+ var scaleBy = 1.5;
82
+ //初始化缩放方法
83
+ konvaStage.on('wheel', e => {
84
+ console.log(e);
85
+ e.evt.preventDefault();
86
+ var oldScale = konvaStage.scaleX();
87
+ var pointer = konvaStage.getPointerPosition();
88
+ var mousePointTo = {
89
+ x: (pointer.x - konvaStage.x()) / oldScale,
90
+ y: (pointer.y - konvaStage.y()) / oldScale,
91
+ };
92
+ // how to scale? Zoom in? Or zoom out?
93
+ let direction = e.evt.deltaY > 0 ? -1 : 1;
94
+ if (e.evt.ctrlKey) {
95
+ direction = -direction;
96
+ }
97
+ var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
98
+ this.scaleRatio = Math.ceil(newScale);
99
+ // 判断比例尺百分比
100
+ if (this.scaleRatio <= 1 || this.scaleRatio >= 100) return;
101
+ // 设置放大缩小多少倍
102
+ konvaStage.scale({ x: newScale, y: newScale });
103
+ var newPos = {
104
+ x: pointer.x - mousePointTo.x * newScale,
105
+ y: pointer.y - mousePointTo.y * newScale,
106
+ };
107
+ konvaStage.position(newPos);
108
+ });
109
+ });
110
+
111
+ //create方法结束
112
+ },
113
+ //销毁方法
114
+
115
+ methods: {
116
+ loadDxf(data) {
117
+ console.log('ok');
118
+
119
+ const parser = new DxfParser();
120
+ let dxf = parser.parse(data);
121
+ let entities = formatEntity(dxf.entities);
122
+
123
+ console.log(entities);
124
+
125
+ let layers = dxf.tables.layer.layers;
126
+ //加载图纸
127
+
128
+ console.log('layers');
129
+ console.log(layers);
130
+
131
+ for (let key in layers) {
132
+ if (entities[key]) {
133
+ let group = [];
134
+ let l = entities[key].length;
135
+ let layerConfig = recordLayerConfig[key];
136
+ let configParams =
137
+ layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
138
+ for (let i = 0; i < l; i++) {
139
+ let type = entities[key][i].type;
140
+ handleFn(
141
+ type,
142
+ dxf,
143
+ entities[key][i],
144
+ group,
145
+ key,
146
+ configParams,
147
+ konvaLayer,
148
+ recordLayerConfig
149
+ );
150
+ }
151
+ if (!konvaLayer) return;
152
+ for (let i = 0; i < group.length; i++) {
153
+ let entity = group[i];
154
+ if (entity.type === 'text') {
155
+ if (konvaLayer) konvaLayer.add(entity.obj);
156
+ }
157
+ }
22
158
 
23
-
24
- function createObjectURL(blob) {
25
- return URL.createObjectURL(blob);
26
- }
27
-
28
-
29
-
30
- function downloadPDF(base64, fileName) {
31
- const blob = base64ToBlob(base64);
32
- const url = createObjectURL(blob);
33
- const link = document.createElement('a');
34
- link.href = url;
35
- link.download = fileName || 'downloaded_pdf.pdf'; // 设置下载文件名,如果没有提供文件名,则默认为'downloaded_pdf.pdf'
36
- document.body.appendChild(link); // 添加到DOM树中以便触发下载
37
- link.click(); // 模拟点击下载
38
- document.body.removeChild(link); // 下载完成后移除元素
39
- URL.revokeObjectURL(url); // 释放URL对象
40
- }
41
- import Konva from 'konva'
42
- import DxfParser from "dxf-parser";
43
- import jsPDF from 'jspdf'
44
- import { formatEntity, handleFn, centering } from './components/entityFormatting'
45
- var konvaStage = null, konvaLayer = null;
46
- var recordLayerConfig = {}
47
- export default {
48
- name: "Fl2dcanvas",
49
- components: {},
50
- data() {
51
- return {
52
-
53
- };
54
- },
55
- created() {
56
- //resize方法
57
- window.addEventListener('resize', () => {
58
- if (konvaStage) {
59
- const obj = document.getElementById('konva-container')
60
- konvaStage.setWidth(obj.clientWidth)
61
- konvaStage.setHeight(obj.clientHeight)
62
- konvaStage._resizeDOM()
63
- }
64
- });
65
-
66
-
67
- this.$nextTick(() => {
68
- console.log(document.getElementById('konva-container'));
69
- console.log(this.$refs.svgDraw);
70
- konvaStage = new Konva.Stage({
71
- className: "stage",
72
- container: "konva-container",
73
- width: this.$refs.svgDraw.clientWidth,
74
- height: this.$refs.svgDraw.clientHeight,
75
- draggable: true,
76
- });
77
- //init layer
78
- konvaLayer = new Konva.Layer({
79
- name: "konva-layer",
80
- x: 0,
81
- y: 0,
82
- });
83
- //设置清晰度
84
- konvaLayer.getCanvas().setPixelRatio(2);
85
- konvaStage.add(konvaLayer);
86
- konvaLayer.draw();
87
- var scaleBy = 1.5;
88
- //初始化缩放方法
89
- konvaStage.on("wheel", (e) => {
90
- console.log(e)
91
- e.evt.preventDefault();
92
- var oldScale = konvaStage.scaleX();
93
- var pointer = konvaStage.getPointerPosition();
94
- var mousePointTo = {
95
- x: (pointer.x - konvaStage.x()) / oldScale,
96
- y: (pointer.y - konvaStage.y()) / oldScale,
97
- };
98
- // how to scale? Zoom in? Or zoom out?
99
- let direction = e.evt.deltaY > 0 ? -1 : 1;
100
- if (e.evt.ctrlKey) {
101
- direction = -direction;
159
+ let customShape = new Konva.Shape({
160
+ x: 0,
161
+ y: 0,
162
+ strokeWidth: 0.2,
163
+ name: key.replace(/\s*/g, ''),
164
+ entityId: key,
165
+ stroke: configParams ? configParams.color : '#000',
166
+ customColor: configParams ? configParams.color : '',
167
+ visible: configParams ? configParams.visible : true,
168
+ sceneFunc(context, shape) {
169
+ context.beginPath();
170
+ for (let i = 0; i < group.length; i++) {
171
+ let entity = group[i];
172
+ if (entity.type === 'line') {
173
+ let x1 = entity.x1;
174
+ let y1 = entity.y1;
175
+ let x2 = entity.x2;
176
+ let y2 = entity.y2;
177
+
178
+ if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
179
+ context.moveTo(x1, -parseFloat(y1));
180
+ context.lineTo(x2, -parseFloat(y2));
102
181
  }
103
- var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
104
- this.scaleRatio = Math.ceil(newScale)
105
- // 判断比例尺百分比
106
- if (this.scaleRatio <= 1 || this.scaleRatio >= 100) return
107
- // 设置放大缩小多少倍
108
- konvaStage.scale({ x: newScale, y: newScale });
109
- var newPos = {
110
- x: pointer.x - mousePointTo.x * newScale,
111
- y: pointer.y - mousePointTo.y * newScale,
112
- };
113
- konvaStage.position(newPos);
114
- });
115
- });
116
-
117
- //create方法结束
118
- },
119
- //销毁方法
120
-
121
- methods: {
122
- loadDxf(data){
123
-
124
- console.log("ok");
125
-
126
- const parser = new DxfParser();
127
- let dxf = parser.parse(data);
128
- let entities = formatEntity(dxf.entities);
129
-
130
- console.log(entities);
131
-
132
- let layers = dxf.tables.layer.layers;
133
- //加载图纸
134
-
135
- console.log("layers");
136
- console.log(layers);
137
-
138
- for (let key in layers) {
139
- if (entities[key]) {
140
- let group = [];
141
- let l = entities[key].length
142
- let layerConfig = recordLayerConfig[key]
143
- let configParams = layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null
144
- for (let i = 0; i < l; i++) {
145
- let type = entities[key][i].type;
146
- handleFn(type, dxf, entities[key][i], group, key, configParams, konvaLayer, recordLayerConfig)
182
+ }
183
+ if (entity.type === 'polyline') {
184
+ let flag = false;
185
+
186
+ let points = entity.points;
187
+ let closed = entity.closed;
188
+
189
+ for (let j = 0; j < points.length; j++) {
190
+ let index = j % 2;
191
+ if (index === 0) {
192
+ let x = points[j];
193
+ let y = points[j + 1];
194
+ if (j === 0) {
195
+ context.moveTo(x, y);
196
+ } else {
197
+ context.lineTo(x, y);
147
198
  }
148
- if (!konvaLayer) return
149
- for(let i = 0; i < group.length;i++) {
150
- let entity = group[i];
151
- if (entity.type === 'text') {
152
- if (konvaLayer) konvaLayer.add(entity.obj);
153
- }
154
- }
155
-
156
-
157
- let customShape = new Konva.Shape({
158
- x: 0,
159
- y: 0,
160
- strokeWidth: 0.2,
161
- name: key.replace(/\s*/g, ""),
162
- entityId: key,
163
- stroke: configParams ? configParams.color : "#000",
164
- customColor: configParams ? configParams.color : "",
165
- visible: configParams ? configParams.visible :true,
166
- sceneFunc (context, shape) {
167
- context.beginPath();
168
- for(let i = 0; i < group.length;i++){
169
- let entity = group[i];
170
- if(entity.type === 'line'){
171
- let x1=entity.x1;
172
- let y1=entity.y1;
173
- let x2=entity.x2;
174
- let y2=entity.y2;
199
+ }
175
200
 
176
-
177
- if(x1!=undefined&&y1!=undefined&&x2!=undefined&&y2!=undefined) {
178
-
179
-
180
- context.moveTo(x1, -parseFloat(y1));
181
- context.lineTo(x2, -parseFloat(y2));
182
- }
183
- }
184
- if(entity.type === "polyline"){
185
- let flag=false;
186
-
187
-
188
-
189
- let points=entity.points;
190
- let closed = entity.closed;
191
-
192
-
193
-
194
- for(let j = 0; j < points.length; j++){
195
- let index = j % 2;
196
- if(index === 0){
197
- let x = points[j];
198
- let y = points[j+1];
199
- if(j === 0){
200
- context.moveTo(x, y);
201
- }else{
202
- context.lineTo(x,y);
203
- }
204
- }
205
-
206
- if(closed) {
207
- if (j === points.length - 1) {
208
- context.lineTo(points[0], points[1]);
209
- }
210
- }
211
- }
212
- }
213
- }
214
- // context.closePath();
215
- context.fillStrokeShape(shape);
216
- }
217
- });
218
- if (konvaLayer) konvaLayer.add(customShape);
201
+ if (closed) {
202
+ if (j === points.length - 1) {
203
+ context.lineTo(points[0], points[1]);
204
+ }
205
+ }
219
206
  }
207
+ }
220
208
  }
221
- //缩放视口
222
- let scale = 1;
223
- const boundingRect = konvaLayer.getClientRect();
224
- let ratio = Number((this.$refs.svgDraw.clientWidth / boundingRect.width).toFixed(1));
225
- if (ratio > 2) {
226
- scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
227
- scale = scale < 2 ? 2 : scale
228
- }
229
- /*
209
+ // context.closePath();
210
+ context.fillStrokeShape(shape);
211
+ },
212
+ });
213
+ if (konvaLayer) konvaLayer.add(customShape);
214
+ }
215
+ }
216
+ //缩放视口
217
+ let scale = 1;
218
+ const boundingRect = konvaLayer.getClientRect();
219
+ let ratio = Number((this.$refs.svgDraw.clientWidth / boundingRect.width).toFixed(1));
220
+ if (ratio > 2) {
221
+ scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
222
+ scale = scale < 2 ? 2 : scale;
223
+ }
224
+ /*
230
225
  konvaStage.scale({
231
226
  x: scale,
232
227
  y: scale,
233
228
  })*/
234
- const boundingScale = konvaLayer.getClientRect();
235
- //平移视口
236
- const x =
237
- this.$refs.svgDraw.clientWidth / 2 -
238
- (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
239
- const y =
240
- this.$refs.svgDraw.clientHeight / 2 -
241
- (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
242
-
243
- konvaStage.scale({
244
- x:2,
245
- y:2
246
- })
247
- // konvaStage.setX(x);
248
- konvaStage.setY(750);
249
-
250
-
251
-
252
-
253
- },
254
- toPdf(name){
255
- // get data URL with default settings
256
-
257
- // open in new window
258
- konvaLayer.getCanvas().setPixelRatio(1);
259
- const jpegURL = konvaStage.toDataURL({
260
- mimeType: 'image/jpeg',
261
- quality:1.0
262
- });
263
-
264
- let pageData=konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
265
-
266
- console.log(pageData);
267
-
268
- let img = new Image();
269
- img.src=jpegURL;
270
- const pdf = new jsPDF('l', 'px', [konvaStage.width(), konvaStage.height()]);
271
-
272
- pdf.addImage(
273
- konvaStage.toDataURL({ pixelRatio: 2 }),
274
- 0,
275
- 0,
276
- konvaStage.width(),
277
- konvaStage.height()
278
- );
279
-
280
- pdf.save(name+".pdf");
281
- // var imgData = canvas.toDataURL('image/png');
282
- //doc.text("Hello world!", 10, 10);
283
- //doc.save("a4.pdf");
284
- },
285
- clearCache(){
286
- konvaLayer && konvaLayer.destroyChildren()
287
- konvaLayer && konvaLayer.destroy()
288
- konvaLayer && konvaLayer.clear()
289
- konvaStage && konvaStage.destroy()
290
- konvaStage && konvaStage.clearCache()
291
- konvaLayer = null
292
- konvaStage = null
293
- },
294
- beforeDestroy() {
295
- this.clearCache()
296
- }
297
- }
298
- };
229
+ const boundingScale = konvaLayer.getClientRect();
230
+ //平移视口
231
+ const x =
232
+ this.$refs.svgDraw.clientWidth / 2 -
233
+ (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
234
+ const y =
235
+ this.$refs.svgDraw.clientHeight / 2 -
236
+ (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
237
+
238
+ konvaStage.scale({
239
+ x: 2,
240
+ y: 2,
241
+ });
242
+ // konvaStage.setX(x);
243
+ konvaStage.setY(750);
244
+ },
245
+ toPdf(name) {
246
+ // get data URL with default settings
247
+
248
+ // open in new window
249
+ konvaLayer.getCanvas().setPixelRatio(1);
250
+ const jpegURL = konvaStage.toDataURL({
251
+ mimeType: 'image/jpeg',
252
+ quality: 1.0,
253
+ });
254
+
255
+ let pageData = konvaLayer.canvas.toDataURL('image/jpeg', 1.0);
256
+
257
+ console.log(pageData);
258
+
259
+ let img = new Image();
260
+ img.src = jpegURL;
261
+ const pdf = new jsPDF('l', 'px', [konvaStage.width(), konvaStage.height()]);
262
+
263
+ pdf.addImage(
264
+ konvaStage.toDataURL({ pixelRatio: 2 }),
265
+ 0,
266
+ 0,
267
+ konvaStage.width(),
268
+ konvaStage.height()
269
+ );
270
+
271
+ pdf.save(name + '.pdf');
272
+ // var imgData = canvas.toDataURL('image/png');
273
+ //doc.text("Hello world!", 10, 10);
274
+ //doc.save("a4.pdf");
275
+ },
276
+ clearCache() {
277
+ konvaLayer && konvaLayer.destroyChildren();
278
+ konvaLayer && konvaLayer.destroy();
279
+ konvaLayer && konvaLayer.clear();
280
+ konvaStage && konvaStage.destroy();
281
+ konvaStage && konvaStage.clearCache();
282
+ konvaLayer = null;
283
+ konvaStage = null;
284
+ },
285
+ beforeDestroy() {
286
+ this.clearCache();
287
+ },
288
+ },
289
+ };
299
290
  </script>
300
291
  <style lang="scss" scoped>
301
- #konva-container {
302
- z-index: 3;
303
- width: 100%;
304
- height: 100%;
305
- cursor: pointer;
306
- overflow: hidden;
307
- }
292
+ #konva-container {
293
+ z-index: 3;
294
+ width: 100%;
295
+ height: 100%;
296
+ cursor: pointer;
297
+ overflow: hidden;
298
+ }
308
299
  </style>
@@ -436,19 +436,20 @@
436
436
  },
437
437
  // 恢复模型原来的状态
438
438
  updateWholeProperty() {
439
- if (scene) {
440
- scene.traverse(obj => {
441
- if (obj instanceof this.THREE.Mesh) {
442
- // 恢复颜色
443
- obj.setColorAt(obj.userData.instanceIndex, obj.material.userData.nColor)
444
- obj.instanceColor.needsUpdate = true
445
- // 修改可见性
446
- const restoreMatrix = new this.THREE.Matrix4().copy(obj.userData.copyMatrix);
447
- obj.setMatrixAt(index, restoreMatrix);
448
- obj.instanceMatrix.needsUpdate = true;
449
- }
450
- });
451
- }
439
+ throw(new Error('该方法已暂停使用,请使用restore方法。'))
440
+ // if (scene) {
441
+ // scene.traverse(obj => {
442
+ // if (obj instanceof this.THREE.Mesh) {
443
+ // // 恢复颜色
444
+ // obj.setColorAt(obj.userData.instanceIndex, obj.material.userData.nColor)
445
+ // obj.instanceColor.needsUpdate = true
446
+ // // 修改可见性
447
+ // const restoreMatrix = new this.THREE.Matrix4().copy(obj.userData.copyMatrix);
448
+ // obj.setMatrixAt(index, restoreMatrix);
449
+ // obj.instanceMatrix.needsUpdate = true;
450
+ // }
451
+ // });
452
+ // }
452
453
  },
453
454
  // 清除上一次的属性修改操作 为了方便业务平台参数跟updateProperty方法的参数一样
454
455
  resetProperty(list) {
@@ -1280,7 +1281,7 @@
1280
1281
  });
1281
1282
  },
1282
1283
  // 添加自定义模型, 暂时只支持glb、gltf格式
1283
- addCustomModel(name, position, url, scale, immediately = false, callback) {
1284
+ addCustomModel(name, position, url, scale = 1, immediately = false, callback) {
1284
1285
  const loader = new GLTFLoader()
1285
1286
  let locationModel = null;
1286
1287
  loader.load(url, (gltf) => {