소스 검색

'修改图标锚点移动'

zhangyu 5 년 전
부모
커밋
e6e00fb39a
3개의 변경된 파일43개의 추가작업 그리고 4개의 파일을 삭제
  1. 1 1
      saga-web-big/package.json
  2. 41 2
      saga-web-big/src/items/SIconTextItem.ts
  3. 1 1
      saga-web-big/src/items/SPolylineItem.ts

+ 1 - 1
saga-web-big/package.json

@@ -42,6 +42,6 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@saga-web/graph": "2.1.92"
+        "@saga-web/graph": "2.1.94"
     }
 }

+ 41 - 2
saga-web-big/src/items/SIconTextItem.ts

@@ -80,6 +80,7 @@ export class SIconTextItem extends SObjectItem {
     }
     set sWidth(v: number) {
       this.img.width = v;
+      this.changeAhchorPoint();
       this.update();
     }
 
@@ -89,6 +90,7 @@ export class SIconTextItem extends SObjectItem {
     }
     set sHeight(v: number) {
       this.img.height = v;
+      this.changeAhchorPoint();
       this.update();
     }
 
@@ -140,7 +142,13 @@ export class SIconTextItem extends SObjectItem {
       this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
       this.img.width = 24;
       this.img.height = 24;
-      let anchorPoint = [{ x: 0, y: this.img.height / 2 }, { x: 0, y: -this.img.height / 2 }, { x: -this.img.width / 2, y: 0 }, { x: this.img.width / 2, y: 0 }];
+      this.img.connect("onMove", this, this.moveAhchorPoint.bind(this));
+      let anchorPoint = [
+        { x: this.img.x, y: this.img.height / 2 }, 
+        { x: this.img.x, y: -this.img.height / 2 }, 
+        { x: -this.img.width / 2, y: this.img.y }, 
+        { x: this.img.width / 2, y: this.img.y }
+      ];
       this.anchorList = anchorPoint.map(t => {
         let item = new SAnchorItem(this);
         item.moveTo(t.x, t.y);
@@ -158,11 +166,42 @@ export class SIconTextItem extends SObjectItem {
     }
 
     /**
+     * 图片移动计算并移动锚点的位置
+     *
+     * */
+    private moveAhchorPoint(): void {
+      // 判断是否有锚点
+      if (this.anchorList.length) {
+        this.anchorList.forEach(item => {
+          item.moveTo(item.x + this.img.x, item.y + this.img.y);
+        })
+      }
+    } // Function moveAhchorPoint()
+
+    /**
+     * 图片大小改变计算并移动锚点的位置
+     *
+     * */
+    private changeAhchorPoint(): void {
+      // 判断是否有锚点
+      if (this.anchorList.length) {
+        let anchorPoint = [
+          { x: this.img.x, y: this.img.height / 2 }, 
+          { x: this.img.x, y: -this.img.height / 2 }, 
+          { x: -this.img.width / 2, y: this.img.y }, 
+          { x: this.img.width / 2, y: this.img.y }
+        ]; 
+        this.anchorList.forEach((item, index) => {
+          item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
+        })
+      }
+    } // Function changeAhchorPoint()
+
+    /**
      * 鼠标按下事件
      *
      * */
     onMouseDown(event: SMouseEvent): boolean {
-      console.log(this)
       if (this.status == SItemStatus.Normal) {
         return super.onMouseDown(event);
       } else if (this.status == SItemStatus.Edit) {

+ 1 - 1
saga-web-big/src/items/SPolylineItem.ts

@@ -247,7 +247,7 @@ export class SPolylineItem extends SGraphItem {
             return super.onMouseUp(event);
         }
         return true;
-    } // Function onMouseMove()
+    } // Function onMouseUp()
 
     /**
      * 鼠标双击事件