圆角矩形绘制命令添加;spath替换

persagy-web-big/package.json

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

persagy-web-big/src/items/SIconTextItem.ts

@@ -33,7 +33,14 @@ import {
 } from "@persagy-web/graph";
 import { SItemStatus, ItemOrder } from "..";
 import { SMouseEvent } from "@persagy-web/base";
-import { SSize, SRect, SPainter, SColor, SFont, SPoint } from "@persagy-web/draw";
+import {
+    SSize,
+    SRect,
+    SPainter,
+    SColor,
+    SFont,
+    SPoint
+} from "@persagy-web/draw";
 import { Anchor } from "../types/topology/Anchor";
 
 /**
@@ -155,7 +162,10 @@ export class SIconTextItem extends SObjectItem {
     }
     set sWidth(v: number) {
         this.img.width = v;
-        this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5);
+        this.img.origin = new SPoint(
+            this.img.width * 0.5,
+            this.img.height * 0.5
+        );
         this.changeAnchorPoint();
         this.update();
     }
@@ -166,7 +176,10 @@ export class SIconTextItem extends SObjectItem {
     }
     set sHeight(v: number) {
         this.img.height = v;
-        this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5);
+        this.img.origin = new SPoint(
+            this.img.width * 0.5,
+            this.img.height * 0.5
+        );
         this.changeAnchorPoint();
         this.update();
     }
@@ -222,7 +235,10 @@ export class SIconTextItem extends SObjectItem {
         super(parent);
         this.img.width = 32;
         this.img.height = 32;
-        this.img.origin = new SPoint(this.img.width * 0.5, this.img.height * 0.5);
+        this.img.origin = new SPoint(
+            this.img.width * 0.5,
+            this.img.height * 0.5
+        );
         this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
         let anchorPoint;
         if (data && data.length) {
@@ -372,9 +388,17 @@ export class SIconTextItem extends SObjectItem {
                 painter.shadow.shadowColor = this.activeColor;
                 painter.shadow.shadowOffsetX = 5;
                 painter.shadow.shadowOffsetY = 5;
-                painter.drawCircle(this.img.x, this.img.y, (this.sWidth / 2.0 + 3) * 1.25);
+                painter.drawCircle(
+                    this.img.x,
+                    this.img.y,
+                    (this.sWidth / 2.0 + 3) * 1.25
+                );
             } else {
-                painter.drawCircle(this.img.x, this.img.y, this.sWidth / 2.0 + 3);
+                painter.drawCircle(
+                    this.img.x,
+                    this.img.y,
+                    this.sWidth / 2.0 + 3
+                );
             }
         } else {
             if (this.selected) {

persagy-web-big/src/items/floor/SBoardItem.ts

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 
-import { SPainter, SPath2D, SPoint } from "@persagy-web/draw";
+import { SPainter, SPath, SPoint } from "@persagy-web/draw";
 import { Zone } from "../../types/floor/Zone";
 import { ItemColor } from "../..";
 import { SGraphItem } from "@persagy-web/graph";
@@ -40,7 +40,7 @@ export class SBoardItem extends SGraphItem {
     /** 空间轮廓线坐标list */
     readonly pointArr: SPoint[][][] = [];
     /** path数组 */
-    private pathList: SPath2D[] = [];
+    private pathList: SPath[] = [];
 
     /**
      * 构造函数
@@ -59,7 +59,7 @@ export class SBoardItem extends SGraphItem {
         ) {
             let tempArr = this.data.OutLine;
             this.pointArr = tempArr.map((t): SPoint[][] => {
-                let sPath = new SPath2D();
+                let sPath = new SPath();
                 let tempArr = t.map((it): SPoint[] => {
                     let array = it.map(
                         (item): SPoint => {

persagy-web-big/src/items/floor/SSpaceItemSS.ts

@@ -27,7 +27,7 @@
 import {
     SColor,
     SPainter,
-    SPath2D,
+    SPath,
     SPoint,
     SPolygonUtil,
     SRect,
@@ -56,7 +56,7 @@ export class SSpaceItem extends SGraphItem {
     /** Y坐标最大值 */
     maxY = Number.MIN_SAFE_INTEGER;
     /** path对象 */
-    private path = new SPath2D();
+    private path = new SPath();
     /** 高亮状态 */
     private _highLightFlag: boolean = false;
     get highLightFlag(): boolean {

persagy-web-big/src/items/floor/SWallItem.ts

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 
-import { SPainter, SPath2D, SPoint, SRect } from "@persagy-web/draw";
+import { SPainter, SPath, SPoint, SRect } from "@persagy-web/draw";
 import { Wall } from "../../types/floor/Wall";
 import { ItemOrder, ItemColor } from "../..";
 import { SGraphItem } from "@persagy-web/graph";
@@ -50,7 +50,7 @@ export class SWallItem extends SGraphItem {
     /** 墙内轮廓线坐标list */
     private readonly holesArr: SPoint[][] = [];
     /** path对象 */
-    private path = new SPath2D();
+    private path = new SPath();
 
     /**
      * 构造函数

persagy-web-big/src/items/floor/SWallItemSS.ts

@@ -24,7 +24,7 @@
  * *********************************************************************************************************************
  */
 
-import { SPainter, SPoint, SRect, SPath2D } from "@persagy-web/draw";
+import { SPainter, SPoint, SRect, SPath } from "@persagy-web/draw";
 import { Wall } from "../../types/floor/Wall";
 import { ItemOrder, ItemColor } from "../..";
 import { SGraphItem } from "@persagy-web/graph";
@@ -48,7 +48,7 @@ export class SWallItem extends SGraphItem {
     /** 墙轮廓线坐标list */
     private readonly pointArr: SPoint[][] = [];
     /** path对象 */
-    private path = new SPath2D();
+    private path = new SPath();
 
     /**
      * 构造函数

persagy-web-big/src/items/floor/ZoneItem.ts

@@ -27,7 +27,7 @@
 import {
     SColor,
     SPainter,
-    SPath2D,
+    SPath,
     SPoint,
     SPolygonUtil,
     SRect
@@ -56,7 +56,7 @@ export class SZoneItem extends SGraphItem {
     /** Y坐标最大值 */
     private maxY = Number.MIN_SAFE_INTEGER;
     /** path */
-    private pathList: SPath2D[] = [];
+    private pathList: SPath[] = [];
     /** 点击位置坐标 */
     private clickPoint: SPoint | undefined;
     /** 选中时的颜色 */
@@ -120,7 +120,7 @@ export class SZoneItem extends SGraphItem {
             this.maxY = this.minY;
             // 处理轮廓点数组,同时计算最大最小值
             this.pointArr = tempArr.map((t): SPoint[][] => {
-                let sPath = new SPath2D();
+                let sPath = new SPath();
                 let tempArr = t.map((it): SPoint[] => {
                     let array = it.map(
                         (item): SPoint => {

persagy-web-draw/package.json

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

persagy-web-draw/src/SPainter.ts

@@ -346,22 +346,73 @@ export class SPainter extends SObject {
         }
     } // Function drawRect()
 
-    // /**
-    //  * 绘制带导角空心矩形
-    //  *
-    //  * @param   x           X坐标
-    //  * @param   y           Y坐标
-    //  * @param   w           宽度
-    //  * @param   h           高度
-    //  * @param   r           导角半径
-    //  */
-    // drawRoundedRect(
-    //     x: number,
-    //     y: number,
-    //     w: number,
-    //     h: number,
-    //     r: number
-    // ): void {} // Function drawRoundedRect()
+    /**
+     * 绘制带导角矩形
+     *
+     * @param   rect        矩形
+     * @param   r           导角半径
+     */
+    drawRoundRect(rect: SRect, r: number): void;
+
+    /**
+     * 绘制带导角矩形
+     *
+     * @param   pos         左上角位置
+     * @param   size        大小
+     * @param   r           导角半径
+     */
+    drawRoundRect(pos: SPoint, size: SSize, r: number): void;
+
+    /**
+     * 绘制带导角矩形
+     *
+     * @param   x           X坐标
+     * @param   y           Y坐标
+     * @param   w           宽度
+     * @param   h           高度
+     * @param   r           导角半径
+     */
+    drawRoundRect(x: number, y: number, w: number, h: number, r: number): void;
+
+    /**
+     * 绘制带导角矩形
+     *
+     * @param   x           X坐标
+     * @param   y           Y坐标
+     * @param   w           宽度
+     * @param   h           高度
+     * @param   radius      导角半径
+     */
+    drawRoundRect(
+        x: number | SPoint | SRect,
+        y: number | SSize,
+        w?: number,
+        h?: number,
+        radius?: number
+    ): void {
+        let rect: SRect | null;
+        let r: number | null;
+
+        if (x instanceof SRect) {
+            rect = x;
+            r = y as number;
+        } else if (x instanceof SPoint && y instanceof SSize) {
+            rect = new SRect(x, y);
+            r = w as number;
+        } else {
+            rect = new SRect(
+                x as number,
+                y as number,
+                w as number,
+                h as number
+            );
+            r = radius as number;
+        }
+
+        if (rect != null && r != null) {
+            this.engine.drawRoundRect(rect, r);
+        }
+    } // Function drawRoundRect()
 
     /**
      * 绘制圆形

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

@@ -360,29 +360,79 @@ export class SCanvasPaintEngine extends SPaintEngine {
         return this._canvas.measureText(text).width;
     } // Function textWidth()
 
-    // /**
-    //  * 绘制带导角空心矩形
-    //  *
-    //  * @param   x           X坐标
-    //  * @param   y           Y坐标
-    //  * @param   w           宽度
-    //  * @param   h           高度
-    //  * @param   r           导角半径
-    //  */
-    // drawRoundedRect(x: number, y: number, w: number, h: number, r: number): void {
-    //     this.canvas.beginPath();
-    //     this.canvas.moveTo(x, y + r);
-    //     this.canvas.lineTo(x, y + h - r);
-    //     this.canvas.quadraticCurveTo(x, y + h, x + r, y + h);
-    //     this.canvas.lineTo(x + w - r,y + h);
-    //     this.canvas.quadraticCurveTo(x + w, y + h, x + w, y + h - r);
-    //     this.canvas.lineTo(x + w, y + r);
-    //     this.canvas.quadraticCurveTo(x + w, y, x + w - r, y);
-    //     this.canvas.lineTo(x + r, y);
-    //     this.canvas.quadraticCurveTo(x, y, x,y + r);
-    //     this.canvas.fill();
-    //     this.canvas.stroke();
-    // } // Function drawRoundedRect()
+    /**
+     * 绘制二次贝塞尔曲线
+     *
+     * @param   cp1x    控制点X坐标
+     * @param   cp1y    控制点Y坐标
+     * @param   x       结束点X坐标
+     * @param   y       结束点Y坐标
+     */
+    quadraticCurveTo(cp1x: number, cp1y: number, x: number, y: number): void {
+        this._canvas.quadraticCurveTo(cp1x, cp1y, x, y);
+    } // Function quadraticCurveTo()
+
+    /**
+     * 绘制三次贝塞尔曲线
+     *
+     * @param   cp1x    起始点控制点X坐标
+     * @param   cp1y    起始点控制点Y坐标
+     * @param   cp2x    结束点控制点X坐标
+     * @param   cp2y    结束点控制点Y坐标
+     * @param   x       结束点X坐标
+     * @param   y       结束点Y坐标
+     */
+    bezierCurveTo(
+        cp1x: number,
+        cp1y: number,
+        cp2x: number,
+        cp2y: number,
+        x: number,
+        y: number
+    ): void {
+        this._canvas.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+    } // Function bezierCurveTo()
+
+    /**
+     * 绘制带导角空心矩形
+     *
+     * @param   rect    矩形
+     * @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();
+    } // Function drawRoundRect()
 
     /**
      * 设置字体

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

@@ -257,4 +257,12 @@ export abstract class SPaintEngine {
      * @param   font    字体
      * */
     abstract changeFont(font: SFont): void;
+
+    /**
+     * 绘制带导角空心矩形
+     *
+     * @param   rect    矩形
+     * @param   r       导角半径
+     */
+    abstract drawRoundRect(rect: SRect, r: number): void;
 } // class SPaintEngine

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

@@ -337,4 +337,9 @@ export class SSvgPaintEngine extends SPaintEngine {
         builder.append('"');
         return builder.toString("");
     } // Get penStyle
+
+    /**
+     * 绘制圆角矩形
+     * */
+    drawRoundRect(){} // Function drawRoundRect()
 } // Class SSvgPaintEngine

persagy-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/graph",
-    "version": "2.2.4",
+    "version": "2.2.5",
     "description": "博锐尚格二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/draw": "2.2.3",
+        "@persagy-web/draw": "2.2.4",
         "@types/uuid": "^8.0.0"
     }
 }