裁剪功能添加

persagy-web-draw/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/draw",
-    "version": "2.2.5",
+    "version": "2.2.6",
     "description": "博锐尚格绘制引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

persagy-web-draw/src/SPainter.ts

@@ -54,7 +54,7 @@ export class SPainter extends SObject {
     /** 绘制引擎 */
     private readonly engine: SPaintEngine;
 
-    /** 画笔  */
+    /** 画笔 */
     get pen(): SPen {
         return this.engine.state.pen;
     } // Get pen
@@ -70,7 +70,7 @@ export class SPainter extends SObject {
         this.engine.state.brush = value;
     } // Set brush
 
-    /** 字体属性    */
+    /** 字体属性 */
     get font(): SFont {
         return this.engine.state.font;
     } // Get font
@@ -79,7 +79,7 @@ export class SPainter extends SObject {
         this.engine.changeFont(value);
     } // Set font
 
-    /** 融合属性    */
+    /** 融合属性 */
     get composite(): number {
         return this.engine.state._composite;
     } // Get composite
@@ -87,7 +87,7 @@ export class SPainter extends SObject {
         this.engine.state._composite = value;
     } // Set composite
 
-    /** 阴影设置    */
+    /** 阴影设置 */
     get shadow(): SShadow {
         return this.engine.state.shadow;
     } // Get shadow
@@ -95,6 +95,14 @@ export class SPainter extends SObject {
         this.engine.state.shadow = value;
     } // Set shadow
 
+    /** 裁剪设置 */
+    get clip(): SPath | undefined {
+        return this.engine.state.clip;
+    } // Get clip
+    set clip(value: SPath | undefined) {
+        this.engine.state.clip = value;
+    } // Set clip
+
     /** 变换矩阵 */
     get worldTransform(): SMatrix {
         return this.engine.state.matrix;
@@ -217,14 +225,6 @@ export class SPainter extends SObject {
 
     // =================================================================================================================
     // 绘制相关
-    /**
-     * 设置裁剪路径
-     *
-     * @param   path        裁剪路径
-     */
-    setClip(path: Path2D): void {
-        this.engine.setClip(path);
-    } // Function setClip()
 
     /**
      * 清空矩形区域

persagy-web-draw/src/SPath.ts

@@ -52,8 +52,7 @@ export class SPath {
      * @param path
      */
     addPath(path: SPath): void {
-        // todo
-        this.cmdList.concat(path.cmdList);
+        this.cmdList = this.cmdList.concat(path.cmdList);
     } // Function addPath()
 
     /**

persagy-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -91,17 +91,6 @@ export class SCanvasPaintEngine extends SPaintEngine {
 
     // =================================================================================================================
     // 绘制图形
-    /**
-     * 设置裁剪路径
-     *
-     * @param   path        裁剪路径
-     */
-    setClip(path: Path2D): void {
-        this.setMatrix();
-        // this._canvas.stroke(path);
-        this._canvas.fill(path);
-        this._canvas.clip();
-    } // Function setClip()
 
     /**
      * 清空矩形区域
@@ -119,13 +108,12 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   rect        矩形
      */
     drawRect(rect: SRect): void {
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-        this._canvas.fillRect(rect.x, rect.y, rect.width, rect.height);
-        this._canvas.strokeRect(rect.x, rect.y, rect.width, rect.height);
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.rect(rect.x, rect.y, rect.width, rect.height);
+            this._canvas.stroke();
+            this._canvas.fill();
+        });
     } // Function drawRect()
 
     /**
@@ -136,15 +124,12 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   r           圆半径
      */
     drawCircle(cx: number, cy: number, r: number): void {
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-        this._canvas.beginPath();
-        this._canvas.arc(cx, cy, r, 0, 2 * Math.PI, true);
-        this._canvas.fill();
-        this._canvas.stroke();
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.arc(cx, cy, r, 0, 2 * Math.PI, true);
+            this._canvas.fill();
+            this._canvas.stroke();
+        });
     } // Function drawCircle()
 
     /**
@@ -156,13 +141,12 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   ry          垂直半径
      */
     drawEllipse(cx: number, cy: number, rx: number, ry: number): void {
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-        this._canvas.beginPath();
-        this._canvas.ellipse(cx, cy, rx, ry, 0.5, 0, 2 * Math.PI, true);
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.ellipse(cx, cy, rx, ry, 0.5, 0, 2 * Math.PI, true);
+            this._canvas.fill();
+            this._canvas.stroke();
+        });
     } // Function drawEllipse()
 
     /**
@@ -171,15 +155,12 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   line        线段
      */
     drawLine(line: SLine): void {
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-        this._canvas.beginPath();
-        this._canvas.moveTo(line.x1, line.y1);
-        this._canvas.lineTo(line.x2, line.y2);
-        this._canvas.stroke();
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.moveTo(line.x1, line.y1);
+            this._canvas.lineTo(line.x2, line.y2);
+            this._canvas.stroke();
+        });
     } // Function drawLine()
 
     /**
@@ -193,19 +174,14 @@ export class SCanvasPaintEngine extends SPaintEngine {
             return;
         }
 
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-
-        this._canvas.beginPath();
-        this._canvas.moveTo(points[0].x, points[0].y);
-        for (let p of points) {
-            this._canvas.lineTo(p.x, p.y);
-        }
-
-        this._canvas.stroke();
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.moveTo(points[0].x, points[0].y);
+            for (let p of points) {
+                this._canvas.lineTo(p.x, p.y);
+            }
+            this._canvas.stroke();
+        });
     } // Function drawPolyline()
 
     /**
@@ -219,21 +195,17 @@ export class SCanvasPaintEngine extends SPaintEngine {
             return;
         }
 
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-
-        this._canvas.beginPath();
-        this._canvas.moveTo(points[0].x, points[0].y);
-        for (let p of points) {
-            this._canvas.lineTo(p.x, p.y);
-        }
-        this._canvas.closePath();
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.moveTo(points[0].x, points[0].y);
+            for (let p of points) {
+                this._canvas.lineTo(p.x, p.y);
+            }
+            this._canvas.closePath();
 
-        this._canvas.fill();
-        this._canvas.stroke();
+            this._canvas.fill();
+            this._canvas.stroke();
+        });
     } // Function drawPolygon()
 
     /**
@@ -242,61 +214,9 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   path        路径
      */
     drawPath(path: SPath): void {
-        path.cmdList.forEach(cmd => {
-            if (cmd.command == "L") {
-                this._canvas.lineTo(cmd.args[0], cmd.args[1]);
-            } else if (cmd.command == "M") {
-                this._canvas.moveTo(cmd.args[0], cmd.args[1]);
-            } else if (cmd.command == "Z") {
-                this._canvas.closePath();
-            } else if (cmd.command == "Q") {
-                this._canvas.quadraticCurveTo(
-                    cmd.args[0],
-                    cmd.args[1],
-                    cmd.args[2],
-                    cmd.args[3]
-                );
-            } else if (cmd.command == "T") {
-                // @ts-ignore
-                this._canvas.bezierCurveTo(
-                    cmd.args[0],
-                    cmd.args[1],
-                    cmd.args[2],
-                    cmd.args[3],
-                    cmd.args[4]
-                );
-            } else if (cmd.command == "Ellipse") {
-                this._canvas.ellipse(
-                    cmd.args[0],
-                    cmd.args[1],
-                    cmd.args[2],
-                    cmd.args[3],
-                    0,
-                    0,
-                    Math.PI * 2
-                );
-            } else if (cmd.command == "Arc") {
-                this._canvas.arc(
-                    cmd.args[0],
-                    cmd.args[1],
-                    cmd.args[2],
-                    cmd.args[3],
-                    cmd.args[4],
-                    cmd.args[5] == 1
-                );
-            } else if (cmd.command == "ArcTo") {
-                this._canvas.arcTo(
-                    cmd.args[0],
-                    cmd.args[1],
-                    cmd.args[2],
-                    cmd.args[3],
-                    cmd.args[4]
-                );
-            }
+        this.init(() => {
+            this.drawWay(path);
         });
-
-        this._canvas.fill();
-        this._canvas.stroke();
     } // Function drawPath()
 
     /**
@@ -308,18 +228,14 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   maxWidth    最大宽度
      */
     drawText(text: string, x: number, y: number, maxWidth?: number): void {
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setFont();
-        this.setComposite();
-        this.setShadow();
-
-        if (maxWidth == undefined) {
-            this._canvas.fillText(text, x, y);
-        } else {
-            this._canvas.fillText(text, x, y, maxWidth);
-        }
+        this.init(() => {
+            this.setFont();
+            if (maxWidth == undefined) {
+                this._canvas.fillText(text, x, y);
+            } else {
+                this._canvas.fillText(text, x, y, maxWidth);
+            }
+        });
     } // Function drawText()
 
     /**
@@ -338,16 +254,17 @@ export class SCanvasPaintEngine extends SPaintEngine {
         width?: number,
         height?: number
     ): void {
-        this.setMatrix();
-        try {
-            if (width == undefined) {
-                this._canvas.drawImage(img, x, y);
-            } else {
-                this._canvas.drawImage(img, x, y, width, height as number);
+        this.init(() => {
+            try {
+                if (width == undefined) {
+                    this._canvas.drawImage(img, x, y);
+                } else {
+                    this._canvas.drawImage(img, x, y, width, height as number);
+                }
+            } catch (e) {
+                console.log(e);
             }
-        } catch (e) {
-            console.log(e);
-        }
+        });
     } // Function drawImage()
 
     /**
@@ -400,38 +317,35 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param   r       导角半径
      */
     drawRoundRect(rect: SRect, r: number): void {
-        this.setMatrix();
-        this.setPen();
-        this.setBrush();
-        this.setComposite();
-        this.setShadow();
-        this._canvas.beginPath();
-        this._canvas.moveTo(rect.x, rect.y + r);
-        this._canvas.lineTo(rect.x, rect.bottom - r);
-        this._canvas.quadraticCurveTo(
-            rect.x,
-            rect.bottom,
-            rect.x + r,
-            rect.bottom
-        );
-        this._canvas.lineTo(rect.right - r, rect.bottom);
-        this._canvas.quadraticCurveTo(
-            rect.right,
-            rect.bottom,
-            rect.right,
-            rect.bottom - r
-        );
-        this._canvas.lineTo(rect.right, rect.y + r);
-        this._canvas.quadraticCurveTo(
-            rect.right,
-            rect.y,
-            rect.right - r,
-            rect.y
-        );
-        this._canvas.lineTo(rect.x + r, rect.y);
-        this._canvas.quadraticCurveTo(rect.x, rect.y, rect.x, rect.y + r);
-        this._canvas.fill();
-        this._canvas.stroke();
+        this.init(() => {
+            this._canvas.beginPath();
+            this._canvas.moveTo(rect.x, rect.y + r);
+            this._canvas.lineTo(rect.x, rect.bottom - r);
+            this._canvas.quadraticCurveTo(
+                rect.x,
+                rect.bottom,
+                rect.x + r,
+                rect.bottom
+            );
+            this._canvas.lineTo(rect.right - r, rect.bottom);
+            this._canvas.quadraticCurveTo(
+                rect.right,
+                rect.bottom,
+                rect.right,
+                rect.bottom - r
+            );
+            this._canvas.lineTo(rect.right, rect.y + r);
+            this._canvas.quadraticCurveTo(
+                rect.right,
+                rect.y,
+                rect.right - r,
+                rect.y
+            );
+            this._canvas.lineTo(rect.x + r, rect.y);
+            this._canvas.quadraticCurveTo(rect.x, rect.y, rect.x, rect.y + r);
+            this._canvas.fill();
+            this._canvas.stroke();
+        });
     } // Function drawRoundRect()
 
     /**
@@ -448,6 +362,24 @@ export class SCanvasPaintEngine extends SPaintEngine {
 
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // 私有函数
+
+    /**
+     * 设置整体绘制状态
+     *
+     * fn   绘制图形的具体函数
+     * */
+    private init(fn: Function): void {
+        this.setMatrix();
+        this.setPen();
+        this.setBrush();
+        this.setComposite();
+        this.setShadow();
+        this.setClip();
+        fn();
+        this._canvas.fill();
+        this._canvas.stroke();
+    } // Function init()
+
     /**
      * 设置画笔
      */
@@ -649,4 +581,77 @@ export class SCanvasPaintEngine extends SPaintEngine {
             this.state.matrix.f
         );
     } // Function setMatrix()
+
+    /**
+     * 设置裁剪路径
+     *
+     */
+    setClip(): void {
+        if (this.state.clip) {
+            this.drawWay(this.state.clip);
+            this._canvas.clip();
+        }
+    } // Function setClip()
+
+    /**
+     * 绘制路径
+     *
+     * */
+    private drawWay(path: SPath): void {
+        this._canvas.beginPath();
+        path.cmdList.forEach(cmd => {
+            if (cmd.command == "L") {
+                this._canvas.lineTo(cmd.args[0], cmd.args[1]);
+            } else if (cmd.command == "M") {
+                this._canvas.moveTo(cmd.args[0], cmd.args[1]);
+            } else if (cmd.command == "Z") {
+                this._canvas.closePath();
+            } else if (cmd.command == "Q") {
+                this._canvas.quadraticCurveTo(
+                    cmd.args[0],
+                    cmd.args[1],
+                    cmd.args[2],
+                    cmd.args[3]
+                );
+            } else if (cmd.command == "T") {
+                // @ts-ignore
+                this._canvas.bezierCurveTo(
+                    cmd.args[0],
+                    cmd.args[1],
+                    cmd.args[2],
+                    cmd.args[3],
+                    cmd.args[4]
+                );
+            } else if (cmd.command == "Ellipse") {
+                this._canvas.ellipse(
+                    cmd.args[0],
+                    cmd.args[1],
+                    cmd.args[2],
+                    cmd.args[3],
+                    0,
+                    0,
+                    Math.PI * 2
+                );
+            } else if (cmd.command == "Arc") {
+                this._canvas.arc(
+                    cmd.args[0],
+                    cmd.args[1],
+                    cmd.args[2],
+                    cmd.args[3],
+                    cmd.args[4],
+                    cmd.args[5] == 1
+                );
+            } else if (cmd.command == "ArcTo") {
+                this._canvas.arcTo(
+                    cmd.args[0],
+                    cmd.args[1],
+                    cmd.args[2],
+                    cmd.args[3],
+                    cmd.args[4]
+                );
+            }
+        });
+        this._canvas.fill();
+        this._canvas.stroke();
+    } // Function drawWay()
 } // class SPaintEngine

persagy-web-draw/src/engines/SPaintEngine.ts

@@ -144,12 +144,6 @@ export abstract class SPaintEngine {
 
     // =================================================================================================================
     // 绘制图形
-    /**
-     * 设置裁剪路径
-     *
-     * @param   path        裁剪路径
-     */
-    abstract setClip(path: Path2D): void;
 
     /**
      * 清空矩形区域

persagy-web-draw/src/engines/SPaintState.ts

@@ -24,8 +24,8 @@
  * *********************************************************************************************************************
  */
 
-import { SBrush, SFont, SPen } from "..";
-import { SCompositeType } from "../enums/SCompositeType";
+import { SBrush, SFont, SPath, SPen } from "..";
+import { SCompositeType } from "..";
 import { SShadow } from "../SShadow";
 import { SMatrix } from "@persagy-web/base";
 
@@ -72,10 +72,24 @@ export class SPaintState {
     private _shadow: SShadow = new SShadow();
     get shadow(): SShadow {
         return this._shadow;
-    }
+    } // Set shadow
     set shadow(v: SShadow) {
         this._shadow = v;
-    }
+    } // Set shadow
+
+    /** 裁剪 */
+    private _clip: SPath | undefined;
+    get clip(): SPath | undefined {
+        return this._clip;
+    } // Set clip
+    set clip(v: SPath | undefined) {
+        if (v) {
+            this._clip = new SPath();
+            this._clip.addPath(v);
+        } else {
+            this._clip = v;
+        }
+    } // Set clip
 
     /**
      * 构造函数
@@ -89,6 +103,7 @@ export class SPaintState {
             this.font = new SFont(state.font);
             this._composite = state._composite;
             this.shadow = new SShadow(state.shadow);
+            this.clip = state.clip;
             let m = new SMatrix();
             m.m11 = state.matrix.m11;
             m.m12 = state.matrix.m12;

persagy-web-draw/src/engines/SSvgPaintEngine.ts

@@ -33,7 +33,7 @@ import {
     SPoint,
     SRect
 } from "..";
-import {SPath} from "../SPath";
+import { SPath } from "../SPath";
 
 /**
  * Canvas绘制引擎基类
@@ -103,9 +103,9 @@ export class SSvgPaintEngine extends SPaintEngine {
      *
      * @param   path        裁剪路径
      */
-    setClip(path: Path2D): void {
-        // TODO:  PLX添加实现代码
-    } // Function setClip()
+    // setClip(path: SPath): void {
+    //     // TODO:  PLX添加实现代码
+    // } // Function setClip()
     /**
      * 清空矩形区域
      *
@@ -341,5 +341,5 @@ export class SSvgPaintEngine extends SPaintEngine {
     /**
      * 绘制圆角矩形
      * */
-    drawRoundRect(){} // Function drawRoundRect()
+    drawRoundRect(): void {} // Function drawRoundRect()
 } // Class SSvgPaintEngine

persagy-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/graph",
-    "version": "2.2.9",
+    "version": "2.2.10",
     "description": "博锐尚格二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

persagy-web-graph/src/SGraphItem.ts

@@ -27,6 +27,7 @@
 import { SMouseButton, SMouseEvent, SObject, SMatrix } from "@persagy-web/base";
 import { SPainter, SPoint, SRect } from "@persagy-web/draw";
 import { SGraphScene } from "./SGraphScene";
+import { SPath } from "@persagy-web/draw/lib";
 
 /**
  * Graph图形引擎Item类
@@ -239,8 +240,6 @@ export class SGraphItem extends SObject {
                     item._inverseScale = 1.0 / matrix.a;
                     painter.scale(item._inverseScale, item._inverseScale);
                 }
-                // 设置绘制区域
-                // canvas.clip(item.boundingRect())
 
                 // rect 调整  宽度高度取最小值  根据pos位移
                 // 绘制item

persagy-web-graph/src/SGraphSelectContainer.ts

@@ -38,7 +38,10 @@ import { SMouseEvent } from "@persagy-web/base";
  */
 export class SGraphSelectContainer extends SGraphItem {
     /** 选择对象list */
-    private itemList: SGraphItem[] = [];
+    private _itemList: SGraphItem[] = [];
+    get itemList(): SGraphItem[] {
+        return this._itemList;
+    } // Get itemList
     /** 外接点的list */
     private pointList: SPoint[] = [];
     /** item宽 */