瀏覽代碼

选择器更新 绘制椭圆方法修改

haojianlong 4 年之前
父節點
當前提交
5a2c2bbd06

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

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

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

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

+ 30 - 6
persagy-web-draw/src/SPainter.ts

@@ -363,6 +363,15 @@ export class SPainter extends SObject {
     /**
      * 绘制带导角矩形
      *
+     * @param   p1        矩形
+     * @param   p2           导角半径
+     * @param r
+     */
+    drawRoundRect(p1: SPoint, p2: SPoint, r: number): void;
+
+    /**
+     * 绘制带导角矩形
+     *
      * @param   pos         左上角位置
      * @param   size        大小
      * @param   r           导角半径
@@ -391,7 +400,7 @@ export class SPainter extends SObject {
      */
     drawRoundRect(
         x: number | SPoint | SRect,
-        y: number | SSize,
+        y: number | SSize | SPoint,
         w?: number,
         h?: number,
         radius?: number
@@ -405,6 +414,9 @@ export class SPainter extends SObject {
         } else if (x instanceof SPoint && y instanceof SSize) {
             rect = new SRect(x, y);
             r = w as number;
+        } else if (x instanceof SPoint && y instanceof SPoint) {
+            rect = new SRect(x, y);
+            r = w as number;
         } else {
             rect = new SRect(
                 x as number,
@@ -686,7 +698,9 @@ export class SPainter extends SObject {
         // 箭头纵坐标
         const y1 = d * Math.sin(Math.PI / 4);
         // 线段与x轴夹角
-        const fo = Math.atan(line.dy / line.dx);
+        const tempFo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
         // 是否为终点画箭头
         if (isEnd) {
@@ -723,7 +737,9 @@ export class SPainter extends SObject {
         // 箭头纵坐标
         const y1 = d * Math.sin(Math.PI / 12);
         // 线段与x轴夹角
-        const fo = Math.atan(line.dy / line.dx);
+        const tempFo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
         // 是否为终点画箭头
         if (isEnd) {
@@ -760,7 +776,9 @@ export class SPainter extends SObject {
         // 箭头纵坐标
         const y1 = d * Math.sin(Math.PI / 4);
         // 线段与x轴夹角
-        const fo = Math.atan(line.dy / line.dx);
+        const tempFo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
         // 是否为终点画箭头
         if (isEnd) {
@@ -795,7 +813,10 @@ export class SPainter extends SObject {
         // 定义箭头长度
         const d = this.toPx(5);
         // 线段与x轴夹角
-        const fo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const tempFo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         this.save();
         // 是否为终点画箭头
         if (isEnd) {
@@ -830,7 +851,10 @@ export class SPainter extends SObject {
         // 定义箭头长度
         const d = this.toPx(5);
         // 线段与x轴夹角
-        const fo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const tempFo = Math.atan(line.dy / line.dx);
+        // 线段与x轴夹角
+        const fo = line.dx > 0 ? tempFo : tempFo + Math.PI;
         // 是否为终点画箭头
         this.save();
         if (isEnd) {

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

@@ -143,7 +143,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
     drawEllipse(cx: number, cy: number, rx: number, ry: number): void {
         this.init(() => {
             this._canvas.beginPath();
-            this._canvas.ellipse(cx, cy, rx, ry, 0.5, 0, 2 * Math.PI, true);
+            this._canvas.ellipse(cx, cy, rx, ry, 0, 0, 2 * Math.PI, true);
             this._canvas.fill();
             this._canvas.stroke();
         });

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

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

+ 104 - 24
persagy-web-graph/src/SGraphSelectContainer.ts

@@ -68,8 +68,18 @@ export class SGraphSelectContainer extends SGraphItem {
         this._height = v;
         this.update();
     } // Set height
+    /** 修改之前的宽 */
     private oldWidth: number = 0;
+    /** 修改之前的高 */
     private oldHeight: number = 0;
+    /** 最小宽 */
+    minWidth: number = 0;
+    /** 最大宽 */
+    maxWidth: number = Number.MAX_SAFE_INTEGER;
+    /** 最小高 */
+    minHeight: number = 0;
+    /** 最小高 */
+    maxHeight: number = Number.MAX_SAFE_INTEGER;
     /** 绘制矩形的圆角半径 */
     /** 统计选中item的数量 */
     get count(): number {
@@ -99,6 +109,19 @@ export class SGraphSelectContainer extends SGraphItem {
     } // set curIndex
     /** 当前点索引 */
     private curPoint: SPoint | undefined;
+    /** 鼠标样式 */
+    static cursorList: string[] = [
+        "nw-resize",
+        "n-resize",
+        "ne-resize",
+        "e-resize",
+        "se-resize",
+        "s-resize",
+        "sw-resize",
+        "w-resize",
+        "move",
+        "default"
+    ];
 
     /**
      * 构造体
@@ -123,7 +146,7 @@ export class SGraphSelectContainer extends SGraphItem {
         }
         item.selected = true;
         this.itemList.push(item);
-        this.throttle(this.selectChange, 200);
+        this.throttle(this.selectChange, 100);
     } // Function addItem()
 
     /**
@@ -754,12 +777,16 @@ export class SGraphSelectContainer extends SGraphItem {
      * @return  对象边界区域
      */
     boundingRect(): SRect {
-        return new SRect(
-            -this.sceneDis,
-            -this.sceneDis,
-            this.width + this.sceneDis + this.sceneDis,
-            this.height + this.sceneDis + this.sceneDis
-        );
+        if (this.visible) {
+            return new SRect(
+                -this.sceneDis,
+                -this.sceneDis,
+                this.width + this.sceneDis + this.sceneDis,
+                this.height + this.sceneDis + this.sceneDis
+            );
+        } else {
+            return new SRect();
+        }
     } // Function boundingRect()
 
     /**
@@ -810,46 +837,86 @@ export class SGraphSelectContainer extends SGraphItem {
      * @return  boolean
      */
     onMouseMove(event: SMouseEvent): boolean {
+        this.setCursor(9);
         if (this.curIndex > -1 && this.count == 1) {
+            this.setCursor(this.curIndex);
             // @ts-ignore
             const difX = event.x - this.curPoint.x;
             // @ts-ignore
             const difY = event.y - this.curPoint.y;
             const mp = this.toParentChange(difX, difY);
             const oldSize = new SSize(this.width, this.height);
+            let resultX, resultY;
             switch (this.curIndex) {
                 case 0:
-                    this.moveTo(this.pos.x + mp.x, this.pos.y + mp.y);
-                    this.width = this.width - difX;
-                    this.height = this.height - difY;
+                    resultX = this.width - difX;
+                    resultY = this.height - difY;
+                    if (resultX > this.minWidth && resultX < this.maxWidth) {
+                        this.width = resultX;
+                        this.x = this.x + mp.x;
+                    }
+                    if (resultY > this.minHeight && resultY < this.maxHeight) {
+                        this.height = resultY;
+                        this.y = this.y + mp.y;
+                    }
                     break;
                 case 1:
-                    this.height = this.height - difY;
-                    this.moveTo(this.pos.x, this.pos.y + mp.y);
+                    resultY = this.height - difY;
+                    if (resultY > this.minHeight && resultY < this.maxHeight) {
+                        this.height = resultY;
+                        this.y = this.y + mp.y;
+                    }
                     break;
                 case 2:
-                    this.moveTo(this.pos.x, this.pos.y + mp.y);
-                    this.width = this.oldWidth + difX;
-                    this.height = this.height - difY;
+                    resultX = this.oldWidth + difX;
+                    resultY = this.height - difY;
+                    if (resultX > this.minWidth && resultX < this.maxWidth) {
+                        this.width = resultX;
+                    }
+                    if (resultY > this.minHeight && resultY < this.maxHeight) {
+                        this.height = resultY;
+                        this.y = this.y + mp.y;
+                    }
                     break;
                 case 3:
-                    this.width = this.oldWidth + difX;
+                    resultX = this.oldWidth + difX;
+                    if (resultX > this.minWidth && resultX < this.maxWidth) {
+                        this.width = resultX;
+                    }
                     break;
                 case 4:
-                    this.width = this.oldWidth + difX;
-                    this.height = this.oldHeight + difY;
+                    resultX = this.oldWidth + difX;
+                    resultY = this.oldHeight + difY;
+                    if (resultX > this.minWidth && resultX < this.maxWidth) {
+                        this.width = resultX;
+                    }
+                    if (resultY > this.minHeight && resultY < this.maxHeight) {
+                        this.height = resultY;
+                    }
                     break;
                 case 5:
-                    this.height = this.oldHeight + difY;
+                    resultY = this.oldHeight + difY;
+                    if (resultY > this.minHeight && resultY < this.maxHeight) {
+                        this.height = resultY;
+                    }
                     break;
                 case 6:
-                    this.moveTo(this.pos.x + mp.x, this.pos.y);
-                    this.width = this.width - difX;
-                    this.height = this.oldHeight + difY;
+                    resultX = this.width - difX;
+                    resultY = this.oldHeight + difY;
+                    if (resultX > this.minWidth && resultX < this.maxWidth) {
+                        this.width = resultX;
+                        this.x = this.x + mp.x;
+                    }
+                    if (resultY > this.minHeight && resultY < this.maxHeight) {
+                        this.height = resultY;
+                    }
                     break;
                 case 7:
-                    this.moveTo(this.pos.x + mp.x, this.pos.y);
-                    this.width = this.width - difX;
+                    resultX = this.width - difX;
+                    if (resultX > this.minWidth && resultX < this.maxWidth) {
+                        this.width = resultX;
+                        this.x = this.x + mp.x;
+                    }
                     break;
                 default:
                     break;
@@ -866,6 +933,7 @@ export class SGraphSelectContainer extends SGraphItem {
             }
             if (flag) {
                 super.onMouseMove(event);
+                this.setCursor(8);
                 if (this._isMoving) {
                     const mp = this.toParentChange(
                         event.x - this._mouseDownPos.x,
@@ -881,6 +949,18 @@ export class SGraphSelectContainer extends SGraphItem {
     } // Function onMouseMove()
 
     /**
+     * 设置鼠标样式
+     *
+     * @param   n 样式的索引
+     * */
+    private setCursor(n: number): void {
+        this.cursor = SGraphSelectContainer.cursorList[n] || "default";
+        if (this.scene && this.scene.view) {
+            this.scene.view.cursor = this.cursor;
+        }
+    } // Function setCursor()
+
+    /**
      * 鼠标按下事件
      *
      * @param   event   保存事件参数