【杨琨】【添加二三维联动-绘制功能】

Author: killer1992

src/service/2DPlot/Draw/DrawPoint2D.js

@@ -11,11 +11,11 @@ import  {PlotObjectFactory}  from "../Shapes/PlotObjectFactory";
 import {addExtendLayersPlot} from "../../3DPlot/Utils/PlotUtil";
 
 export default class DrawPoint2D extends DrawObject {
-  constructor(fabricCanvas, symbol, options) {
+  constructor(plotLayer, symbol, options) {
     super();
-    this.m_fabricCanvas = fabricCanvas;
+    this._plotLayer = plotLayer;
     this.m_symbol = symbol;
-    this.m_coordSys = this.m_fabricCanvas.getCoordSys();
+    this.m_coordSys = this._plotLayer.getCoordSys();
     this.onMouseUp = this.innerOnMouseUp.bind(this);
     //绘制完成回调函数
     const {addedPlot} = options;
@@ -24,13 +24,13 @@ export default class DrawPoint2D extends DrawObject {
 
   addHooks() {
     super.addHooks();
-    this.m_fabricCanvas.on("mouse:up", this.onMouseUp);
-    this.m_fabricCanvas.interactive = false;
+    this._plotLayer.on("mouse:up", this.onMouseUp);
+    this._plotLayer.interactive = false;
   }
 
   removeHooks() {
-    this.m_fabricCanvas.interactive = false;
-    this.m_fabricCanvas.off("mouse:up", this.onMouseUp);
+    this._plotLayer.interactive = false;
+    this._plotLayer.off("mouse:up", this.onMouseUp);
     super.removeHooks();
   }
 
@@ -40,18 +40,18 @@ export default class DrawPoint2D extends DrawObject {
     this.m_symbol.getElement().then((element)=>{
       const object = PlotObjectFactory.createInstance(this.m_symbol.type, {
         element:element ,
-        canvas: this.m_fabricCanvas,
+        canvas: this._plotLayer,
       });
 
       object.setPnts([new Point(pnt[0],pnt[1])]);
 
-      this.m_fabricCanvas.add(object);
-      this.m_fabricCanvas.requestRenderAll();
+      this._plotLayer.addPlot(object);
+      this._plotLayer.requestRenderAll();
       this.fireFinishEvent({ plotObj2D: object });
       if(this._addedPlot){
         this._addedPlot(object);
       }
-      addExtendLayersPlot(this.m_fabricCanvas._linkTool, object);
+      addExtendLayersPlot(this._plotLayer._linkTool, object);
       this.disable();
     })
 

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

@@ -94,15 +94,39 @@ const PlotObject = fabric.util.createClass(fabric.Object, {
     isNotVisible: function () {
         return this.opacity === 0 || (!this.width && !this.height && this.strokeWidth === 0) || !this.visible || !this._elem.show;
     },
-    setValue: function setValue(key, value, ids, isWaitRender) {
+    setValue: function setValue(key, value, ids) {
         this._elem.setNodeAttr(key, value, ids);
-        if (isWaitRender) {
-            this.set('dirty', true);
-        }
+        this.set('dirty', true);
+        this.canvas.requestRenderAll();
     },
 
     getPlotCanvas: function getPlotCanvas() {
         return this.canvas;
+    },
+    /**
+     * @description: 设置标绘图元样式，必须通过此方法设置，修改样式的属性无效
+     * @function @function module:3DPlot.BasePlotPrimitive.setStyle
+     * @public
+     *
+     * @param key {String} 样式名
+     * @param value {Any} 样式值
+     * @param value {Any} 样式值
+     * @param nodeIds {String} 图元部件ID字符串，可传入多个id，以逗号分隔，当id有多个时，可统一修改多个部件的样式，
+     * 若找不到id则不做改变
+     */
+    setStyle(key, value, nodeIds) {
+        this.setValue(key, value, nodeIds);
+    },
+
+    /**
+     * @description: 获取标绘图元样式
+     * @function @function module:3DPlot.BasePlotPrimitive.getStyle
+     * @public
+     *
+     * @return {Object} style 图元样式
+     */
+    getStyle() {
+        return this._elem.getStyleJSON();
     }
 });
 fabric.PlotObject = PlotObject;