支持polygon polyline line标签 支持处理class类名样式

Author: zhaokai

src/service/2DPlot/Shapes/RegularShapes/PlotRegularObject.js

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2021-11-17 16:12:55
  * @LastEditors: zk
- * @LastEditTime: 2022-06-13 19:16:08
+ * @LastEditTime: 2022-06-14 11:13:58
  */
 
 import { fabric } from 'fabric';

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

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2022-03-23 10:02:49
  * @LastEditors: zk
- * @LastEditTime: 2022-06-07 15:42:15
+ * @LastEditTime: 2022-06-15 15:24:10
  */
 import Point from '../../../../../PlotUtilBase/Geometry/Point';
 import Spline from '../../../../../PlotUtilBase/Geometry/Spline';
@@ -31,7 +31,7 @@ export default class PlotGrowAnimation extends PlotCoordsAnimation {
         // 1.spline
         if (mode === 'spline') {
             this.splines = polysArr.map((s) => {
-                return new Spline(s);
+                return new Spline(s,{});
             });
         } else if (mode === 'center') {
             this.modeFunArr = [];

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

@@ -8,7 +8,7 @@ import Point from '../../../../../PlotUtilBase/Geometry/Point';
  * @Author: zk
  * @Date: 2022-04-19 09:59:57
  * @LastEditors: zk
- * @LastEditTime: 2022-06-08 12:53:11
+ * @LastEditTime: 2022-06-15 15:28:09
  */
 export default class PlotPathAnimation extends PlotCoordsAnimation {
     constructor(options) {
@@ -69,7 +69,7 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
         }
 
         if(pathType==='spline'){
-            this.geometryInstance=new Spline(this._cacheCoords)
+            this.geometryInstance=new Spline(this._cacheCoords,{})
         }
 
         this.geometryAngles = this._plotObjects.map((s) => s.getElement().getGeometryAngle());
@@ -144,6 +144,7 @@ export default class PlotPathAnimation extends PlotCoordsAnimation {
         const trueRate = this._calcTrueRate(rate);
 
         const v = this.geometryInstance.getTransfromByRate(trueRate);
+        
         const pnt = new Point(v[0][0], v[0][1]);
 
         this._plotObjects.forEach((plotobject) => {

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

@@ -0,0 +1,20 @@
+/*
+ * @class: 
+ * @Description: 
+ * @Author: zk
+ * @Date: 2022-06-14 14:07:24
+ * @LastEditors: zk
+ * @LastEditTime: 2022-06-14 14:07:24
+ */
+import Element from './Element';
+
+export default class DefsElement extends Element {
+    constructor(node){
+        super(node)
+        this.type = 'defs';
+    }
+
+	render() {
+		// NOOP
+	}
+}

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

@@ -3,7 +3,7 @@
  * @Author: zk
  * @Date: 2021-11-04 17:02:07
  * @LastEditors: zk
- * @LastEditTime: 2022-05-18 12:41:37
+ * @LastEditTime: 2022-06-15 09:21:27
  */
 
 /* eslint-disable guard-for-in */
@@ -13,7 +13,7 @@ import Bounds from "../../../PlotUtilBase/Geometry/Bound";
 import Property from "./Property";
 import ElementFactory from "./ElementFactory";
 
-import {GElement} from "./index";
+import {GElement,SvgElement,DefsElement,StyleElement} from "./index";
 
 const SVGDEFAULTSTYLE = {
   fill: "none",
@@ -55,7 +55,6 @@ export default class Element {
     this._traverNodes(node);
     this._traverAttributes(node.attributes);
     this._addStylesFromStyleDefinition(node);
-
   }
   _initValues(){
     this._attributes = {};
@@ -91,6 +90,8 @@ export default class Element {
     }
   }
 
+
+
   // 遍历节点
   _traverNodes(node) {
     // 添加子节点
@@ -99,7 +100,7 @@ export default class Element {
     });
   }
 
-  getAttribute(name, createIfNotExists = false) {
+  getAttribute(name, createIfNotExists = false,skipAncestors=true) {
     const attr = this._attributes[name.toLowerCase()];
 
     if (!attr && createIfNotExists) {
@@ -110,6 +111,18 @@ export default class Element {
       return tempAttr;
     }
 
+    if (!skipAncestors) {
+      const parent = this._parent;
+
+      if (parent) {
+        const parentStyle = parent.getAttribute(name);
+
+        if (parentStyle&&parentStyle.hasValue()) {
+          return parentStyle;
+        }
+      }
+    }
+
     return attr || new Property("");
   }
 
@@ -231,13 +244,50 @@ export default class Element {
     return null;
   }
 
+  
+
   getBoundingBox() {
     const boundingBox = new Bounds();
     this._children.forEach((child) => {
       boundingBox.addBounds(child.getBoundingBox());
     });
     return boundingBox;
   }
+
+  _getSVGElement(){
+    if(this instanceof SvgElement) return this;
+    if (!this._parent) return null;
+    let parent = this._parent;
+    
+    while (parent) {
+      if (parent instanceof SvgElement) {
+        return parent;
+      }
+      parent = parent._parent;
+    }
+    
+    return null;
+  }
+  _getStyleElements(){
+      const svgElement= this._getSVGElement()
+      
+      if(!svgElement){
+        return null
+      }
+      if(!svgElement._children || svgElement._children.length===0){
+        return null
+      }
+      const defsV = svgElement._children.filter((s)=> s instanceof DefsElement)
+      if(defsV.length===0) return null;
+      
+      const styleElementGroupArr = defsV.map((def)=>{
+         return  def._children.filter((d)=> d instanceof StyleElement)
+      }).flat()
+
+      return styleElementGroupArr
+      
+  }
+
   _cloneAttributes(obj) {
     const keys = Object.keys(obj);
     const temp = {};

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

@@ -0,0 +1,28 @@
+/*
+ * @Author: your name
+ * @Date: 2021-05-17 14:39:27
+ * @LastEditTime: 2022-06-14 11:42:27
+ * @LastEditors: zk
+ * @Description: In User Settings Edit
+ * @FilePath: \TypeScript-Babel-Starter\src\Document\RectElement.ts
+ */
+import Point from '../../../PlotUtilBase/Geometry/Point.js';
+import PathElement from './PathElement.js';
+
+export default class LineElement extends PathElement {
+    constructor(node) {
+        super(node);
+        this.type = 'line';
+    }
+
+    _geometryPnts() {
+        const p1 = new Point(this.getAttribute('x1').getPixels(), this.getAttribute('y1').getPixels());
+        const p2 = new Point(this.getAttribute('x2').getPixels(), this.getAttribute('y2').getPixels());
+
+        const expArr = [[p1, p2]];
+
+        return expArr;
+    }
+
+
+}

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

@@ -3,7 +3,7 @@
 /*
  * @Author: your name
  * @Date: 2021-08-30 18:10:16
- * @LastEditTime: 2022-05-24 16:19:22
+ * @LastEditTime: 2022-06-14 11:52:11
  * @LastEditors: zk
  * @Description: In User Settings Edit
  * @FilePath: \MapGISPlotBase\src\svg-loader\PathElement.js

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

@@ -0,0 +1,25 @@
+/*
+ * @Author: your name
+ * @Date: 2021-05-17 14:39:27
+ * @LastEditTime: 2022-06-14 11:56:53
+ * @LastEditors: zk
+ * @Description: In User Settings Edit
+ * @FilePath: \TypeScript-Babel-Starter\src\Document\RectElement.ts
+ */
+import Point from '../../../PlotUtilBase/Geometry/Point.js';
+import PolylineElement from './PolylineElement.js';
+
+export default class PolygonElement extends PolylineElement {
+    constructor(node) {
+        super(node);
+        this.type = 'polygon';
+    }
+
+    _geometryPnts() {
+        const { geoPoints } = this;
+        const [{ x: x0, y: y0 }] = geoPoints;
+        const v= geoPoints.map((t)=> new Point(t.x,t.y))
+        const expArr = [ v.concat([new Point(x0, y0)])];
+        return expArr;
+    }
+}

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

@@ -0,0 +1,35 @@
+/*
+ * @Author: your name
+ * @Date: 2021-05-17 14:39:27
+ * @LastEditTime: 2022-06-14 11:56:28
+ * @LastEditors: zk
+ * @Description: In User Settings Edit
+ * @FilePath: \TypeScript-Babel-Starter\src\Document\RectElement.ts
+ */
+import { point } from '@turf/turf';
+import Bounds from '../../../PlotUtilBase/Geometry/Bound.js';
+import Point from '../../../PlotUtilBase/Geometry/Point.js';
+import PathElement from './PathElement.js';
+
+export default class PolylineElement extends PathElement {
+    constructor(node) {
+        super(node);
+        this.type = 'polyline';
+        this.geoPoints = Point.parsePath(this.getAttribute('points').getString());
+    }
+
+    _geometryPnts() {
+        const { geoPoints } = this;
+        const v= geoPoints.map((t)=> new Point(t.x,t.y))
+        return [v];
+    }
+
+    getOriginPoint() {
+        const { geoPoints } = this;
+        const  bounds =new Bounds()
+        geoPoints.forEach((p)=>{
+            bounds.addPnt(p.x,p.y)
+        })
+        return bounds.getCenter()
+      }
+}