Browse Source

增加带有末端样式的线段画法

haojianlong 5 years ago
parent
commit
f8e5b0081f

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

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/draw",
-    "version": "2.1.76",
+    "version": "2.1.77",
     "description": "上格云绘制引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 228 - 0
saga-web-draw/src/SPainter.ts

@@ -13,6 +13,8 @@ import {
     SSize
 } from "./";
 import { SCompositeType } from "./enums/SCompositeType";
+import { SArrow } from "./types/SArrow";
+import { SArrowStyleType } from "./enums/SArrowStyleType";
 
 /**
  * Painter
@@ -648,4 +650,230 @@ export class SPainter extends SObject {
     toPx(p: number): number {
         return p / this.engine.state.matrix.a;
     } // Function painterToView()
+
+    /**
+     * 绘制带箭头的线段
+     *
+     * @param   line        线段
+     * @param   style       线段两端样式
+     */
+    drawArrowLine(line: SLine, style?: SArrow): void {
+        this.engine.drawLine(line);
+        if (style) {
+            if (style.begin) {
+                if (style.begin == SArrowStyleType.Basic) {
+                    this.drawBasicArrow(line, false);
+                } else if (style.begin == SArrowStyleType.Triangle) {
+                    this.drawTriangleArrow(line, false);
+                } else if (style.begin == SArrowStyleType.Diamond) {
+                    this.drawDiamondArrow(line, false);
+                } else if (style.begin == SArrowStyleType.Square) {
+                    this.drawSquareArrow(line, false);
+                } else if (style.begin == SArrowStyleType.Circle) {
+                    this.drawCircleArrow(line, false);
+                }
+            }
+            if (style.end) {
+                if (style.end == SArrowStyleType.Basic) {
+                    this.drawBasicArrow(line, true);
+                } else if (style.end == SArrowStyleType.Triangle) {
+                    this.drawTriangleArrow(line, true);
+                } else if (style.end == SArrowStyleType.Diamond) {
+                    this.drawDiamondArrow(line, true);
+                } else if (style.end == SArrowStyleType.Square) {
+                    this.drawSquareArrow(line, true);
+                } else if (style.end == SArrowStyleType.Circle) {
+                    this.drawCircleArrow(line, true);
+                }
+            }
+        }
+    } // Function drawArrowLine()
+
+    /**
+     * 私有计算方法-绘制线段末端标准箭头
+     *
+     * @param   line    要加末端样式的线段
+     * @param   isEnd   是否为结束位置
+     * */
+    private drawBasicArrow(line: SLine, isEnd: boolean = true): void {
+        // 定义箭头长度
+        const d = 5;
+        // 箭头横坐标
+        const x1 = d * Math.cos(Math.PI / 4);
+        // 箭头纵坐标
+        const y1 = d * Math.sin(Math.PI / 4);
+        // 线段与x轴夹角
+        const fo = Math.atan(line.dy / line.dx);
+        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        // 是否为终点画箭头
+        if (isEnd) {
+            this.save();
+            this.translate(line.x2, line.y2);
+            this.rotate(ang);
+            this.engine.drawPolyline([
+                new SPoint(-x1, y1),
+                new SPoint(0, 0),
+                new SPoint(-x1, -y1)
+            ]);
+            this.restore();
+        } else {
+            this.save();
+            this.translate(line.x1, line.y1);
+            this.rotate(ang);
+            this.engine.drawPolyline([
+                new SPoint(x1, y1),
+                new SPoint(0, 0),
+                new SPoint(x1, -y1)
+            ]);
+            this.restore();
+        }
+    } // Function drawArrow()
+
+    /**
+     * 私有计算方法-绘制线段末端三角形箭头
+     *
+     * @param   line    要加末端样式的线段
+     * @param   isEnd   是否为结束位置
+     * */
+    private drawTriangleArrow(line: SLine, isEnd: boolean = true): void {
+        // 定义箭头长度
+        const d = 5;
+        // 箭头横坐标
+        const x1 = d * Math.cos(Math.PI / 12);
+        // 箭头纵坐标
+        const y1 = d * Math.sin(Math.PI / 12);
+        // 线段与x轴夹角
+        const fo = Math.atan(line.dy / line.dx);
+        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        // 是否为终点画箭头
+        if (isEnd) {
+            this.save();
+            this.translate(line.x2, line.y2);
+            this.rotate(ang);
+            this.engine.drawPolygon([
+                new SPoint(-x1, y1),
+                new SPoint(0, 0),
+                new SPoint(-x1, -y1)
+            ]);
+            this.restore();
+        } else {
+            this.save();
+            this.translate(line.x1, line.y1);
+            this.rotate(ang);
+            this.engine.drawPolygon([
+                new SPoint(x1, y1),
+                new SPoint(0, 0),
+                new SPoint(x1, -y1)
+            ]);
+            this.restore();
+        }
+    } // Function drawTriangleArrow()
+
+    /**
+     * 私有计算方法-绘制线段末端菱形箭头
+     *
+     * @param   line    要加末端样式的线段
+     * @param   isEnd   是否为结束位置
+     * */
+    private drawDiamondArrow(line: SLine, isEnd: boolean = true): void {
+        // 定义箭头长度
+        const d = 5;
+        // 箭头横坐标
+        const x1 = d * Math.cos(Math.PI / 4);
+        // 箭头纵坐标
+        const y1 = d * Math.sin(Math.PI / 4);
+        // 线段与x轴夹角
+        const fo = Math.atan(line.dy / line.dx);
+        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        // 是否为终点画箭头
+        if (isEnd) {
+            this.save();
+            this.translate(line.x2, line.y2);
+            this.rotate(ang);
+            this.engine.drawPolygon([
+                new SPoint(-x1, y1),
+                new SPoint(0, 0),
+                new SPoint(-x1, -y1),
+                new SPoint(-Math.sqrt(2) * d, 0)
+            ]);
+            this.restore();
+        } else {
+            this.save();
+            this.translate(line.x1, line.y1);
+            this.rotate(ang);
+            this.engine.drawPolygon([
+                new SPoint(x1, y1),
+                new SPoint(0, 0),
+                new SPoint(x1, -y1),
+                new SPoint(Math.sqrt(2) * d, 0)
+            ]);
+            this.restore();
+        }
+    } // Function drawDiamondArrow()
+
+    /**
+     * 私有计算方法-绘制线段末端方形箭头
+     *
+     * @param   line    要加末端样式的线段
+     * @param   isEnd   是否为结束位置
+     * */
+    private drawSquareArrow(line: SLine, isEnd: boolean = true): void {
+        // 定义箭头长度
+        const d = 5;
+        // 线段与x轴夹角
+        const fo = Math.atan(line.dy / line.dx);
+        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        // 是否为终点画箭头
+        if (isEnd) {
+            this.save();
+            this.translate(line.x2, line.y2);
+            this.rotate(ang);
+            this.engine.drawPolygon([
+                new SPoint(-d, d / 2),
+                new SPoint(0, d / 2),
+                new SPoint(0, -d / 2),
+                new SPoint(-d, -d / 2)
+            ]);
+            this.restore();
+        } else {
+            this.save();
+            this.translate(line.x1, line.y1);
+            this.rotate(ang);
+            this.engine.drawPolygon([
+                new SPoint(0, d / 2),
+                new SPoint(d, d / 2),
+                new SPoint(d, -d / 2),
+                new SPoint(0, -d / 2)
+            ]);
+            this.restore();
+        }
+    } // Function drawSquareArrow()
+
+    /**
+     * 私有计算方法-绘制线段末端圆形箭头
+     *
+     * @param   line    要加末端样式的线段
+     * @param   isEnd   是否为结束位置
+     * */
+    private drawCircleArrow(line: SLine, isEnd: boolean = true): void {
+        // 定义箭头长度
+        const d = 5;
+        // 线段与x轴夹角
+        const fo = Math.atan(line.dy / line.dx);
+        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        // 是否为终点画箭头
+        if (isEnd) {
+            this.save();
+            this.translate(line.x2, line.y2);
+            this.rotate(ang);
+            this.engine.drawCircle(-d / 2, 0, d / 2);
+            this.restore();
+        } else {
+            this.save();
+            this.translate(line.x1, line.y1);
+            this.rotate(ang);
+            this.engine.drawCircle(d / 2, 0, d / 2);
+            this.restore();
+        }
+    } // Function drawCircleArrow()
 } // Class SPainter

+ 0 - 1
saga-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -14,7 +14,6 @@ import {
     STextDirection
 } from "..";
 import { SPath2D } from "../SPath2D";
-import { SCompositeType } from "../enums/SCompositeType";
 
 /**
  * Canvas绘制引擎基类

+ 13 - 0
saga-web-draw/src/enums/SArrowStyleType.ts

@@ -0,0 +1,13 @@
+/**
+ * 线端端点箭头样式
+ *
+ * @author  郝建龙
+ */
+export enum SArrowStyleType {
+    None,
+    Basic,
+    Triangle,
+    Diamond,
+    Square,
+    Circle
+} // Enum SArrowStyleType

+ 13 - 0
saga-web-draw/src/types/SArrow.ts

@@ -0,0 +1,13 @@
+/**
+ * 箭头数据类型定义
+ *
+ * @author 郝建龙
+ */
+import { SArrowStyleType } from "../enums/SArrowStyleType";
+
+export interface SArrow {
+    /** 箭头起点样式  */
+    begin: SArrowStyleType;
+    /** 箭头终点样式  */
+    end: SArrowStyleType;
+} // Class SArrow

+ 2 - 2
saga-web-graphy/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/graphy",
-    "version": "2.1.47",
+    "version": "2.1.49",
     "description": "上格云二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -31,6 +31,6 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@saga-web/draw": "^2.1.75"
+        "@saga-web/draw": "^2.1.77"
     }
 }

+ 10 - 10
saga-web-graphy/src/SGraphyView.ts

@@ -351,16 +351,16 @@ export class SGraphyView extends SCanvasView {
         }
     } // Function onKeyDown()
 
-    /**
-     * 按键press事件
-     *
-     * @param   event       事件参数
-     */
-    protected onKeyPress(event: KeyboardEvent): void {
-        if (this.scene != null) {
-            this.scene.onKeyPress(event);
-        }
-    } // Function onKeyPress()
+    // /**
+    //  * 按键press事件
+    //  *
+    //  * @param   event       事件参数
+    //  */
+    // protected onKeyPress(event: KeyboardEvent): void {
+    //     if (this.scene != null) {
+    //         this.scene.onKeyPress(event);
+    //     }
+    // } // Function onKeyPress()
 
     /**
      * 按键松开事件