fl-web-component 1.3.1 → 1.3.2

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-070832d8]{width:100%;height:100%;cursor:pointer}[data-v-070832d8] .tips-label{width:50px;color:#000;font:12px Helvetica;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-070832d8] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-070832d8] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-070832d8] .measure-label-font{word-break:break-all}[data-v-070832d8] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-59765f1d]{z-index:3;width:100%;height:100%;cursor:pointer;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-0ec35ee4]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-070832d8]{width:100%;height:100%;cursor:pointer}[data-v-070832d8] .tips-label{width:50px;color:#000;font:12px Helvetica;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-070832d8] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-070832d8] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-070832d8] .measure-label-font{word-break:break-all}[data-v-070832d8] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-95b325ba]{z-index:3;width:100%;height:100%;cursor:pointer;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-0ec35ee4]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

package/packages/components/com-flcanvas/index.vue

@@ -283,7 +283,12 @@ var preTarget = [];
       },
       toPdf(name) {
         // get data URL with default settings
-
+        konvaStage.scale({
+          x:2,
+          y:2
+        })
+        konvaStage.setX(0);
+        konvaStage.setY(750);
         // open in new window
         konvaLayer.getCanvas().setPixelRatio(1);
         const jpegURL = konvaStage.toDataURL({

package/src/utils/threejs/measure-angle.js

@@ -1,45 +1,45 @@
-import * as THREE from 'three'
-import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
-var _this = null
-var MeasureAngle = function(renderer, scene, camera, width, height) {
-  this.renderer = renderer
-  this.scene = scene
-  this.camera = camera
-  this.pointArray = [] // 保存当前操作所添加的点
-  this.raycaster = new THREE.Raycaster()
-  this.points = [] // 保存页面中所添加的点
-  this.polyline = [] //保存页面中所添加的直线
-  this.labels = [] // 保存页面中所添加的文本
-  this.curves = [] // 保存页面所有的曲线
-  this.tempPoints = undefined
-  this.tempLine = undefined
-  this.tempLabel = undefined
-  this.tipsLabel = undefined
-  this.isCompleted = false
-  this.curveLine = undefined
-  this.timer = null
-  this.width = width
-  this.height = height
-  this.firstTime = 0
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+var _this = null;
+var MeasureAngle = function (renderer, scene, camera, width, height) {
+  this.renderer = renderer;
+  this.scene = scene;
+  this.camera = camera;
+  this.pointArray = []; // 保存当前操作所添加的点
+  this.raycaster = new THREE.Raycaster();
+  this.points = []; // 保存页面中所添加的点
+  this.polyline = []; //保存页面中所添加的直线
+  this.labels = []; // 保存页面中所添加的文本
+  this.curves = []; // 保存页面所有的曲线
+  this.tempPoints = undefined;
+  this.tempLine = undefined;
+  this.tempLabel = undefined;
+  this.tipsLabel = undefined;
+  this.isCompleted = false;
+  this.curveLine = undefined;
+  this.timer = null;
+  this.width = width;
+  this.height = height;
+  this.firstTime = 0;
   // this.POINT_MATERIAL = new THREE.PointsMaterial({ color: 0xff5000, size: 1, opacity: 0.6, transparent: true, depthWrite: false, depthTest: false })
   // this.LINE_MATERIAL = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3, opacity: 0.8, transparent: true, side: THREE.DoubleSide, depthWrite: false, depthTest: false })
-}
+};
 
 MeasureAngle.prototype = {
   start() {
-    _this = this
-    this.renderer.domElement.style.cursor = 'crosshair'
-    this.renderer.domElement.addEventListener('mouseup', this.click, false)
-    this.renderer.domElement.addEventListener('mousedown', this.mousedown, false)
-    this.renderer.domElement.addEventListener('mousemove',  this.mousemove, false)
-    this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false)
+    _this = this;
+    this.renderer.domElement.style.cursor = 'crosshair';
+    this.renderer.domElement.addEventListener('mouseup', this.click, false);
+    this.renderer.domElement.addEventListener('mousedown', this.mousedown, false);
+    this.renderer.domElement.addEventListener('mousemove', this.mousemove, false);
+    this.renderer.domElement.addEventListener('contextmenu', this.rightClick, false);
   },
   updateParams(width, height) {
-    this.camera.aspect = width / height
-    this.camera.updateProjectionMatrix()
-    this.renderer.setSize(width, height, true)
-    this.width = width
-    this.height = height
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(width, height, true);
+    this.width = width;
+    this.height = height;
   },
   getPosition(e) {
     const mouse = new THREE.Vector2();
@@ -50,94 +50,94 @@ MeasureAngle.prototype = {
     mouse.x = (canvasX / elRect.width) * 2.0 - 1.0;
     mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
 
-    _this.raycaster.setFromCamera(mouse, this.camera)
-    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true)
-    if(intersects.length > 0) {
-      return intersects[0].point
+    _this.raycaster.setFromCamera(mouse, this.camera);
+    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    if (intersects.length > 0) {
+      return intersects[0].point;
     }
-    return null
-  },
-  createPoints(pos, config = {color: 0x009bea, size: 0.3}) {
-    const mesh = new THREE.MeshBasicMaterial({color: config.color || 0x009bea})
-    const geom = new THREE.SphereGeometry(config.size || 0.3, 28, 28)
-    const sphere = new THREE.Mesh(geom, mesh)
-    sphere.frustumCulled = false
-    sphere.position.set(pos.x, pos.y, pos.z)
-    return sphere
-  },
-  createLine(p1, p2, config={color: 0xff0000}) {
-    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 10 })
-    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2])
-    const line = new THREE.Line(lineGeometry, lineMaterial)
-    line.frustumCulled = false
-    return line
+    return null;
+  },
+  createPoints(pos, config = { color: 0x009bea, size: 0.3 }) {
+    const mesh = new THREE.MeshBasicMaterial({ color: config.color || 0x009bea });
+    const geom = new THREE.SphereGeometry(config.size || 0.3, 28, 28);
+    const sphere = new THREE.Mesh(geom, mesh);
+    sphere.frustumCulled = false;
+    sphere.position.set(pos.x, pos.y, pos.z);
+    return sphere;
+  },
+  createLine(p1, p2, config = { color: 0xff0000 }) {
+    const lineMaterial = new THREE.LineBasicMaterial({ color: config.color, linewidth: 10 });
+    const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
+    const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.frustumCulled = false;
+    return line;
   },
   createLabel(name, text, position) {
-    const div = document.createElement('div')
-    div.className = name
-    div.textContent = text
-    const divLabel = new CSS2DObject(div)
-    divLabel.position.set(position.x, position.y, position.z)
-    return divLabel
+    const div = document.createElement('div');
+    div.className = name;
+    div.textContent = text;
+    const divLabel = new CSS2DObject(div);
+    divLabel.position.set(position.x, position.y, position.z);
+    return divLabel;
   },
   mousemove(e) {
-    if (_this.isCompleted || _this.pointArray.length === 0) return
-      const point = _this.getPosition(e)
+    if (_this.isCompleted || _this.pointArray.length === 0) return;
+    const point = _this.getPosition(e);
     if (point) {
-      _this.pointArray.length === 1 ? _this.pointArray.push(point) : _this.pointArray.splice(_this.pointArray.length - 1, 1, point)
-      const length = _this.pointArray.length
-      const p1 = _this.pointArray[length - 2]
-      const p2 = _this.pointArray[length - 1]
+      _this.pointArray.length === 1
+        ? _this.pointArray.push(point)
+        : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+      const length = _this.pointArray.length;
+      const p1 = _this.pointArray[length - 2];
+      const p2 = _this.pointArray[length - 1];
       if (_this.tempPoints) {
-        _this.tempPoints.position.set(point.x, point.y, point.z)
+        _this.tempPoints.position.set(point.x, point.y, point.z);
       } else {
-        const geom = _this.createLabel('circle-tag', '', point)
-        _this.tempPoints = geom
-        _this.points.push(geom)
-        _this.scene.add(geom)
+        const geom = _this.createLabel('circle-tag', '', point);
+        _this.tempPoints = geom;
+        _this.points.push(geom);
+        _this.scene.add(geom);
       }
       if (_this.tempLine) {
-        _this.tempLine.geometry.setFromPoints([p1, p2])
+        _this.tempLine.geometry.setFromPoints([p1, p2]);
       } else {
-        _this.tempLine = _this.createLine(p1, p2)
-        _this.polyline.push(_this.tempLine)
-        _this.scene.add(_this.tempLine)
+        _this.tempLine = _this.createLine(p1, p2);
+        _this.polyline.push(_this.tempLine);
+        _this.scene.add(_this.tempLine);
       }
       // 三点构成一个角
       if (_this.pointArray.length === 3) {
-        const angle = _this.calculateAngle().toFixed(2) + '°'
-        const p0 = _this.pointArray[0]
-        const p1 = _this.pointArray[1]
-        const p2 = _this.pointArray[2]
-        const v1 = new THREE.Vector3((p0.x + p1.x) / 2, (p0.y + p1.y) / 2, (p0.z + p1.z) / 2)
-        const v2 = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2)
-        const curve = new THREE.CatmullRomCurve3(
-          [v1, v2]
-        )
-        const points = curve.getPoints(50)
+        const angle = _this.calculateAngle().toFixed(2) + '°';
+        const p0 = _this.pointArray[0];
+        const p1 = _this.pointArray[1];
+        const p2 = _this.pointArray[2];
+        const v1 = new THREE.Vector3((p0.x + p1.x) / 2, (p0.y + p1.y) / 2, (p0.z + p1.z) / 2);
+        const v2 = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
+        const curve = new THREE.CatmullRomCurve3([v1, v2]);
+        const points = curve.getPoints(50);
         if (_this.tempLabel) {
-          _this.tempLabel.element.textContent = angle
-          _this.tempLabel.position.set(p1.x, p1.y, p1.z)
-          _this.curveLine.geometry.setFromPoints(points)
+          _this.tempLabel.element.textContent = angle;
+          _this.tempLabel.position.set(p1.x, p1.y, p1.z);
+          _this.curveLine.geometry.setFromPoints(points);
         } else {
-          _this.tempLabel = _this.createLabel('measure-label', angle, p1)
-          _this.labels.push(_this.tempLabel)
-          _this.scene.add(_this.tempLabel)
-         _this.createCurve(points)
+          _this.tempLabel = _this.createLabel('measure-label', angle, p1);
+          _this.labels.push(_this.tempLabel);
+          _this.scene.add(_this.tempLabel);
+          _this.createCurve(points);
         }
       }
       if (_this.tipsLabel) {
-        _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05)
+        _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
       }
     }
   },
   createTipsLabel(label, position) {
-    const div = document.createElement('div')
-    div.className = 'tips-label'
-    div.textContent = label
-    const tipsLabel = new CSS2DObject(div)
-    tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05)
-    return tipsLabel
+    const div = document.createElement('div');
+    div.className = 'tips-label';
+    div.textContent = label;
+    const tipsLabel = new CSS2DObject(div);
+    tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
+    return tipsLabel;
   },
   mousedown() {
     this.firstTime = new Date().getTime();
@@ -146,110 +146,113 @@ MeasureAngle.prototype = {
     let lastTime = new Date().getTime();
     if (lastTime - this.firstTime < 300) {
       if (_this.isCompleted) {
-        _this.renderer.domElement.addEventListener('mousemove', _this.mousemove)
+        _this.renderer.domElement.addEventListener('mousemove', _this.mousemove);
       }
-      clearTimeout(_this.timer)
+      clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
-        _this.isCompleted = false
-        const point = _this.getPosition(e)
+        _this.isCompleted = false;
+        const point = _this.getPosition(e);
         if (point) {
-          if(_this.tipsLabel) {
-            _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05)
+          if (_this.tipsLabel) {
+            _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
           } else {
-            _this.tipsLabel = _this.createTipsLabel('左击绘制右击结束', point)
-            _this.scene.add(_this.tipsLabel)
+            _this.tipsLabel = _this.createTipsLabel('左击绘制右击结束', point);
+            _this.scene.add(_this.tipsLabel);
           }
           if (_this.tempPoints) {
-            _this.tempPoints.position.set(point.x, point.y, point.z)
-            _this.tempPoints = undefined
+            _this.tempPoints.position.set(point.x, point.y, point.z);
+            _this.tempPoints = undefined;
           } else {
-            const geom =_this.createLabel('circle-tag', '', point)
-            _this.points.push(geom)
-            _this.scene.add(geom) 
+            const geom = _this.createLabel('circle-tag', '', point);
+            _this.points.push(geom);
+            _this.scene.add(geom);
           }
-          _this.tempLine = undefined
-          _this.tempLabel = undefined
-          _this.pointArray.push(point)
+          _this.tempLine = undefined;
+          _this.tempLabel = undefined;
+          _this.pointArray.push(point);
         }
-      })
+      });
     }
-
   },
   rightClick(e) {
-    if(_this.tipsLabel) {
-      _this.scene.remove(_this.tipsLabel)
-      _this.tipsLabel = undefined
+    _this.preventContextMenu(e);
+    if (_this.tipsLabel) {
+      _this.scene.remove(_this.tipsLabel);
+      _this.tipsLabel = undefined;
     }
-    clearTimeout(_this.timer)
-    const point =  _this.getPosition(e)
+    clearTimeout(_this.timer);
+    const point = _this.getPosition(e);
     if (point) {
-      _this.isCompleted = true
-      _this.tempPoints = undefined
-      _this.tempLine = undefined
-      _this.tempLabel = undefined
-      _this.pointArray.splice(0)
-      _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove)
+      _this.isCompleted = true;
+      _this.tempPoints = undefined;
+      _this.tempLine = undefined;
+      _this.tempLabel = undefined;
+      _this.pointArray.splice(0);
+      _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove);
     }
   },
   close() {
-    this.renderer.domElement.removeEventListener('mouseup', this.click, false)
-    this.renderer.domElement.removeEventListener('mousedown', this.mousedown, false)
-    this.renderer.domElement.removeEventListener('mousemove',  this.mousemove, false)
-    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick, false)
-    this.remove(this.points)
-    this.remove(this.polyline)
-    this.remove(this.labels)
-    this.remove(this.curves)
-    this.pointArray.splice(0)
-    this.points.splice(0)
-    this.polyline.splice(0)
-    this.labels.splice(0)
-    this.curves.splice(0)
-    this.tempPoints = undefined
-    this.tempLabel = undefined
-    this.tempLine = undefined
-    this.scene.remove(this.tipsLabel)
-    this.tipsLabel = undefined
-    this.renderer.domElement.style.cursor = 'pointer'
+    this.renderer.domElement.removeEventListener('mouseup', this.click, false);
+    this.renderer.domElement.removeEventListener('mousedown', this.mousedown, false);
+    this.renderer.domElement.removeEventListener('mousemove', this.mousemove, false);
+    this.renderer.domElement.removeEventListener('contextmenu', this.rightClick, false);
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.remove(this.curves);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.curves.splice(0);
+    this.tempPoints = undefined;
+    this.tempLabel = undefined;
+    this.tempLine = undefined;
+    this.scene.remove(this.tipsLabel);
+    this.tipsLabel = undefined;
+    this.renderer.domElement.style.cursor = 'pointer';
   },
   remove(array) {
     for (let index = 0; index < array.length; index++) {
-      const element = array[index]
+      const element = array[index];
       if (element.geometry) {
-        element.geometry.dispose()
+        element.geometry.dispose();
       }
-      this.scene.remove(element)
+      this.scene.remove(element);
     }
   },
   calculateAngle() {
-    const p1 = _this.pointArray[1].clone()
-    const p2 = _this.pointArray[1].clone()
-    const dir0 = p1.sub(_this.pointArray[0]).clone()
-    const dir1 = p2.sub(_this.pointArray[2]).clone()
-    const angle = dir0.angleTo(dir1)
-    return angle * 180 / Math.PI
+    const p1 = _this.pointArray[1].clone();
+    const p2 = _this.pointArray[1].clone();
+    const dir0 = p1.sub(_this.pointArray[0]).clone();
+    const dir1 = p2.sub(_this.pointArray[2]).clone();
+    const angle = dir0.angleTo(dir1);
+    return (angle * 180) / Math.PI;
   },
   createCurve(points) {
-    const geom = new THREE.BufferGeometry().setFromPoints(points)
-    const material = new THREE.LineBasicMaterial({color: 0xff0000})
-    _this.curveLine = new THREE.Line(geom, material)
-    _this.curveLine.frustumCulled = false
-    _this.curves.push(_this.curveLine)
-    _this.scene.add(_this.curveLine)
+    const geom = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
+    _this.curveLine = new THREE.Line(geom, material);
+    _this.curveLine.frustumCulled = false;
+    _this.curves.push(_this.curveLine);
+    _this.scene.add(_this.curveLine);
   },
   numberToString(num) {
     if (num < 0.0001) {
-      return num.toString()
+      return num.toString();
     }
-    let fractionDigits = 2
+    let fractionDigits = 2;
     if (num < 0.01) {
-      fractionDigits = 4
+      fractionDigits = 4;
     } else if (num < 0.1) {
-      fractionDigits = 3
+      fractionDigits = 3;
     }
-    return num.toFixed(fractionDigits)
-  }
-}
+    return num.toFixed(fractionDigits);
+  },
+  preventContextMenu(event) {
+    event.preventDefault();
+  },
+};
 export default {
-  MeasureAngle
-}
+  MeasureAngle,
+};