Selaa lähdekoodia

更新矩形item 区域 多边形 更新包

haojianlong 4 vuotta sitten
vanhempi
commit
d1499083c1

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

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big",
-    "version": "2.2.5",
+    "version": "2.2.6",
     "description": "博锐尚格建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -41,6 +41,6 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@persagy-web/graph": "2.2.7"
+        "@persagy-web/graph": "2.2.8"
     }
 }

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

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

+ 5 - 1
persagy-web-graph/src/index.ts

@@ -55,6 +55,8 @@ import { PolyGroup } from "./types/PolyGroup";
 import { Point } from "./types/Point";
 import { SGraphRectItem } from "./items/SGraphRectItem";
 import { SGraphRect } from "./types/SGraphRect";
+import { SGraphSvgItem } from "./items/SGraphSvgItem";
+import { SGraphSvg } from "./types/SGraphSvg";
 
 export {
     SGraphItem,
@@ -85,5 +87,7 @@ export {
     PolyGroup,
     Point,
     SGraphRect,
-    SGraphRectItem
+    SGraphRectItem,
+    SGraphSvgItem,
+    SGraphSvg
 };

+ 2 - 2
persagy-web-graph/src/items/SGraphAreaGroupItem.ts

@@ -66,7 +66,7 @@ export class SGraphAreaGroupItem extends SGraphShape {
             let tempArr = data.OutLine;
             this.minX = tempArr[0][0][0].X;
             this.maxX = this.minX;
-            this.minY = -tempArr[0][0][0].Y;
+            this.minY = tempArr[0][0][0].Y;
             this.maxY = this.minY;
             // 处理轮廓点数组,同时计算最大最小值
             this.pointList = tempArr.map((t): SPoint[][] => {
@@ -75,7 +75,7 @@ export class SGraphAreaGroupItem extends SGraphShape {
                     let array = it.map(
                         (item): SPoint => {
                             let x = item.X,
-                                y = -item.Y;
+                                y = item.Y;
                             if (x < this.minX) {
                                 this.minX = x;
                             }

+ 2 - 2
persagy-web-graph/src/items/SGraphPolyGroupItem.ts

@@ -56,13 +56,13 @@ export class SGraphPolyGroupItem extends SGraphShape {
         super(parent, data.Style);
         this.minX = data.Outline[0][0].X;
         this.maxX = this.minX;
-        this.minY = -data.Outline[0][0].Y;
+        this.minY = data.Outline[0][0].Y;
         this.maxY = this.minY;
         this.pointList = data.Outline.map((t): SPoint[] => {
             return t.map(
                 (it): SPoint => {
                     let x = it.X,
-                        y = -it.Y;
+                        y = it.Y;
                     if (x < this.minX) {
                         this.minX = x;
                     }

+ 4 - 40
persagy-web-graph/src/items/SGraphRectItem.ts

@@ -35,30 +35,6 @@ import { SGraphRect } from "..";
  * @author 郝建龙
  * */
 export class SGraphRectItem extends SGraphShape {
-    /** item左上角X坐标 */
-    private _leftTopY: number = 0;
-    get leftTopY(): number {
-        return this._leftTopY;
-    } // Get leftTopY
-    set leftTopY(v: number) {
-        if (v == this._leftTopY) {
-            return;
-        }
-        this._leftTopY = v;
-        this.update();
-    } // Set leftTopY
-    /** item左上角Y坐标 */
-    private _leftTopX: number = 0;
-    get leftTopX(): number {
-        return this._leftTopX;
-    } // Get leftTopX
-    set leftTopX(v: number) {
-        if (v == this._leftTopX) {
-            return;
-        }
-        this._leftTopX = v;
-        this.update();
-    } // Set leftTopX
     /** item宽 */
     private _width: number = 0;
     get width(): number {
@@ -104,10 +80,9 @@ export class SGraphRectItem extends SGraphShape {
      */
     constructor(parent: SGraphItem | null, data: SGraphRect) {
         super(parent, data.Style);
-        this.leftTopX = data.X;
-        this.leftTopY = data.Y;
         this.width = data.Width;
         this.height = data.Height;
+        this.moveTo(data.X, data.Y);
         if (data.Radius && !isNaN(data.Radius)) {
             this.radius = Number(data.Radius);
         }
@@ -119,7 +94,7 @@ export class SGraphRectItem extends SGraphShape {
      * @return	SRect
      */
     boundingRect(): SRect {
-        return new SRect(this.leftTopX, this.leftTopY, this.width, this.height);
+        return new SRect(0, 0, this.width, this.height);
     } // Function boundingRect()
 
     /**
@@ -130,20 +105,9 @@ export class SGraphRectItem extends SGraphShape {
     onDraw(painter: SPainter): void {
         super.onDraw(painter);
         if (this.radius != 0) {
-            painter.drawRoundRect(
-                this.leftTopX,
-                this.leftTopY,
-                this.width,
-                this.height,
-                this.radius
-            );
+            painter.drawRoundRect(0, 0, this.width, this.height, this.radius);
         } else {
-            painter.drawRect(
-                this.leftTopX,
-                this.leftTopY,
-                this.width,
-                this.height
-            );
+            painter.drawRect(0, 0, this.width, this.height);
         }
     } // Function onDraw()
 } // Class SGraphRectItem

+ 129 - 0
persagy-web-graph/src/items/SGraphSvgItem.ts

@@ -0,0 +1,129 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphShape } from "./SGraphShape";
+import { SPainter, SRect } from "@persagy-web/draw/lib";
+import { SGraphItem } from "../SGraphItem";
+import { SGraphSvg } from "../types/SGraphSvg";
+
+/**
+ * SVG图片item
+ *
+ * @author  郝建龙
+ */
+export class SGraphSvgItem extends SGraphShape {
+    /** 图片dom */
+    img: CanvasImageSource | undefined;
+    /** 图片加载是否完成 */
+    isLoadOver: boolean = false;
+    /** 图片地址 */
+    private _url: string = "";
+    get url(): string {
+        return this._url;
+    } // Get Url
+    set url(v: string) {
+        if (this._url == v) {
+            return;
+        }
+        this._url = v;
+        if (!this.img) {
+            this.img = new Image();
+        }
+        // @ts-ignore
+        this.img.src = v;
+    } // Set Url
+    /** item宽 */
+    private _width: number = 0;
+    get width(): number {
+        return this._width;
+    } // Get width
+    set width(v: number) {
+        if (v == this._width) {
+            return;
+        }
+        this._width = v;
+        this.update();
+    } // Set width
+    /** item高 */
+    private _height: number = 0;
+    get height(): number {
+        return this._height;
+    } // Get height
+    set height(v: number) {
+        if (v == this._height) {
+            return;
+        }
+        this._height = v;
+        this.update();
+    } // Set height
+
+    /**
+     * 构造函数
+     *
+     * @param   parent  父类
+     * @param   data    传入数据
+     * */
+    constructor(parent: SGraphItem | null, data: SGraphSvg) {
+        super(parent, data.Style);
+        if (data.Url) {
+            this.img = new Image();
+            this.url = data.Url;
+            this.img.onload = (e): void => {
+                this.isLoadOver = true;
+                this.update();
+            };
+            this.img.onerror = (e): void => {
+                this.isLoadOver = false;
+                this.update();
+                console.log("加载图片错误!", e);
+            };
+        }
+        this.width = data.Width;
+        this.height = data.Height;
+        this.moveTo(data.X, data.Y);
+    } // Constructor
+
+    /**
+     * Item对象边界区域
+     *
+     * @return	SRect
+     */
+    boundingRect(): SRect {
+        return new SRect(0, 0, this.width, this.height);
+    } // Function boundingRect()
+
+    /**
+     * Item绘制操作
+     *
+     * @param   painter      绘画类
+     */
+    onDraw(painter: SPainter): void {
+        if (this.isLoadOver) {
+            // @ts-ignore
+            painter.drawImage(this.img, 0, 0, this.width, this.height);
+        }
+    } // Function onDraw()
+} // Class SGraphSvgItem

+ 17 - 23
persagy-web-graph/src/items/SImageItem.ts

@@ -182,33 +182,22 @@ export class SImageItem extends SObjectItem {
 
     /**
      * 判断当前地址和回调地址是否相同
-     * @param   imgUrl      图片回调地址
      *
+     * @param   imgUrl      图片回调地址
+     * @return  当前地址和回调地址是否相同
      */
     private isUrlIdentical(imgUrl: string): boolean {
         if (this.url.indexOf("://") == -1) {
+            // eslint-disable-next-line max-len
             const reg = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
-            if (reg.test(this.url)) {// url是base64地址
-                if(this.url == imgUrl) {
-                    return true;
-                } else {
-                    return false;
-                }
-            } else {// url是相对地址
-                if (this.url == this.GetUrlRelativePath(imgUrl)) {
-                    return true;
-                } else {
-                    return false;
-                }
-            }
-        } else {// url是绝对地址
-            if(this.url == imgUrl) {
-                return true;
+            if (reg.test(this.url)) {
+                return this.url == imgUrl;
             } else {
-                return false;
+                return this.url == this.GetUrlRelativePath(imgUrl);
             }
+        } else {
+            return this.url == imgUrl;
         }
-
     } // Function isUrlIdentical()
 
     /**
@@ -217,9 +206,9 @@ export class SImageItem extends SObjectItem {
      *
      */
     private GetUrlRelativePath(url: string): string {
-        var arrUrl = url.split("//");
-        var start = arrUrl[1].indexOf("/");
-      var relUrl = arrUrl[1].substring(start);
+        const arrUrl = url.split("//");
+        const start = arrUrl[1].indexOf("/");
+        const relUrl = arrUrl[1].substring(start);
         return relUrl;
     } // Function GetUrlRelativePath()
 
@@ -229,7 +218,12 @@ export class SImageItem extends SObjectItem {
      * @return	SRect
      */
     boundingRect(): SRect {
-        return new SRect(-this.origin.x, -this.origin.y, this.width, this.height);
+        return new SRect(
+            -this.origin.x,
+            -this.origin.y,
+            this.width,
+            this.height
+        );
     } // Function boundingRect()
 
     /**

+ 47 - 0
persagy-web-graph/src/types/SGraphSvg.ts

@@ -0,0 +1,47 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .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-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { Style } from "./Style";
+
+/**
+ * 矩形(包含圆角矩形)数据类型
+ *
+ * @author 郝建龙
+ * */
+export interface SGraphSvg {
+    /** item风格 */
+    Style?: Style;
+    /** 矩形左上角X坐标 */
+    X: number;
+    /** 矩形左上角Y坐标 */
+    Y: number;
+    /** 矩形宽 */
+    Width: number;
+    /** 矩形左上角X坐标 */
+    Height: number;
+    /** 当为圆角时的圆角半径 */
+    Url: string;
+} // Interface SGraphSvg