vislite 1.2.0-alpha.2 → 1.2.0-alpha.4

package/src/common/canvas/index.ts

@@ -1,177 +1,182 @@
-import type CanvasConfigType from "../../../types/CanvasConfig"
-import type CanvasOptsType from '../../../types/CanvasOpts'
-
-import PainterRender from "./painter"
-import assemble from "../assemble"
-import { linearGradient, radialGradient } from "./gradient"
-import { initText } from './config'
-
-class Canvas extends PainterRender {
-    readonly name: string = "Canvas"
-
-    private __regionList = {} //区域映射表
-    private __scaleSize
-
-    // 步长由1改为10是为了优化区域计算有时候出错问题
-    // 2023年7月6日 于南京
-    private __regionAssemble = assemble(0, 255, 10, 3)
-
-    // 添加scaleSize参数是为了适配画布缩放后的处理
-    // 2024年1月17日 于南京
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}, scaleSize = 1) {
-        super(
-            ViewCanvas,
-            opts,
-            RegionCanvas ? new PainterRender(RegionCanvas, {
-                willReadFrequently: true,
-            }) : undefined, true, scaleSize
-        )
-
-        this.__scaleSize = scaleSize
-        this.setRegion("")
-    }
-
-    config(configs: CanvasConfigType) {
-        for (const key in configs) {
-            this.useConfig(key, configs[key])
-        }
-
-        return this
-    }
-
-    // 是否绘制的内容只需要进行区域记录
-    onlyRegion(flag: boolean) {
-        this.__onlyRegion = flag
-        return this
-    }
-
-    onlyView(flag: boolean) {
-        this.__onlyView = flag
-        return this
-    }
-
-    // 设置当前绘制区域名称
-    setRegion(regionName: string | number) {
-        if (this.__region) {
-            if (regionName) {
-                if (this.__regionList[regionName] == void 0) {
-                    const tempColor = this.__regionAssemble()
-                    this.__regionList[regionName] =
-                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
-                }
-
-                this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                    this.__region.useConfig("strokeStyle", this.__regionList[regionName])
-            } else {
-                this.__region.useConfig("fillStyle", "#000000") &&
-                    this.__region.useConfig("strokeStyle", "#000000")
-            }
-        }
-        return this
-    }
-
-    // 获取当前事件触发的区域名称
-    getRegion(x: number, y: number): Promise<string> {
-        return new Promise((resolve) => {
-            const imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
-                data: [0, 0, 0, 0]
-            }
-
-            // 获取点击点的颜色
-            let currentRGBA = imgData.data
-
-            const doit = () => {
-                if (this.__region) {
-
-                    // 查找当前点击的区域
-                    for (const key in this.__regionList) {
-                        if (
-                            "rgb(" +
-                            currentRGBA[0] +
-                            "," +
-                            currentRGBA[1] +
-                            "," +
-                            currentRGBA[2] +
-                            ")" ==
-                            this.__regionList[key]
-                        ) {
-                            resolve(key)
-                            break
-                        }
-                    }
-                }
-
-                resolve("")
-            }
-
-            // 如果有值
-            if (currentRGBA) {
-                doit()
-            }
-
-            // 否则就是在Promise中
-            else {
-                (imgData as any).then((data: Uint8ClampedArray) => {
-                    currentRGBA = data
-                    doit()
-                })
-            }
-        })
-    }
-
-    textWidth(text: string) {
-        this.painter.save()
-
-        initText(this.painter, this.__specialConfig, 0, 0, 0)
-
-        // 虽然我们限制了只可以输入字符串，可是不代表所有环境都可以保证，为了确保方法不失效，强转成字符串
-        const width = this.painter.measureText(text + "").width
-
-        this.painter.restore()
-
-        return width
-    }
-
-    // 获取原始画笔
-    getContext(isRegion = false) {
-        return isRegion ? (this.__region ? this.__region.painter : null) : this.painter
-    }
-
-    // 获取画布信息
-    getInfo() {
-        return {
-            width: this.painter.canvas.width / this.__scaleSize,
-            height: this.painter.canvas.height / this.__scaleSize
-        }
-    }
-
-    // 线性渐变
-    createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
-        return linearGradient(this.painter, x0, y0, x1, y1)
-    }
-
-    // 环形渐变
-    createRadialGradient(cx: number, cy: number, r: number) {
-        return radialGradient(this.painter, cx, cy, r)
-    }
-
-    // 获取指定位置颜色
-    getColor(x: number, y: number) {
-        x *= this.__scaleSize
-        y *= this.__scaleSize
-        const currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
-        return (
-            "rgba(" +
-            currentRGBA[0] +
-            "," +
-            currentRGBA[1] +
-            "," +
-            currentRGBA[2] +
-            "," +
-            currentRGBA[3] +
-            ")"
-        )
-    }
-}
-
-export default Canvas
+import type CanvasConfigType from "../../../types/CanvasConfig"
+import type CanvasOptsType from '../../../types/CanvasOpts'
+
+import PainterRender from "./painter"
+import assemble from "../assemble"
+import { linearGradient, radialGradient, conicGradient } from "./gradient"
+import { initText } from './config'
+
+class Canvas extends PainterRender {
+    readonly name: string = "Canvas"
+
+    private __regionList = {} //区域映射表
+    private __scaleSize
+
+    // 步长由1改为10是为了优化区域计算有时候出错问题
+    // 2023年7月6日 于南京
+    private __regionAssemble = assemble(0, 255, 10, 3)
+
+    // 添加scaleSize参数是为了适配画布缩放后的处理
+    // 2024年1月17日 于南京
+    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null, opts: CanvasOptsType = {}, scaleSize = 1) {
+        super(
+            ViewCanvas,
+            opts,
+            RegionCanvas ? new PainterRender(RegionCanvas, {
+                willReadFrequently: true,
+            }) : undefined, true, scaleSize
+        )
+
+        this.__scaleSize = scaleSize
+        this.setRegion("")
+    }
+
+    config(configs: CanvasConfigType) {
+        for (const key in configs) {
+            this.useConfig(key, configs[key])
+        }
+
+        return this
+    }
+
+    // 是否绘制的内容只需要进行区域记录
+    onlyRegion(flag: boolean) {
+        this.__onlyRegion = flag
+        return this
+    }
+
+    onlyView(flag: boolean) {
+        this.__onlyView = flag
+        return this
+    }
+
+    // 设置当前绘制区域名称
+    setRegion(regionName: string | number) {
+        if (this.__region) {
+            if (regionName) {
+                if (this.__regionList[regionName] == void 0) {
+                    const tempColor = this.__regionAssemble()
+                    this.__regionList[regionName] =
+                        "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
+                }
+
+                this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
+                    this.__region.useConfig("strokeStyle", this.__regionList[regionName])
+            } else {
+                this.__region.useConfig("fillStyle", "#000000") &&
+                    this.__region.useConfig("strokeStyle", "#000000")
+            }
+        }
+        return this
+    }
+
+    // 获取当前事件触发的区域名称
+    getRegion(x: number, y: number): Promise<string> {
+        return new Promise((resolve) => {
+            const imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
+                data: [0, 0, 0, 0]
+            }
+
+            // 获取点击点的颜色
+            let currentRGBA = imgData.data
+
+            const doit = () => {
+                if (this.__region) {
+
+                    // 查找当前点击的区域
+                    for (const key in this.__regionList) {
+                        if (
+                            "rgb(" +
+                            currentRGBA[0] +
+                            "," +
+                            currentRGBA[1] +
+                            "," +
+                            currentRGBA[2] +
+                            ")" ==
+                            this.__regionList[key]
+                        ) {
+                            resolve(key)
+                            break
+                        }
+                    }
+                }
+
+                resolve("")
+            }
+
+            // 如果有值
+            if (currentRGBA) {
+                doit()
+            }
+
+            // 否则就是在Promise中
+            else {
+                (imgData as any).then((data: Uint8ClampedArray) => {
+                    currentRGBA = data
+                    doit()
+                })
+            }
+        })
+    }
+
+    textWidth(text: string) {
+        this.painter.save()
+
+        initText(this.painter, this.__specialConfig, 0, 0, 0)
+
+        // 虽然我们限制了只可以输入字符串，可是不代表所有环境都可以保证，为了确保方法不失效，强转成字符串
+        const width = this.painter.measureText(text + "").width
+
+        this.painter.restore()
+
+        return width
+    }
+
+    // 获取原始画笔
+    getContext(isRegion = false) {
+        return isRegion ? (this.__region ? this.__region.painter : null) : this.painter
+    }
+
+    // 获取画布信息
+    getInfo() {
+        return {
+            width: this.painter.canvas.width / this.__scaleSize,
+            height: this.painter.canvas.height / this.__scaleSize
+        }
+    }
+
+    // 线性渐变
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
+        return linearGradient(this.painter, x0, y0, x1, y1)
+    }
+
+    // 环形渐变
+    createRadialGradient(cx: number, cy: number, r: number) {
+        return radialGradient(this.painter, cx, cy, r)
+    }
+
+    // 角度渐变
+    createConicGradient(cx: number, cy: number, beginDeg: number, deg?: number) {
+        return conicGradient(this.painter, cx, cy, beginDeg, deg)
+    }
+
+    // 获取指定位置颜色
+    getColor(x: number, y: number) {
+        x *= this.__scaleSize
+        y *= this.__scaleSize
+        const currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
+        return (
+            "rgba(" +
+            currentRGBA[0] +
+            "," +
+            currentRGBA[1] +
+            "," +
+            currentRGBA[2] +
+            "," +
+            currentRGBA[3] +
+            ")"
+        )
+    }
+}
+
+export default Canvas

package/src/common/canvas/painter.ts

@@ -50,15 +50,21 @@ class Painter {
         // 线条宽度(单位px，下同)
         "lineWidth": 1,
 
+        // 线的端点类型，（"butt"平直边缘、"round"半圆和"square"矩形）
+        "lineCap": "butt",
+
+        // 线的拐角连接方式，（"miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆）
+        "lineJoin": "miter",
+
+        // 设置线条虚线，应该是一个数组[number,...]
+        "lineDash": [],
+
         // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
         "textAlign": 'left',
 
         // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
         "textBaseline": 'middle',
 
-        // 设置线条虚线，应该是一个数组[number,...]
-        "lineDash": [],
-
         // 阴影的模糊系数，默认0，也就是无阴影
         "shadowBlur": 0,