Bladeren bron

SGraphItem支持isTransform点取操作。

sybotan 5 jaren geleden
bovenliggende
commit
988cb11860
2 gewijzigde bestanden met toevoegingen van 50 en 52 verwijderingen
  1. 50 20
      saga-web-graph/src/SGraphItem.ts
  2. 0 32
      saga-web-graph/src/SGraphView.ts

+ 50 - 20
saga-web-graph/src/SGraphItem.ts

@@ -94,10 +94,13 @@ export class SGraphItem extends SObject {
 
     /** 缩放比例 */
     scale: number = 1;
+    /**  */
+    private _inverseScale: number = 1;
+    /** 旋转角度 */
     rolate: number = 0;
 
     /** 是否可见 */
-    _visible: boolean = true;
+    private _visible: boolean = true;
     get visible(): boolean {
         return this._visible;
     } // Get visible
@@ -178,10 +181,12 @@ export class SGraphItem extends SObject {
             // 如果不进行变形处理,则取消painter的变型操作
             if (!item.isTransform) {
                 let matrix = painter.worldTransform;
-                let x0 = matrix.e;
-                let y0 = matrix.f;
-                painter.resetTransform();
-                painter.translate(x0, y0);
+                // let x0 = matrix.e;
+                // let y0 = matrix.f;
+                // painter.resetTransform();
+                // painter.translate(x0, y0);
+                item._inverseScale = 1 / matrix.a;
+                painter.scale(item._inverseScale, item._inverseScale);
             }
             // 设置绘制区域
             // canvas.clip(item.boundingRect())
@@ -283,13 +288,7 @@ export class SGraphItem extends SObject {
      * @return  在item中的坐标
      */
     mapFromScene(x: number, y: number): SPoint {
-        const m = new DOMMatrix();
-        let list = this.itemPath();
-        for (let item of list) {
-            m.translateSelf(item.x, item.y);
-            m.scaleSelf(item.scale, item.scale);
-            m.rotateSelf(item.rolate);
-        }
+        const m = this.scene2itemMattrix();
 
         const mp = new DOMPoint(x, y).matrixTransform(m.inverse());
         return new SPoint(mp.x, mp.y);
@@ -308,17 +307,44 @@ export class SGraphItem extends SObject {
             return new SPoint(x, y);
         }
 
-        const m = new DOMMatrix();
+        const m = this.scene2itemMattrix();
+
+        const mp = new DOMPoint(x, y).matrixTransform(m);
+        return new SPoint(mp.x, mp.y);
+    } // Function mapToScene()
+
+    /**
+     * 场景对象到item对象的转换矩阵
+     *
+     * @return  转换矩阵
+     */
+    scene2itemMattrix(): DOMMatrix {
+        let m = new DOMMatrix();
         let list = this.itemPath();
         for (let item of list) {
             m.translateSelf(item.x, item.y);
             m.scaleSelf(item.scale, item.scale);
             m.rotateSelf(item.rolate);
+
+            // 如果不进行变形处理,则取消painter的变型操作
+            if (!item.isTransform) {
+                // const vm = new DOMMatrix();
+                // // vm.translateSelf(
+                // //     this.scene?.view?.origin.x,
+                // //     this.scene?.view?.origin.x
+                // // );
+                // vm.scaleSelf(this.scene?.view?.scale, this.scene?.view?.scale);
+                // vm.multiplySelf(m);
+                // let x0 = vm.e;
+                // let y0 = vm.f;
+                // m = new DOMMatrix();
+                // m.translate(x0, y0);
+                m.scaleSelf(item._inverseScale, item._inverseScale);
+            }
         }
 
-        const mp = new DOMPoint(x, y).matrixTransform(m);
-        return new SPoint(mp.x, mp.y);
-    } // Function mapToScene()
+        return m;
+    }
 
     // =================================================================================================================
     // 事件
@@ -590,10 +616,11 @@ export class SGraphItem extends SObject {
         ce.matrix.rotateSelf(0, 0, child.rolate);
 
         if (!child.isTransform) {
-            let x0 = ce.matrix.e;
-            let y0 = ce.matrix.f;
-            ce.matrix = new DOMMatrix();
-            ce.matrix.translateSelf(x0, y0);
+            // let x0 = ce.matrix.e;
+            // let y0 = ce.matrix.f;
+            // ce.matrix = new DOMMatrix();
+            // ce.matrix.translateSelf(x0, y0);
+            ce.matrix.scaleSelf(child._inverseScale, child._inverseScale);
         }
 
         const mp = new DOMPoint(event.offsetX, event.offsetY).matrixTransform(
@@ -637,6 +664,9 @@ export class SGraphItem extends SObject {
         const m = new DOMMatrix();
         m.scaleSelf(this.scale, this.scale);
         m.rotateSelf(this.rolate);
+        if (!this.isTransform) {
+            m.rotateSelf(this._inverseScale, this._inverseScale);
+        }
 
         const mp = new DOMPoint(x, y).matrixTransform(m);
         return new SPoint(mp.x, mp.y);

+ 0 - 32
saga-web-graph/src/SGraphView.ts

@@ -266,18 +266,6 @@ export class SGraphView extends SCanvasView {
         // DO NOTHING
     } // Function drawForeground()
 
-    // /**
-    //  * 鼠标单击事件
-    //  *
-    //  * @param   event       事件参数
-    //  */
-    // protected onClick(event: MouseEvent): void {
-    //     if (this.scene != null) {
-    //         let ce = this.toSceneMotionEvent(event);
-    //         this.scene.onClick(ce);
-    //     }
-    // } // Function onClick()
-
     /**
      * 鼠标双击事件
      *
@@ -352,17 +340,6 @@ export class SGraphView extends SCanvasView {
         }
     } // Function onKeyDown()
 
-    // /**
-    //  * 按键press事件
-    //  *
-    //  * @param   event       事件参数
-    //  */
-    // protected onKeyPress(event: KeyboardEvent): void {
-    //     if (this.scene != null) {
-    //         this.scene.onKeyPress(event);
-    //     }
-    // } // Function onKeyPress()
-
     /**
      * 按键松开事件
      *
@@ -415,15 +392,6 @@ export class SGraphView extends SCanvasView {
 
         se.x = mp.x;
         se.y = mp.y;
-
-        // se.x =
-        //     event.offsetX * se.matrix.a +
-        //     event.offsetY * se.matrix.c +
-        //     se.matrix.e;
-        // se.y =
-        //     event.offsetX * se.matrix.b +
-        //     event.offsetY * se.matrix.d +
-        //     se.matrix.f;
         return se;
     } // Function toSceneMotionEvent()
 } // Class SGraphyView