路径动画

Author: zhaokai

src/service/2DPlot/PlotCanvasGroup.js

@@ -4,11 +4,12 @@
  * @Author: zk
  * @Date: 2022-05-13 11:01:10
  * @LastEditors: zk
- * @LastEditTime: 2022-05-26 15:30:28
+ * @LastEditTime: 2022-05-27 10:56:43
  */
 
 import { fabric } from 'fabric';
 import PlotCanvas from './PlotCanvas';
+import PlotUtilLine from './Shapes/PlotUtilLine';
 
 export const PlotCanvasGroup = fabric.util.createClass(fabric.Canvas, {
     selection: false,
@@ -206,6 +207,9 @@ export const PlotCanvasGroup = fabric.util.createClass(fabric.Canvas, {
         let t = null;
         for (let i = 0; i < this._objects.length; i++) {
             const object = this._objects[i];
+            if(!object.isExtendPlotObject){
+                continue
+            }
             const elem = object.getElement();
             if (elem && elem.getFeatureId() === uid) {
                 t = object;
@@ -220,19 +224,15 @@ export const PlotCanvasGroup = fabric.util.createClass(fabric.Canvas, {
         });
     },
     addUtilPath(coords, options) {
-        const coordSys = this.getCoordSys();
-        const points = coords.map((s) => {
-            const v = coordSys.dataToPoint([s.x, s.y]);
-            return { x: v[0], y: v[1] };
-        });
-        const polyline = new fabric.Polyline(points, {  
-                fill:'green', 
-        });  
-        // this.add(polyline);
-        return polyline
+        const plot = new PlotUtilLine({
+            coords,
+            canvas:this
+        })
+        this.add(plot);
+        return plot;
     },
-    removeUtilPath(utilPlotObject){
-        this.remove(utilPlotObject)
+    removeUtilPath(utilPlotObject) {
+        this.remove(utilPlotObject);
     },
     /**
      * @function: Module:PlotCanvasGroup.prototype._renderObjects
@@ -245,17 +245,20 @@ export const PlotCanvasGroup = fabric.util.createClass(fabric.Canvas, {
         var i, len;
         for (i = 0, len = objects.length; i < len; ++i) {
             const object = objects[i];
-            const element = object.getElement();
-            const bounds = element.getBounds();
-            const left = bounds.left;
-            const bottom = bounds.bottom;
-            const top = bounds.top;
-            const right = bounds.right;
-
             let flag = true;
-            if ((this.width < left && this.height < bottom) || (top < 0 && right < 0)) {
-                flag = false;
+            if (object.isExtendPlotObject) {
+                const element = object.getElement();
+                const bounds = element.getBounds();
+                const left = bounds.left;
+                const bottom = bounds.bottom;
+                const top = bounds.top;
+                const right = bounds.right;
+
+                if ((this.width < left && this.height < bottom) || (top < 0 && right < 0)) {
+                    flag = false;
+                }
             }
+
             flag && object && object.render(ctx);
         }
     }

src/service/2DPlot/Shapes/PlotObject.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-07-05 11:32:52
- * @LastEditTime: 2022-05-26 15:30:59
+ * @LastEditTime: 2022-05-27 10:53:09
  * @LastEditors: zk
  * @Description: In User Settings Edit
  * @FilePath: \MapGISPlot\src\js\Shapes\PlotObject.js
@@ -18,6 +18,8 @@ const PlotObject = fabric.util.createClass(fabric.Object, {
         this._elem.positions = options.positions || [];
         this.m_coordsPx = [];
         this._elem.propsUpdateSignal.add(this._elemPropsUpdateHandler, this);
+        
+        this.isExtendPlotObject=true
     },
     _elemPropsUpdateHandler(event) {
         this.set('dirty', true);

src/service/2DPlot/Shapes/PlotUtilLine.js

@@ -0,0 +1,130 @@
+/*
+ * @Author: your name
+ * @Date: 2021-07-05 11:32:52
+ * @LastEditTime: 2022-05-27 11:43:25
+ * @LastEditors: zk
+ * @Description: In User Settings Edit
+ * @FilePath: \MapGISPlot\src\js\Shapes\PlotObject.js
+ */
+import Point from '../../PlotUtilBase/Geometry/Point';
+import { fabric } from 'fabric';
+import Bounds from '../../PlotUtilBase/Geometry/Bound';
+import { defined } from '../../PlotUtilBase/Check';
+
+const _ = require('lodash');
+const PlotUtilLine = fabric.util.createClass(fabric.Object, {
+    fill: null,
+    strokeLineJoin: 'round',
+    strokeWidth:20,
+    strokeStyle:"#00ff00",
+    lineWidth:20,
+    initialize: function initialize(options) {
+        this.callSuper('initialize', options);
+        this.canvas = options.canvas;
+        this.m_coords = options.coords || [];
+        this.m_coordsPx = [];
+        this.isExtendPlotObject = false;
+    },
+    setPnts(latlngs) {
+        this.m_coords = latlngs;
+        this.dataToPoint();
+        this.set('dirty', true);
+    },
+    getCoordSys: function getCoordSys() {
+        return this.canvas.getCoordSys();
+    },
+    dataToPoint: function dataToPoint() {
+        debugger
+        const coordSys = this.getCoordSys();
+        const positions = this.m_coords;
+        this.m_coordsPx = [];
+        for (let i = 0; i < positions.length; i += 1) {
+            const pntPx = coordSys.dataToPoint([positions[i].x, positions[i].y]);
+            this.m_coordsPx.push(new Point(pntPx[0], pntPx[1]));
+        }
+    },
+    setBounds: function setBounds(ctx) {
+        this._setBounds(this._calcBounds(ctx));
+    },
+    // eslint-disable-next-line no-unused-vars
+    _calcBounds: function _calcBounds(ctx) {
+        let xMin = Number.POSITIVE_INFINITY;
+        let yMin = Number.POSITIVE_INFINITY;
+        let xMax = Number.NEGATIVE_INFINITY;
+        let yMax = Number.NEGATIVE_INFINITY;
+        for (let i = 0; i < this.m_coordsPx.length; i += 1) {
+            const pnt = this.m_coordsPx[i];
+            xMin = Math.min(xMin, pnt.x);
+            yMin = Math.min(yMin, pnt.y);
+            xMax = Math.max(xMax, pnt.x);
+            yMax = Math.max(yMax, pnt.y);
+        }
+
+        return new Bounds(xMin, yMin, xMax, yMax);
+    },
+
+    _setBounds: function _setBounds(bounds) {
+        const halfStrokeWid = this.strokeWidth / 2;
+        this.set('top', bounds.bottom - halfStrokeWid);
+        this.set('left', bounds.left - halfStrokeWid);
+        this.set('width', bounds.right - bounds.left + this.strokeWidth);
+        this.set('height', bounds.top - bounds.bottom + this.strokeWidth);
+
+        this.m_offsetX = -this.left - this.width / 2;
+        this.m_offsetY = -this.top - this.height / 2;
+        this.setCoords();
+    },
+    // eslint-disable-next-line no-unused-vars
+    moveBy: function moveBy(moveX, moveY) {
+        const coordSys = this.getCoordSys();
+        const coords = [];
+        const coordPx = this.m_coordsPx;
+
+        for (let i = 0; i < coordPx.length; i += 1) {
+            coordPx[i].x += moveX;
+            coordPx[i].y += moveY;
+        }
+
+        for (let i = 0; i < coordPx.length; i += 1) {
+            const latlng = coordSys.pointToData([coordPx[i].x, coordPx[i].y]);
+            coords.push(new Point(latlng[0], latlng[1]));
+        }
+
+        this.setPnts(coords);
+    },
+    getPlotCanvas: function getPlotCanvas() {
+        return this.canvas;
+    },
+    render: function render(ctx) {
+        if (this.isNotVisible()) {
+            return;
+        }
+        this.dataToPoint();
+        this.setBounds(ctx);
+        this.callSuper('render', ctx);
+    },
+    _render(ctx) {
+        if (this.m_coordsPx.length < 2) return;
+        ctx.beginPath();
+        ctx.moveTo(this.m_coordsPx[0].x + this.m_offsetX, this.m_coordsPx[0].y + this.m_offsetY);
+        for (let i = 0; i < this.m_coordsPx.length; i += 1) {
+            const point = this.m_coordsPx[i];
+            ctx.lineTo(point.x + this.m_offsetX, point.y+ this.m_offsetY);
+        }
+        
+        this._drawPath(ctx,{strokeStyle:"#ff00ff",lineWidth:6})
+    },
+    _createStyleObject(){
+    },
+    _drawPath(ctx, style) {
+        Object.keys(style).forEach((key) => {
+            ctx[key] = style[key];
+        });
+
+        if (defined(style.strokeStyle) && style.strokeStyle !== '' && style.strokeStyle !== 'none') {
+            ctx.stroke();
+        }
+    },
+});
+fabric.PlotUtilLine = PlotUtilLine;
+export default PlotUtilLine;

src/service/PlotBase/Animation/AnimationTypes/PlotExtendAnimation/PlotGrowAnimation/PlotPathAnimation.js

@@ -8,7 +8,7 @@ import MainLineElement from '../../../../SvgLoader/element/extend/MainLineElemen
  * @Author: zk
  * @Date: 2022-04-19 09:59:57
  * @LastEditors: zk
- * @LastEditTime: 2022-05-26 16:13:31
+ * @LastEditTime: 2022-05-27 11:00:55
  */
 export default class PlotPathAnimation extends PlotCoordsAnimation {
     constructor(options) {
@@ -33,10 +33,10 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
         this.AlongTangent = AnimationUtil.defineValue(options.AlongTangent, true);
 
         //绑定id
-        this.symbolBindId =  AnimationUtil.defineValue(options.symbolBindId, null);
+        this.symbolBindId = AnimationUtil.defineValue(options.symbolBindId, null);
 
         // 路径对象
-        this.pathWayObject=null
+        this.pathWayObject = null;
         // init geometry
         this.geometryInstance = null;
         this.geometryAngles = [];
@@ -46,24 +46,29 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
         // 根据路径类型生成几何
         const { pathType } = this;
 
-        const plot= this.getPlotObjectById(this.symbolBindId)
-        let coords=null
-        if(plot){
-            coords=plot.getElement().positions
-        }else{
-            coords=this.animationCoords
+        const plot = this.getPlotObjectById(this.symbolBindId);
+        let coords = null;
+        if (plot) {
+            coords = plot.getElement().positions;
+        } else {
+            coords = this.animationCoords;
         }
 
         if (pathType == 'line') {
             this.geometryInstance = new Spline(coords);
         }
 
-        // const main= new MainLineElement()
-        // main.applyMainGeo(this.geometryInstance)
-        // const tempCoords=main.getCoords().flat()
-        
-        // this.pathWayObject=this.addUtilPath(tempCoords)
-    
+        const main = new MainLineElement();
+        main.applyMainGeo(this.geometryInstance);
+        const tempCoords = main.getCoords().flat();
+        if(this.pathWayObject){
+            this.pathWayObject.setPnts(tempCoords)
+            this.pathWayObject=null
+        }else{
+            this.pathWayObject = this.addUtilPath(tempCoords);
+        }
+
+
         this.geometryAngles = this._plotObjects.map((s) => s.getElement().getGeometryAngle());
     }
 
@@ -79,12 +84,17 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
             const element = s.getElement();
             element.setGeometryAngle(this.geometryAngles[i]);
         });
+
+        if(this.pathWayObject){
+            this.removeUtilPath(this.pathWayObject)
+            this.pathWayObject=null
+        }
     }
 
     render(rate) {
-        if(!this.geometryInstance) return;
+        if (!this.geometryInstance) return;
         const trueRate = this._calcTrueRate(rate);
-    
+
         const v = this.geometryInstance.getTransfromByRate(trueRate);
         const pnt = new Point(v[0][0], v[0][1]);
 

src/service/PlotBase/SvgLoader/element/SvgElement.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-08-30 22:20:42
- * @LastEditTime: 2022-05-26 16:13:17
+ * @LastEditTime: 2022-05-26 16:55:50
  * @LastEditors: zk
  * @Description: In User Settings Edit
  * @FilePath: \MapGISPlotBase\src\svg-loader\SvgElement.js
@@ -10,7 +10,11 @@ import RenderedElement from "./RenderedElement";
 
 export default class SvgElement extends RenderedElement {
   constructor(node) {
-    super(node);
+    if(node){
+       super(node)
+    }else{
+      super(SvgElement.createDefaultNode())  
+    }
 
     this.type = "svg";
 
@@ -31,4 +35,11 @@ export default class SvgElement extends RenderedElement {
     cloneObject.height = this.height;
   }
 }
+SvgElement.createDefaultNode = function () {
+    // 添加子节点
+    const svg = document.createElement('svg');
+    svg.setAttribute('width','200');
+    svg.setAttribute('height','200');
+    return svg;
+};