vislite 1.2.0-alpha.2 → 1.2.0-alpha.3

package/src/Canvas.ts

@@ -1,85 +1,85 @@
-import type CanvasType from '../types/Canvas'
-import type CanvasOptionType from '../types/CanvasOption'
-
-import OralCanvas from './common/canvas/index'
-import { initOption } from './common/option'
-
-class Canvas extends OralCanvas implements CanvasType {
-    private __canvas: HTMLCanvasElement
-    private __el: HTMLElement
-    constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
-        if (!el) {
-            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = initOption(option, {
-            region: true,
-            willReadFrequently: false
-        })
-
-        width = width || el.clientWidth
-        height = height || el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            if (option.region) {
-                RegionCanvas = document.createElement('canvas')
-            }
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'Canvas')
-        }
-
-        // 设置画布大小
-        const canvasArray = [RegionCanvas, ViewCanvas]
-        for (let index = 0; index < canvasArray.length; index++) {
-            const canvas = canvasArray[index]
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', (index * width + width) + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', (index * height + height) + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas, {
-            willReadFrequently: option.willReadFrequently,
-        }, 2)
-
-        this.__canvas = ViewCanvas
-        this.__el = el
-        this.painter.scale(2, 2)
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            resolve(this.__canvas.toDataURL())
-        })
-    }
-
-    bind(eventName: string, callback: (regionName: string) => void) {
-        this.__el.addEventListener(eventName, (event: any) => {
-            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
-                callback(regionName)
-            })
-        })
-        return this
-    }
-}
-
+import type CanvasType from '../types/Canvas'
+import type CanvasOptionType from '../types/CanvasOption'
+
+import OralCanvas from './common/canvas/index'
+import { initOption } from './common/option'
+
+class Canvas extends OralCanvas implements CanvasType {
+    private __canvas: HTMLCanvasElement
+    private __el: HTMLElement
+    constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
+        if (!el) {
+            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = initOption(option, {
+            region: true,
+            willReadFrequently: false
+        })
+
+        width = width || el.clientWidth
+        height = height || el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            if (option.region) {
+                RegionCanvas = document.createElement('canvas')
+            }
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'Canvas')
+        }
+
+        // 设置画布大小
+        const canvasArray = [RegionCanvas, ViewCanvas]
+        for (let index = 0; index < canvasArray.length; index++) {
+            const canvas = canvasArray[index]
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', (index * width + width) + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', (index * height + height) + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas, {
+            willReadFrequently: option.willReadFrequently,
+        }, 2)
+
+        this.__canvas = ViewCanvas
+        this.__el = el
+        this.painter.scale(2, 2)
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            resolve(this.__canvas.toDataURL())
+        })
+    }
+
+    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
+        this.__el.addEventListener(eventName, (event: any) => {
+            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
+                callback(regionName, event.offsetX, event.offsetY)
+            })
+        })
+        return this
+    }
+}
+
 export default Canvas

package/src/common/canvas/gradient.ts

@@ -1,24 +1,32 @@
-let enhanceGradient = function (gradient: CanvasGradient) {
-    const enhanceGradient = {
-        "value": function () {
-            return gradient
-        },
-        "setColor": function (stop: number, color: string) {
-            gradient.addColorStop(stop, color)
-            return enhanceGradient
-        }
-    };
-    return enhanceGradient
-}
-
-// 线性渐变
-export const linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
-    const gradient = painter.createLinearGradient(x0, y0, x1, y1)
-    return enhanceGradient(gradient)
-}
-
-// 环形渐变
-export const radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
-    const gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
-    return enhanceGradient(gradient)
-}
+let enhanceGradient = function (gradient: CanvasGradient, calcStop?: Function) {
+    const enhanceGradient = {
+        "value": function () {
+            return gradient
+        },
+        "setColor": function (stop: number, color: string) {
+            gradient.addColorStop(calcStop ? calcStop(stop) : stop, color)
+            return enhanceGradient
+        }
+    };
+    return enhanceGradient
+}
+
+// 线性渐变
+export const linearGradient = function (painter: CanvasRenderingContext2D, x0: number, y0: number, x1: number, y1: number) {
+    const gradient = painter.createLinearGradient(x0, y0, x1, y1)
+    return enhanceGradient(gradient)
+}
+
+// 环形渐变
+export const radialGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, r: number) {
+    const gradient = painter.createRadialGradient(cx, cy, 0, cx, cy, r)
+    return enhanceGradient(gradient)
+}
+
+// 角度渐变
+export const conicGradient = function (painter: CanvasRenderingContext2D, cx: number, cy: number, startDeg: number, deg?: number) {
+    const gradient = painter.createConicGradient(startDeg, cx, cy)
+    return enhanceGradient(gradient, deg ? (stop: number) => {
+        return deg / (Math.PI * 2) * stop
+    } : undefined)
+}

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/types/Canvas.d.ts

@@ -297,6 +297,15 @@ export default interface CanvasType {
      */
     createRadialGradient(cx: number, cy: number, r: number): GradientType<CanvasGradient>
 
+    /**
+     * 创建角度渐变
+     * @param cx 中心
+     * @param cy
+     * @param beginDeg 开始弧度
+     * @param deg 跨越弧度，可选，默认2PI
+     */
+    createConicGradient(cx: number, cy: number, beginDeg: number, deg?: number): GradientType<CanvasGradient>
+
     /**
      * 获取指定位置颜色
      * @param x
@@ -326,5 +335,5 @@ export default interface CanvasType {
      * @param eventName 事件名称
      * @param callback 回调函数
      */
-    bind(eventName: string, callback: (regionName: string) => void): this
+    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void): this
 }