Jelajahi Sumber

增加蒙版item

haojianlong 4 tahun lalu
induk
melakukan
d28831c618

+ 2 - 2
persagy-web-big-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big-edit",
-    "version": "2.2.15",
+    "version": "2.2.16",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/edit": "2.2.13",
+        "@persagy-web/edit": "2.2.14",
         "@types/uuid": "^8.0.0",
         "crypto-js": "^4.0.0",
         "axios": "^0.20.0"

+ 2 - 2
persagy-web-big/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big",
-    "version": "2.2.39",
+    "version": "2.2.40",
     "description": "博锐尚格建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -41,7 +41,7 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@persagy-web/graph": "2.2.37",
+        "@persagy-web/graph": "2.2.39",
         "axios": "^0.18.0",
         "pako": "^1.0.10",
         "crypto-js": "^4.0.0",

+ 3 - 1
persagy-web-big/src/index.ts

@@ -54,6 +54,7 @@ import { Legend } from "./types/Legend";
 import { Marker } from "./types/Marker";
 import { Relation } from "./types/Relation";
 import SCircleCornerPolylineItem from "./items/SCircleCornerPolylineItem";
+import SMaskItem from "./items/SMaskItem";
 
 export {
     ElementData,
@@ -85,5 +86,6 @@ export {
     SPipeItem,
     SEquipItem,
     SSceneMaskItem,
-    SCircleCornerPolylineItem
+    SCircleCornerPolylineItem,
+    SMaskItem
 };

+ 130 - 0
persagy-web-big/src/items/SMaskItem.ts

@@ -0,0 +1,130 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2021.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphItem, SLineStyle, SGraphRectItem } from "@persagy-web/graph/lib";
+import { SPoint, SPainter, SPath } from "@persagy-web/draw/lib";
+
+export default class SMaskItem extends SGraphRectItem {
+    /** 绘制的路径 */
+    mask: SPath | undefined;
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      矩形数据
+     */
+    constructor(parent: SGraphItem | null, data: SPoint[]) {
+        super(parent, data);
+    }
+
+    /**
+     * 判断点是否在区域内
+     *
+     * @param x 横坐标
+     * @param y 纵坐标
+     */
+    contains(x: number, y: number): boolean {
+        return !this.boundingRect().contains(x, y);
+    }
+
+    /**
+     * 计算矩形的左上角和右下角
+     */
+    protected calRect(): void {
+        if (this.line.length > 1) {
+            const fi = this.line[0];
+            const se = this.line[1];
+            let minx, maxx, miny, maxy;
+            if (fi.x < se.x) {
+                minx = fi.x;
+                maxx = se.x;
+            } else {
+                minx = se.x;
+                maxx = fi.x;
+            }
+
+            if (fi.y < se.y) {
+                miny = fi.y;
+                maxy = se.y;
+            } else {
+                miny = se.y;
+                maxy = fi.y;
+            }
+
+            this._leftTop = new SPoint(minx, miny);
+            this._rightBottom = new SPoint(maxx, maxy);
+            this.createMask();
+        }
+    }
+
+    /**
+     * 创建蒙版
+     */
+    createMask(): void {
+        this.mask = new SPath();
+        this.mask.moveTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+        this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+        this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+        this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+        this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+
+        let antiArr = [
+            this._leftTop,
+            new SPoint(this._leftTop.x, this._rightBottom.y),
+            this._rightBottom,
+            new SPoint(this._rightBottom.x, this._leftTop.y)
+        ];
+        this.mask.polygon(antiArr);
+        this.update();
+    }
+
+    /**
+     * 绘制
+     *
+     * @param painter   绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        if (this.line.length == 2) {
+            painter.pen.color = this.strokeColor;
+            painter.brush.color = this.fillColor;
+            const eachPx = painter.toPx(1);
+            if (this.widthIsPx) {
+                painter.pen.lineWidth = this.lineWidth * eachPx;
+            } else {
+                painter.pen.lineWidth = this.lineWidth;
+            }
+            if (this.lineStyle == SLineStyle.Dashed) {
+                painter.pen.lineDash = [3 * eachPx, 7 * eachPx];
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [2 * eachPx, 2 * eachPx];
+            }
+            if (this.mask) {
+                painter.drawPath(this.mask);
+            }
+        }
+    }
+}

+ 2 - 2
persagy-web-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/edit",
-    "version": "2.2.13",
+    "version": "2.2.14",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/big": "2.2.39",
+        "@persagy-web/big": "2.2.40",
         "@types/uuid": "^8.0.0"
     }
 }

+ 3 - 1
persagy-web-edit/src/index.ts

@@ -45,6 +45,7 @@ import { SGraphPointListInsert } from "./commands/SGraphPointListInsert";
 import { SGraphPointListUpdate } from "./commands/SGraphPointListUpdate";
 import { SGraphPropertyCommand } from "./commands/SGraphPropertyCommand";
 import SBaseCirclePolylineEdit from "./items/SBaseCirclePolylineEdit";
+import SBaseMaskEdit from "./items/SBaseMaskEdit";
 
 export {
     SGraphDeleteListCommand,
@@ -67,5 +68,6 @@ export {
     SGraphPointListInsert,
     SGraphPointListUpdate,
     SGraphPropertyCommand,
-    SBaseCirclePolylineEdit
+    SBaseCirclePolylineEdit,
+    SBaseMaskEdit
 };

+ 130 - 0
persagy-web-edit/src/items/SBaseMaskEdit.ts

@@ -0,0 +1,130 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+import { SPainter, SPoint, SPath } from "@persagy-web/draw";
+import { SLineStyle, SGraphItem } from "@persagy-web/graph/";
+import { SBaseRectEdit } from "..";
+import { Marker } from "../type/Marker";
+
+/**
+ * 矩形编辑类
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
+export default class SBaseMaskEdit extends SBaseRectEdit {
+    /** 绘制的路径 */
+    mask: SPath | undefined;
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      矩形数据
+     */
+    constructor(parent: SGraphItem | null, data: Marker) {
+        super(parent, data);
+        this.data = data;
+    }
+
+    /**
+     * 计算矩形的左上角和右下角
+     */
+    protected calRect(): void {
+        if (this.line.length > 1) {
+            const fi = this.line[0];
+            const se = this.line[1];
+            let minx, maxx, miny, maxy;
+            if (fi.x < se.x) {
+                minx = fi.x;
+                maxx = se.x;
+            } else {
+                minx = se.x;
+                maxx = fi.x;
+            }
+
+            if (fi.y < se.y) {
+                miny = fi.y;
+                maxy = se.y;
+            } else {
+                miny = se.y;
+                maxy = fi.y;
+            }
+
+            this._leftTop = new SPoint(minx, miny);
+            this._rightBottom = new SPoint(maxx, maxy);
+            this.createMask();
+        }
+    }
+
+    /**
+     * 创建蒙版
+     */
+    createMask(): void {
+        this.mask = new SPath();
+        this.mask.moveTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+        this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+        this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+        this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
+        this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
+
+        let antiArr = [
+            this._leftTop,
+            new SPoint(this._leftTop.x, this._rightBottom.y),
+            this._rightBottom,
+            new SPoint(this._rightBottom.x, this._leftTop.y)
+        ];
+        this.mask.polygon(antiArr);
+        this.update();
+    }
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter   绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        if (this.line.length == 2) {
+            painter.pen.color = this.strokeColor;
+            painter.brush.color = this.fillColor;
+            const eachPx = painter.toPx(1);
+            // 使用像素值
+            if (this.widthIsPx) {
+                painter.pen.lineWidth = this.lineWidth * eachPx;
+            } else {
+                // 否则
+                painter.pen.lineWidth = this.lineWidth;
+            }
+            if (this.lineStyle == SLineStyle.Dashed) {
+                painter.pen.lineDash = [eachPx * 3, eachPx * 7];
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [2 * eachPx, 2 * eachPx];
+            }
+
+            if (this.mask) {
+                painter.drawPath(this.mask);
+            }
+        }
+    }
+}

+ 4 - 4
persagy-web-edit/src/items/SBaseRectEdit.ts

@@ -60,7 +60,7 @@ export class SBaseRectEdit extends SGraphEdit {
         return this._rightBottom.y - this._leftTop.y;
     }
     /** 矩形两个对角 */
-    private _line: SPoint[] = [];
+    protected _line: SPoint[] = [];
     get line(): SPoint[] {
         return this._line;
     }
@@ -70,9 +70,9 @@ export class SBaseRectEdit extends SGraphEdit {
     }
 
     /** 矩形左上角 */
-    private _leftTop: SPoint = new SPoint();
+    protected _leftTop: SPoint = new SPoint();
     /** 矩形右下角 */
-    private _rightBottom: SPoint = new SPoint();
+    protected _rightBottom: SPoint = new SPoint();
     /** 绘制矩形的圆角半径 */
     private _radius: number = 0;
     get radius(): number {
@@ -242,7 +242,7 @@ export class SBaseRectEdit extends SGraphEdit {
     /**
      * 计算矩形的左上角和右下角
      */
-    private calRect(): void {
+    protected calRect(): void {
         if (this.line.length > 1) {
             const fi = this.line[0];
             const se = this.line[1];

+ 1 - 1
persagy-web-graph/package.json

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

+ 3 - 3
persagy-web-graph/src/items/SGraphRectItem.ts

@@ -47,9 +47,9 @@ export class SGraphRectItem extends SGraphStyleItem {
     }
 
     /** 矩形左上角 */
-    private _leftTop: SPoint = new SPoint();
+    protected _leftTop: SPoint = new SPoint();
     /** 矩形右下角 */
-    private _rightBottom: SPoint = new SPoint();
+    protected _rightBottom: SPoint = new SPoint();
 
     /** 绘制矩形的圆角半径 */
     private _radius: number = 0;
@@ -96,7 +96,7 @@ export class SGraphRectItem extends SGraphStyleItem {
     /**
      * 计算矩形的左上角和右下角
      */
-    private calRect(): void {
+    protected calRect(): void {
         if (this.line.length > 1) {
             const fi = this.line[0];
             const se = this.line[1];

+ 53 - 1
persagy-web-graph/src/items/SGraphStyleItem.ts

@@ -25,7 +25,12 @@
  */
 
 import { SGraphItem } from "../SGraphItem";
-import { SColor } from "@persagy-web/draw/lib";
+import {
+    SColor,
+    SGradient,
+    SLinearGradient,
+    SRadialGradient
+} from "@persagy-web/draw/lib";
 import { SLineStyle } from "../enums/SGraphLineStyle";
 
 /**
@@ -85,4 +90,51 @@ export class SGraphStyleItem extends SGraphItem {
     constructor(parent: SGraphItem | null = null) {
         super(parent);
     }
+
+    /**
+     * 解析渐变样式
+     *
+     * @param str   渐变存储的字符串
+     * @return 转化为的渐变
+     */
+    parseFill(str: string): SGradient | undefined {
+        const index1 = str.indexOf("{");
+        const index2 = str.indexOf("}");
+        const temp = str.substring(index1 + 1, index2 - 1);
+        const dataArr = temp.split(";");
+        if (str.indexOf("SLinearGradient") > -1) {
+            try {
+                // @ts-ignore
+                const grad = new SLinearGradient(
+                    ...dataArr[0].split(","),
+                    // @ts-ignore
+                    ...dataArr[1].split(",")
+                );
+                for (let i = 2; i < dataArr.length; i++) {
+                    const cur = dataArr[i].split(",");
+                    grad.addColorStop(Number(cur[0]), new SColor(cur[1]));
+                }
+                return grad;
+            } catch (e) {
+                console.log("渐变颜色格式有误", e, str);
+            }
+        } else if (str.indexOf("SRadialGradient") > -1) {
+            try {
+                // @ts-ignore
+                const grad = new SRadialGradient(
+                    ...dataArr[0].split(","),
+                    // @ts-ignore
+                    ...dataArr[1].split(",")
+                );
+                for (let i = 2; i < dataArr.length; i++) {
+                    const cur = dataArr[i].split(",");
+                    grad.addColorStop(Number(cur[0]), new SColor(cur[1]));
+                }
+                return grad;
+            } catch (e) {
+                console.log("渐变颜色格式有误", e, str);
+            }
+        }
+        return undefined;
+    } // parseFill()
 }