vislite 1.6.0 → 1.6.1

package/src/common/canvas/config.ts

@@ -1,176 +1,176 @@
-import type CanvasConfigType from "../../../types/CanvasConfig"
-
-import arc from "./arc"
-
-// 文字统一设置方法
-export const initText = function (
-    painter: CanvasRenderingContext2D,
-    config: CanvasConfigType,
-    x: number,
-    y: number,
-    deg: number
-) {
-    painter.beginPath();
-    painter.translate(x, y);
-    painter.rotate(deg);
-    painter.font =
-        config.fontStyle +
-        " " +
-        config.fontWeight +
-        " " +
-        config.fontSize +
-        "px " +
-        config.fontFamily;
-    return painter
-}
-
-// 画弧统一设置方法
-export const initArc = function (
-    painter: CanvasRenderingContext2D,
-    config: CanvasConfigType,
-    cx: number,
-    cy: number,
-    r1: number,
-    r2: number,
-    beginDeg: number,
-    deg: number
-) {
-    if (r1 > r2) {
-        const temp = r1
-        r1 = r2
-        r2 = temp
-    }
-
-    beginDeg = beginDeg % (Math.PI * 2)
-
-    // 当|deg|>=2π的时候都认为是一个圆环
-    // 为什么不取2π比较，是怕部分浏览器浮点不精确
-    if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-        deg = Math.PI * 2
-    } else {
-        deg = deg % (Math.PI * 2)
-    }
-
-    arc(
-        beginDeg,
-        deg,
-        cx,
-        cy,
-        r1,
-        r2,
-        function (
-            beginA: number,
-            endA: number,
-            begInnerX: number,
-            begInnerY: number,
-            begOuterX: number,
-            begOuterY: number,
-            endInnerX: number,
-            endInnerY: number,
-            endOuterX: number,
-            endOuterY: number,
-            r: number
-        ) {
-            if (r < 0) r = -r
-            painter.beginPath()
-            painter.moveTo(begInnerX, begInnerY)
-            painter.arc(
-                // (圆心x，圆心y，半径，开始角度，结束角度，true逆时针/false顺时针)
-                cx,
-                cy,
-                r1,
-                beginA,
-                endA,
-                false
-            )
-            // 结尾
-            if (config.arcEndCap == "round")
-                painter.arc(
-                    (endInnerX + endOuterX) * 0.5,
-                    (endInnerY + endOuterY) * 0.5,
-                    r,
-                    endA - Math.PI,
-                    endA,
-                    true
-                )
-            else if (config.arcEndCap == "-round")
-                painter.arc(
-                    (endInnerX + endOuterX) * 0.5,
-                    (endInnerY + endOuterY) * 0.5,
-                    r,
-                    endA - Math.PI,
-                    endA,
-                    false
-                )
-            else painter.lineTo(endOuterX, endOuterY)
-
-            painter.arc(cx, cy, r2, endA, beginA, true)
-            // 开头
-            if (config.arcStartCap == "round")
-                painter.arc(
-                    (begInnerX + begOuterX) * 0.5,
-                    (begInnerY + begOuterY) * 0.5,
-                    r,
-                    beginA,
-                    beginA - Math.PI,
-                    true
-                )
-            else if (config.arcStartCap == "-round")
-                painter.arc(
-                    (begInnerX + begOuterX) * 0.5,
-                    (begInnerY + begOuterY) * 0.5,
-                    r,
-                    beginA,
-                    beginA - Math.PI,
-                    false
-                )
-            else painter.lineTo(begInnerX, begInnerY)
-        }
-    )
-    if (config.arcStartCap == "butt") painter.closePath()
-    return painter
-}
-
-// 画圆统一设置方法
-export const initCircle = function (
-    painter: CanvasRenderingContext2D,
-    cx: number,
-    cy: number,
-    r: number
-) {
-    painter.beginPath()
-    painter.moveTo(cx + r, cy)
-    painter.arc(cx, cy, r, 0, Math.PI * 2)
-    return painter
-};
-
-// 画矩形统一设置方法
-export const initRect = function (
-    painter: CanvasRenderingContext2D,
-    config: CanvasConfigType,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-) {
-    painter.beginPath()
-
-    const rectRadius: Array<number> = [];
-    if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
-        for (let index = 0; index < 4; index++) {
-            rectRadius.push(...config.rectRadius)
-        }
-    }
-
-    if (rectRadius.length >= 4) {
-        painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5)
-        painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0)
-        painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5)
-        painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI)
-        painter.closePath()
-    } else {
-        painter.rect(x, y, width, height)
-    }
-
-    return painter
-}
+import type CanvasConfigType from "../../../types/CanvasConfig"
+
+import arc from "./arc"
+
+// 文字统一设置方法
+export const initText = function (
+    painter: CanvasRenderingContext2D,
+    config: CanvasConfigType,
+    x: number,
+    y: number,
+    deg: number
+) {
+    painter.beginPath();
+    painter.translate(x, y);
+    painter.rotate(deg);
+    painter.font =
+        config.fontStyle +
+        " " +
+        config.fontWeight +
+        " " +
+        config.fontSize +
+        "px " +
+        config.fontFamily;
+    return painter
+}
+
+// 画弧统一设置方法
+export const initArc = function (
+    painter: CanvasRenderingContext2D,
+    config: CanvasConfigType,
+    cx: number,
+    cy: number,
+    r1: number,
+    r2: number,
+    beginDeg: number,
+    deg: number
+) {
+    if (r1 > r2) {
+        const temp = r1
+        r1 = r2
+        r2 = temp
+    }
+
+    beginDeg = beginDeg % (Math.PI * 2)
+
+    // 当|deg|>=2π的时候都认为是一个圆环
+    // 为什么不取2π比较，是怕部分浏览器浮点不精确
+    if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+        deg = Math.PI * 2
+    } else {
+        deg = deg % (Math.PI * 2)
+    }
+
+    arc(
+        beginDeg,
+        deg,
+        cx,
+        cy,
+        r1,
+        r2,
+        function (
+            beginA: number,
+            endA: number,
+            begInnerX: number,
+            begInnerY: number,
+            begOuterX: number,
+            begOuterY: number,
+            endInnerX: number,
+            endInnerY: number,
+            endOuterX: number,
+            endOuterY: number,
+            r: number
+        ) {
+            if (r < 0) r = -r
+            painter.beginPath()
+            painter.moveTo(begInnerX, begInnerY)
+            painter.arc(
+                // (圆心x，圆心y，半径，开始角度，结束角度，true逆时针/false顺时针)
+                cx,
+                cy,
+                r1,
+                beginA,
+                endA,
+                false
+            )
+            // 结尾
+            if (config.arcEndCap == "round")
+                painter.arc(
+                    (endInnerX + endOuterX) * 0.5,
+                    (endInnerY + endOuterY) * 0.5,
+                    r,
+                    endA - Math.PI,
+                    endA,
+                    true
+                )
+            else if (config.arcEndCap == "-round")
+                painter.arc(
+                    (endInnerX + endOuterX) * 0.5,
+                    (endInnerY + endOuterY) * 0.5,
+                    r,
+                    endA - Math.PI,
+                    endA,
+                    false
+                )
+            else painter.lineTo(endOuterX, endOuterY)
+
+            painter.arc(cx, cy, r2, endA, beginA, true)
+            // 开头
+            if (config.arcStartCap == "round")
+                painter.arc(
+                    (begInnerX + begOuterX) * 0.5,
+                    (begInnerY + begOuterY) * 0.5,
+                    r,
+                    beginA,
+                    beginA - Math.PI,
+                    true
+                )
+            else if (config.arcStartCap == "-round")
+                painter.arc(
+                    (begInnerX + begOuterX) * 0.5,
+                    (begInnerY + begOuterY) * 0.5,
+                    r,
+                    beginA,
+                    beginA - Math.PI,
+                    false
+                )
+            else painter.lineTo(begInnerX, begInnerY)
+        }
+    )
+    if (config.arcStartCap == "butt") painter.closePath()
+    return painter
+}
+
+// 画圆统一设置方法
+export const initCircle = function (
+    painter: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    r: number
+) {
+    painter.beginPath()
+    painter.moveTo(cx + r, cy)
+    painter.arc(cx, cy, r, 0, Math.PI * 2)
+    return painter
+};
+
+// 画矩形统一设置方法
+export const initRect = function (
+    painter: CanvasRenderingContext2D,
+    config: CanvasConfigType,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+) {
+    painter.beginPath()
+
+    const rectRadius: Array<number> = [];
+    if (Array.isArray(config.rectRadius) && config.rectRadius.length > 0) {
+        for (let index = 0; index < 4; index++) {
+            rectRadius.push(...config.rectRadius)
+        }
+    }
+
+    if (rectRadius.length >= 4) {
+        painter.arc(x + rectRadius[0], y + rectRadius[0], rectRadius[0], Math.PI, Math.PI * 1.5)
+        painter.arc(x + width - rectRadius[1], y + rectRadius[1], rectRadius[1], 1.5 * Math.PI, 0)
+        painter.arc(x + width - rectRadius[2], y + height - rectRadius[2], rectRadius[2], 0, Math.PI * 0.5)
+        painter.arc(x + rectRadius[3], y + height - rectRadius[3], rectRadius[3], 0.5 * Math.PI, Math.PI)
+        painter.closePath()
+    } else {
+        painter.rect(x, y, width, height)
+    }
+
+    return painter
+}

package/src/common/canvas/default.ts

@@ -1,65 +1,65 @@
-import type { arcCapType } from '../../../types/painterConfig'
-
-export default function (type?: string) {
-
-    const special = {
-        // 文字大小
-        "fontSize": 16,
-
-        // 字体
-        "fontFamily": "sans-serif",
-
-        // 字重
-        "fontWeight": 400,
-
-        // 字类型
-        "fontStyle": "normal",
-
-        // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
-        "arcStartCap": <arcCapType>'butt',
-
-        // 圆弧结束端闭合方式，和上一个类似
-        "arcEndCap": <arcCapType>'butt',
-
-        // 矩形圆角半径
-        "rectRadius": []
-    }
-
-    const init = {
-        // 填充色或图案
-        "fillStyle": 'black',
-
-        // 轮廓色或图案
-        "strokeStyle": 'black',
-
-        // 线条宽度(单位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',
-
-        // 阴影的模糊系数，默认0，也就是无阴影
-        "shadowBlur": 0,
-
-        // 阴影的颜色
-        "shadowColor": "black"
-    }
-
-    if (type == 'special') return special
-    else if (type == 'init') return init
-    else return {
-        ...special, ...init
-    }
+import type { arcCapType } from '../../../types/painterConfig'
+
+export default function (type?: string) {
+
+    const special = {
+        // 文字大小
+        "fontSize": 16,
+
+        // 字体
+        "fontFamily": "sans-serif",
+
+        // 字重
+        "fontWeight": 400,
+
+        // 字类型
+        "fontStyle": "normal",
+
+        // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
+        "arcStartCap": <arcCapType>'butt',
+
+        // 圆弧结束端闭合方式，和上一个类似
+        "arcEndCap": <arcCapType>'butt',
+
+        // 矩形圆角半径
+        "rectRadius": []
+    }
+
+    const init = {
+        // 填充色或图案
+        "fillStyle": 'black',
+
+        // 轮廓色或图案
+        "strokeStyle": 'black',
+
+        // 线条宽度(单位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',
+
+        // 阴影的模糊系数，默认0，也就是无阴影
+        "shadowBlur": 0,
+
+        // 阴影的颜色
+        "shadowColor": "black"
+    }
+
+    if (type == 'special') return special
+    else if (type == 'init') return init
+    else return {
+        ...special, ...init
+    }
 }

package/src/common/canvas/gradient.ts

@@ -1,32 +1,32 @@
-const 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
-    } : void 0)
+const 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
+    } : void 0)
 }