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.
- package/README.md +4 -0
- package/dist/fl-web-component.common.js +150 -145
- package/dist/fl-web-component.css +1 -1
- package/package.json +8 -3
- package/packages/components/com-flcanvas/index.vue +281 -290
- package/packages/components/com-graphics/index.vue +15 -14
- package/packages/components/com-graphics/pid.vue +3 -2
- package/src/utils/instance-parser.js +1 -0
- package/src/utils/mock.js +14219 -83870
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";#fl-model[data-v-
|
|
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.
|
|
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
|
-
"
|
|
12
|
-
"
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
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
|
-
|
|
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
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
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
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
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
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
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
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
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
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
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) => {
|