소스 검색

svg 绘制 path修改

haojianlong 4 년 전
부모
커밋
f27b8e422b

+ 2 - 2
persagy-web-big-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big-edit",
-    "version": "2.2.37",
+    "version": "2.2.38",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/edit": "2.2.30",
+        "@persagy-web/edit": "2.2.31",
         "@types/uuid": "^8.0.0",
         "crypto-js": "^4.0.0",
         "axios": "^0.20.0"

+ 2 - 2
persagy-web-big/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big",
-    "version": "2.2.57",
+    "version": "2.2.58",
     "description": "博锐尚格建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -41,7 +41,7 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@persagy-web/graph": "2.2.48",
+        "@persagy-web/graph": "2.2.49",
         "axios": "^0.18.0",
         "pako": "^1.0.10",
         "crypto-js": "^4.0.0",

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

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/draw",
-    "version": "2.2.14",
+    "version": "2.2.15",
     "description": "博锐尚格绘制引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 43 - 1
persagy-web-draw/src/SPath.ts

@@ -26,6 +26,7 @@
 
 import { SPathCommand } from "./types/SPathCommand";
 import { SPoint } from "./types/SPoint";
+import { SStringBuilder } from "@persagy-web/base";
 
 /**
  * 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);
     }
 
     /**
@@ -200,10 +218,34 @@ export class SPath {
         // 多边形校验,点需要在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();
+    }
 }

+ 10 - 6
persagy-web-draw/src/engines/SCanvasPaintEngine.ts

@@ -248,6 +248,10 @@ export class SCanvasPaintEngine extends SPaintEngine {
      * @param y         Y 坐标
      * @param width     宽度
      * @param height    高度
+     * @param sx        开始裁剪的 x 坐标
+     * @param sy        开始裁剪的 y 坐标
+     * @param sWidth    要使用的图像的宽度
+     * @param sHeight   要使用的图像的高度
      */
     drawImage(
         img: CanvasImageSource,
@@ -257,8 +261,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
         height?: number,
         sx?: number,
         sy?: number,
-        swidth?: number,
-        sheight?: number
+        sWidth?: number,
+        sHeight?: number
     ): void {
         this.init((): void => {
             try {
@@ -274,8 +278,8 @@ export class SCanvasPaintEngine extends SPaintEngine {
                         img,
                         sx as number,
                         sy as number,
-                        swidth as number,
-                        sheight as number,
+                        sWidth as number,
+                        sHeight as number,
                         x,
                         y,
                         width,
@@ -687,7 +691,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],
@@ -698,7 +702,7 @@ export class SCanvasPaintEngine extends SPaintEngine {
                 );
             }
         });
-        if (path.cmdList[path.cmdList.length - 1].command == 'Z') {
+        if (path.cmdList[path.cmdList.length - 1].command == "Z") {
             this._canvas.fill();
         }
         this._canvas.stroke();

+ 4 - 4
persagy-web-draw/src/engines/SPaintEngine.ts

@@ -232,8 +232,8 @@ export abstract class SPaintEngine {
      * @param height    高度
      * @param sx        开始剪切的 x 坐标位置
      * @param sy        开始剪切的 y 坐标位置
-     * @param swidth    被剪切图像的宽度
-     * @param sheight   被剪切图像的高度
+     * @param sWidth    被剪切图像的宽度
+     * @param sHeight   被剪切图像的高度
      */
     abstract drawImage(
         img: CanvasImageSource,
@@ -243,8 +243,8 @@ export abstract class SPaintEngine {
         height?: number,
         sx?: number,
         sy?: number,
-        swidth?: number,
-        sheight?: number
+        sWidth?: number,
+        sHeight?: number
     ): void;
 
     /**

+ 31 - 10
persagy-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()}/>`
+        );
     }
 
     /**
@@ -227,20 +228,28 @@ export class SSvgPaintEngine extends SPaintEngine {
     }
 
     /**
-     * 绘制图片
+     * 绘制图片 (图片本身无法裁剪)
      *
      * @param img       图片
      * @param x         X 坐标
      * @param y         Y 坐标
      * @param width     宽度
      * @param height    高度
+     * @param sx        开始剪切的 x 坐标位置
+     * @param sy        开始剪切的 y 坐标位置
+     * @param sWidth    被剪切图像的宽度
+     * @param sHeight   被剪切图像的高度
      */
     drawImage(
         img: CanvasImageSource,
         x: number,
         y: number,
         width?: number,
-        height?: number
+        height?: number,
+        sx?: number,
+        sy?: number,
+        sWidth?: number,
+        sHeight?: number
     ): void {
         // 图片路径存在
         // @ts-ignore
@@ -301,7 +310,9 @@ export class SSvgPaintEngine extends SPaintEngine {
         return strBuilder.toString(" ");
     }
 
-    /** 获得风格 */
+    /**
+     * 获得风格
+     */
     private getStyle(
         brush: boolean = false,
         pen: boolean = false,
@@ -348,5 +359,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()}/>`
+        );
+    }
 }

+ 2 - 2
persagy-web-edit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/edit",
-    "version": "2.2.30",
+    "version": "2.2.31",
     "description": "博锐尚格二维图形编辑器。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/big": "2.2.57",
+        "@persagy-web/big": "2.2.58",
         "@types/uuid": "^8.0.0"
     }
 }

+ 34 - 1
persagy-web-edit/src/items/SBaseTextEdit.ts

@@ -145,6 +145,26 @@ export class SBaseTextEdit extends SGraphEdit {
         this.update();
     }
 
+    /** 文本外圈颜色 */
+    private _fontStrokeColor: SColor = SColor.Transparent;
+    get fontStrokeColor(): SColor {
+        return this._fontStrokeColor;
+    }
+    set fontStrokeColor(v: SColor) {
+        this._fontStrokeColor = v;
+        this.update();
+    }
+
+    /** 文本外圈颜色 */
+    private _fontStrokeWidth: number = 1;
+    get fontStrokeWidth(): number {
+        return this._fontStrokeWidth;
+    }
+    set fontStrokeWidth(v: number) {
+        this._fontStrokeWidth = v;
+        this.update();
+    }
+
     /** 字体 */
     private _font: SFont = new SFont("sans-serif", 12);
     get font(): SFont {
@@ -254,6 +274,16 @@ export class SBaseTextEdit extends SGraphEdit {
             if (data.style.default.color) {
                 this.color = new SColor(data.style.default.color);
             }
+            // 设置文本外圈颜色
+            if (data.style.default.fontStrokeColor) {
+                this.fontStrokeColor = new SColor(
+                    data.style.default.fontStrokeColor
+                );
+            }
+            // 设置文本外圈宽度
+            if (data.style.default.fontStrokeWidth) {
+                this.fontStrokeWidth = data.style.default.fontStrokeWidth;
+            }
             // 设置字体大小
             if (data.style.default.font) {
                 this.font = new SFont("sans-serif", data.style.default.font);
@@ -350,7 +380,8 @@ export class SBaseTextEdit extends SGraphEdit {
 
         //绘制文本
         painter.brush.color = new SColor(this.color);
-        painter.pen.color = new SColor(this.color);
+        painter.pen.color = this.fontStrokeColor;
+        painter.pen.lineWidth = this.fontStrokeWidth;
         painter.shadow.shadowColor = SColor.Transparent;
         painter.font = this.font;
         this._textArr.forEach((text: string, index: number) => {
@@ -420,6 +451,8 @@ export class SBaseTextEdit extends SGraphEdit {
         this.data.style.default.zorder = this.zOrder;
         this.data.style.default.text = this.text;
         this.data.style.default.color = this.color.value;
+        this.data.style.default.fontStrokeColor = this.fontStrokeColor.value;
+        this.data.style.default.fontStrokeWidth = this.fontStrokeWidth;
         this.data.style.default.font = this.font.size;
         this.data.style.default.lineWidth = this.lineWidth;
         this.data.style.default.backgroundColor = this.backgroundColor.value;

+ 2 - 2
persagy-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/graph",
-    "version": "2.2.48",
+    "version": "2.2.49",
     "description": "博锐尚格二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -40,7 +40,7 @@
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@persagy-web/draw": "2.2.14",
+        "@persagy-web/draw": "2.2.15",
         "@types/uuid": "^8.0.0"
     }
 }

+ 22 - 1
persagy-web-graph/src/items/STextItem.ts

@@ -64,6 +64,26 @@ export class STextItem extends SObjectItem {
         this.update();
     }
 
+    /** 文本外圈颜色 */
+    private _fontStrokeColor: SColor = SColor.Transparent;
+    get fontStrokeColor(): SColor {
+        return this._fontStrokeColor;
+    }
+    set fontStrokeColor(v: SColor) {
+        this._fontStrokeColor = v;
+        this.update();
+    }
+
+    /** 文本外圈颜色 */
+    private _fontStrokeWidth: number = 1;
+    get fontStrokeWidth(): number {
+        return this._fontStrokeWidth;
+    }
+    set fontStrokeWidth(v: number) {
+        this._fontStrokeWidth = v;
+        this.update();
+    }
+
     /** 字体 */
     private _font: SFont;
     get font(): SFont {
@@ -188,7 +208,8 @@ export class STextItem extends SObjectItem {
 
         //绘制文本
         painter.brush.color = new SColor(this.color);
-        painter.pen.color = new SColor(this.color);
+        painter.pen.lineWidth = this.fontStrokeWidth;
+        painter.pen.color = this.fontStrokeColor;
         painter.shadow.shadowColor = SColor.Transparent;
         painter.font = this.font;
         // 遍历文本数组