Browse Source

增加带有末端样式的线段画法(完善)发布新包

haojianlong 5 years ago
parent
commit
e9b8ca58ed

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

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

+ 67 - 8
saga-web-draw/src/SPainter.ts

@@ -654,10 +654,69 @@ export class SPainter extends SObject {
     /**
      * 绘制带箭头的线段
      *
-     * @param   line        线段
-     * @param   style       线段两端样式
+     * @param   line    线段
+     * @param   style   末端样式
+     */
+    drawArrowLine(line: SLine, style?: SArrow): void;
+
+    /**
+     * 绘制带箭头的线段
+     *
+     * @param   p1      启点坐标
+     * @param   p2      终点坐标
+     * @param   style   末端样式
      */
-    drawArrowLine(line: SLine, style?: SArrow): void {
+    drawArrowLine(p1: SPoint, p2: SPoint, style?: SArrow): void;
+
+    /**
+     * 绘制带箭头的线段
+     *
+     * @param   x1      启点X坐标
+     * @param   y1      启点Y坐标
+     * @param   x2      终点X坐标
+     * @param   y2      终点Y坐标
+     * @param   style   末端样式
+     */
+    drawArrowLine(
+        x1: number,
+        y1: number,
+        x2: number,
+        y2: number,
+        style?: SArrow
+    ): void;
+
+    /**
+     * 绘制带箭头的线段
+     *
+     * @param   x1  启点X坐标
+     * @param   y1  启点Y坐标
+     * @param   x2  终点X坐标
+     * @param   y2  终点Y坐标
+     * @param   st  线段两端样式
+     */
+    drawArrowLine(
+        x1: number | SPoint | SLine,
+        y1?: number | SPoint | SArrow,
+        x2?: number | SArrow,
+        y2?: number,
+        st?: SArrow
+    ): void {
+        let line: SLine, style: SArrow;
+        if (x1 instanceof SLine) {
+            line = x1;
+            style = y1 as SArrow;
+        } else if (x1 instanceof SPoint && y1 instanceof SPoint) {
+            line = new SLine(x1, y1);
+            style = x2 as SArrow;
+        } else {
+            line = new SLine(
+                x1 as number,
+                y1 as number,
+                x2 as number,
+                y2 as number
+            );
+            style = st as SArrow;
+        }
         this.engine.drawLine(line);
         if (style) {
             if (style.begin) {
@@ -704,7 +763,7 @@ export class SPainter extends SObject {
         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;
+        const ang = line.dx >= 0 ? fo : fo + Math.PI;
         // 是否为终点画箭头
         if (isEnd) {
             this.save();
@@ -744,7 +803,7 @@ export class SPainter extends SObject {
         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;
+        const ang = line.dx >= 0 ? fo : fo + Math.PI;
         // 是否为终点画箭头
         if (isEnd) {
             this.save();
@@ -784,7 +843,7 @@ export class SPainter extends SObject {
         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;
+        const ang = line.dx >= 0 ? fo : fo + Math.PI;
         // 是否为终点画箭头
         if (isEnd) {
             this.save();
@@ -822,7 +881,7 @@ export class SPainter extends SObject {
         const d = 5;
         // 线段与x轴夹角
         const fo = Math.atan(line.dy / line.dx);
-        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        const ang = line.dx >= 0 ? fo : fo + Math.PI;
         // 是否为终点画箭头
         if (isEnd) {
             this.save();
@@ -860,7 +919,7 @@ export class SPainter extends SObject {
         const d = 5;
         // 线段与x轴夹角
         const fo = Math.atan(line.dy / line.dx);
-        const ang = line.dx > 0 ? fo : fo + Math.PI;
+        const ang = line.dx >= 0 ? fo : fo + Math.PI;
         // 是否为终点画箭头
         if (isEnd) {
             this.save();

+ 16 - 2
saga-web-draw/src/engines/SSvgPaintEngine.ts

@@ -1,6 +1,16 @@
 import { SStringBuilder } from "@saga-web/base/lib";
 import { SPath2D } from "../SPath2D";
-import { SLine, SPaintEngine, SPaintEngineType, SPoint, SRect } from "..";
+import {
+    SBrushType,
+    SGradientStop,
+    SLine,
+    SLinearGradient,
+    SPaintEngine,
+    SPaintEngineType,
+    SPoint,
+    SRadialGradient,
+    SRect
+} from "..";
 
 /**
  * Canvas绘制引擎基类
@@ -262,7 +272,11 @@ export class SSvgPaintEngine extends SPaintEngine {
      */
     drawPath(path: SPath2D): void {
         this._builder.append(
-            `<path d="${path.svgPath()}" ${this.getStyle(true, true, false)} ${this.getSvgMatrix()}/>`
+            `<path d="${path.svgPath()}" ${this.getStyle(
+                true,
+                true,
+                false
+            )} ${this.getSvgMatrix()}/>`
         );
     } // Function drawPath()
 

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

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