sv命令

saga-web-draw/package.json

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

saga-web-draw/src/SPath.ts

@@ -26,6 +26,7 @@
 
 import { SPathCommand } from "./SPathCommand";
 import { SPoint } from "./types/SPoint";
+import { SStringBuilder } from "@saga-web/base/lib";
 
 /**
  * Path 对象
@@ -36,6 +37,23 @@ export class SPath {
     /** 命令集合 */
     cmdList: SPathCommand[] = [];
 
+    /** 可以转成 svg 命令的命令名称 */
+    static svgCommandList = ["M", "L", "C", "Q", "Z"];
+
+    /*
+        SVG 命令解释：
+        M = moveto   参数:(x y) √
+        L = lineto  参数:(x y) √
+        H = horizontal lineto    参数:(x)
+        V = vertical lineto   参数:(y)
+        C = curveto   参数:(x1 y1 x2 y2 x y) √
+        S = smooth curveto   参数:(x2 y2 x y)
+        Q = quadratic Belzier curve   参数:(x1 y1 x y) √
+        T = smooth quadratic Belzier curveto   参数:(x y)
+        A = elliptical Arc    参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
+        Z = closepath   参数(none) √
+    */
+
     /**
      * 添加 path 命令
      *
@@ -127,7 +145,7 @@ export class SPath {
         y2: number,
         radius: number
     ): void {
-        this.addCommand("ArcTo", x1, y1, x2, y2, radius);
+        this.addCommand("A", x1, y1, x2, y2, radius);
     }
 
     /**
@@ -197,12 +215,37 @@ export class SPath {
      * @param pList   点集数组
      */
     polygon(pList: SPoint[]): void {
+        // 多边形校验，点需要在3个及其以上
         if (pList.length > 2) {
             this.addCommand("M", pList[0].x, pList[0].y);
+            // 遍历点列表,依次生成命令
             for (let i = 1; i < pList.length; i++) {
                 this.addCommand("L", pList[i].x, pList[i].y);
             }
             this.addCommand("Z");
         }
     }
+
+    /**
+     * canvas 命令列表转成 svg 命令
+     *
+     * @return 生成的 svg 命令
+     */
+    toSvgPath(): string {
+        let strBuilder = new SStringBuilder();
+
+        // 遍历当前路径的所有命令
+        this.cmdList.forEach((t: SPathCommand): void => {
+            // 当前支持转化的命令列表包含此命令
+            if (SPath.svgCommandList.includes(t.command)) {
+                strBuilder.append(t.command);
+                // 遍历该命令的参数 依次拼接
+                t.args.forEach((item): void => {
+                    strBuilder.append(item + " ");
+                });
+            }
+        });
+
+        return strBuilder.toString();
+    }
 }

saga-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -639,7 +639,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
                     cmd.args[4],
                     cmd.args[5] == 1
                 );
-            } else if (cmd.command == "ArcTo") {
+            } else if (cmd.command == "A") {
                 this._canvas.arcTo(
                     cmd.args[0],
                     cmd.args[1],

saga-web-draw/src/engines/SSvgPaintEngine.ts

@@ -200,12 +200,13 @@ export class SSvgPaintEngine extends SPaintEngine {
      * @param path  路径
      */
     drawPath(path: SPath): void {
-        //     `<path d="${path.svgPath()}" ${this.getStyle(
-        //         true,
-        //         true,
-        //         false
-        //     )} ${this.getSvgMatrix()}/>`
-        // );
+        this._builder.append(
+            `<path d="${path.toSvgPath()}" ${this.getStyle(
+                true,
+                true,
+                false
+            )} ${this.getSvgMatrix()}/>`
+        );
     }
 
     /**
@@ -346,5 +347,15 @@ export class SSvgPaintEngine extends SPaintEngine {
     /**
      * 绘制圆角矩形
      */
-    drawRoundRect(): void {}
+    drawRoundRect(rect: SRect, r: number): void {
+        this._builder.append(
+            `<rect x="${rect.x}" y="${rect.y}" rx="${r}" ry="${r}" width="${
+                rect.width
+            }" height="${rect.height}" ${this.getStyle(
+                true,
+                true,
+                false
+            )} ${this.getSvgMatrix()}/>`
+        );
+    }
 }

saga-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/graph",
-    "version": "2.1.137",
+    "version": "2.1.138",
     "description": "上格云二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.9.7"
     },
     "dependencies": {
-        "@saga-web/draw": "2.1.112",
+        "@saga-web/draw": "2.1.113",
         "@types/uuid": "^8.0.0"
     }
 }