@visactor/vrender-core 0.17.8 → 0.17.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/canvas/conical-gradient.d.ts +10 -5
- package/cjs/canvas/conical-gradient.js +21 -14
- package/cjs/canvas/conical-gradient.js.map +1 -1
- package/dist/index.js +20 -15
- package/dist/index.min.js +1 -1
- package/es/canvas/conical-gradient.d.ts +10 -5
- package/es/canvas/conical-gradient.js +21 -16
- package/es/canvas/conical-gradient.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,12 +1,17 @@
|
|
|
1
|
+
import { LRU } from '@visactor/vutils';
|
|
1
2
|
import type { IConicalGradient, IContext2d } from '../interface';
|
|
2
|
-
export declare class ColorInterpolate {
|
|
3
|
+
export declare class ColorInterpolate extends LRU {
|
|
3
4
|
private readonly rgbaSet;
|
|
5
|
+
private cacheParams;
|
|
6
|
+
static _instance: ColorInterpolate;
|
|
7
|
+
static getInstance(): ColorInterpolate;
|
|
4
8
|
constructor(stops?: [number, string][], precision?: number);
|
|
5
9
|
getColor(offset: number): string;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
dataMap: Map<string, {
|
|
11
|
+
data: ColorInterpolate;
|
|
12
|
+
timestamp: number[];
|
|
13
|
+
}>;
|
|
14
|
+
GetOrCreate(x: number, y: number, w: number, h: number, stops?: [number, string][], precision?: number): ColorInterpolate;
|
|
10
15
|
}
|
|
11
16
|
export declare function getConicGradientAt(x: number, y: number, angle: number, color: IConicalGradient): string | false | import("../interface").IGradientColor;
|
|
12
17
|
export declare function createConicalGradient(context: IContext2d, stops: Array<[number, string]>, x: number, y: number, deltaAngle: number, startAngle: number, endAngle: number, minW: number, minH: number): null | CanvasPattern;
|
|
@@ -24,8 +24,16 @@ class ConicalCanvas {
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
class ColorInterpolate {
|
|
27
|
+
class ColorInterpolate extends vutils_1.LRU {
|
|
28
|
+
static getInstance() {
|
|
29
|
+
return ColorInterpolate._instance || (ColorInterpolate._instance = new ColorInterpolate),
|
|
30
|
+
ColorInterpolate._instance;
|
|
31
|
+
}
|
|
28
32
|
constructor(stops = [], precision = 100) {
|
|
33
|
+
super(), this.cacheParams = {
|
|
34
|
+
CLEAN_THRESHOLD: 100,
|
|
35
|
+
L_TIME: 1e3
|
|
36
|
+
}, this.dataMap = new Map;
|
|
29
37
|
const canvas = ConicalCanvas.GetCanvas(), conicalCtx = ConicalCanvas.GetCtx();
|
|
30
38
|
if (canvas.width = precision, canvas.height = 1, !conicalCtx) return;
|
|
31
39
|
if (conicalCtx.translate(0, 0), !conicalCtx) throw new Error("获取ctx发生错误");
|
|
@@ -38,22 +46,21 @@ class ColorInterpolate {
|
|
|
38
46
|
const rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);
|
|
39
47
|
return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;
|
|
40
48
|
}
|
|
41
|
-
|
|
42
|
-
let str =
|
|
49
|
+
GetOrCreate(x, y, w, h, stops = [], precision = 100) {
|
|
50
|
+
let str = `${x}${y}${w}${h}`;
|
|
43
51
|
stops.forEach((item => str += item.join())), str += precision;
|
|
44
|
-
let colorInter =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
return ColorInterpolate.dataMap.get(stops);
|
|
52
|
+
let colorInter = this.dataMap.get(str);
|
|
53
|
+
if (!colorInter) {
|
|
54
|
+
colorInter = {
|
|
55
|
+
data: new ColorInterpolate(stops, precision),
|
|
56
|
+
timestamp: []
|
|
57
|
+
}, this.addLimitedTimestamp(colorInter, Date.now(), {}), this.dataMap.set(str, colorInter);
|
|
58
|
+
}
|
|
59
|
+
return this.clearCache(this.dataMap, this.cacheParams), colorInter.data;
|
|
53
60
|
}
|
|
54
61
|
}
|
|
55
62
|
|
|
56
|
-
exports.ColorInterpolate = ColorInterpolate
|
|
63
|
+
exports.ColorInterpolate = ColorInterpolate;
|
|
57
64
|
|
|
58
65
|
class ConicalPatternStore {
|
|
59
66
|
static GetSize(minSize) {
|
|
@@ -104,7 +111,7 @@ function createConicalGradient(context, stops, x, y, deltaAngle, startAngle, end
|
|
|
104
111
|
const width = ConicalPatternStore.GetSize(minW), height = ConicalPatternStore.GetSize(minH);
|
|
105
112
|
let pattern = ConicalPatternStore.Get(stops, x, y, startAngle, endAngle, width, height);
|
|
106
113
|
if (pattern) return pattern;
|
|
107
|
-
const r = Math.sqrt(Math.max(Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)), Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2)))), stepNum = deltaDeg + 1, step = deltaAngle / Math.max(1, stepNum - 1), colorInter = ColorInterpolate.GetOrCreate(stops, stepNum), lineWidth = 2 * Math.PI * r / 360;
|
|
114
|
+
const r = Math.sqrt(Math.max(Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)), Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2)))), stepNum = deltaDeg + 1, step = deltaAngle / Math.max(1, stepNum - 1), colorInter = ColorInterpolate.getInstance().GetOrCreate(x, y, width, height, stops, stepNum), lineWidth = 2 * Math.PI * r / 360;
|
|
108
115
|
conicalCanvas.width = width, conicalCanvas.height = height, conicalCtx.setTransform(1, 0, 0, 1, 0, 0),
|
|
109
116
|
conicalCtx.clearRect(0, 0, width, height), conicalCtx.translate(x, y), conicalCtx.rotate(startAngle);
|
|
110
117
|
for (let i = 0, len = stepNum - 1; i < len && !(startAngle + i * step > endAngle); i++) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/canvas/conical-gradient.ts"],"names":[],"mappings":"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","file":"conical-gradient.js","sourcesContent":["/**\n * 环形渐变部分源码借鉴https://github.com/parksben/create-conical-gradient/blob/master/LICENSE\n * MIT License\n\n * Copyright (c) 2020 parksben\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { pi2 } from '@visactor/vutils';\nimport { application } from '../application';\nimport type { IConicalGradient, IContext2d } from '../interface';\nimport { interpolateColor } from '../color-string';\n\nclass ConicalCanvas {\n static canvas: HTMLCanvasElement;\n static ctx: CanvasRenderingContext2D | null;\n\n static GetCanvas() {\n try {\n if (!ConicalCanvas.canvas) {\n ConicalCanvas.canvas = application.global.createCanvas({});\n }\n return ConicalCanvas.canvas;\n } catch (err) {\n return null;\n }\n }\n\n static GetCtx() {\n if (!ConicalCanvas.ctx) {\n const conicalCanvas = ConicalCanvas.GetCanvas();\n ConicalCanvas.ctx = conicalCanvas.getContext('2d');\n }\n return ConicalCanvas.ctx;\n }\n}\n\n// todo 目前环形渐变缓存还是依赖于x和y,后续优化环形渐变\nexport class ColorInterpolate {\n private readonly rgbaSet: Uint8ClampedArray;\n\n constructor(stops: [number, string][] = [], precision = 100) {\n const canvas = ConicalCanvas.GetCanvas();\n const conicalCtx = ConicalCanvas.GetCtx();\n canvas.width = precision;\n canvas.height = 1;\n if (!conicalCtx) {\n return;\n }\n conicalCtx.translate(0, 0);\n if (!conicalCtx) {\n throw new Error('获取ctx发生错误');\n }\n\n const gradient = conicalCtx.createLinearGradient(0, 0, precision, 0);\n stops.forEach(stop => {\n gradient.addColorStop(stop[0], stop[1]);\n });\n\n conicalCtx.fillStyle = gradient;\n conicalCtx.fillRect(0, 0, precision, 1);\n\n this.rgbaSet = conicalCtx.getImageData(0, 0, precision, 1).data;\n }\n\n getColor(offset: number): string {\n const rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);\n return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;\n }\n\n static dataMap: Map<string, ColorInterpolate> = new Map();\n // static lastCache: {\n // stops: [number, string][],\n // precision: number,\n // colorInter: ColorInterpolate,\n // step: number,\n // stepNum: number,\n // r: number,\n // lineWidth: number,\n // } | null = null;\n\n static GetOrCreate(stops: [number, string][] = [], precision = 100) {\n let str = '';\n stops.forEach(item => (str += item.join()));\n str += precision;\n let colorInter = ColorInterpolate.dataMap.get(str);\n if (!colorInter) {\n colorInter = new ColorInterpolate(stops, precision);\n ColorInterpolate.dataMap.set(str, colorInter);\n }\n return colorInter;\n }\n\n static SetColorInterpolateInstance(stops: string, ins: ColorInterpolate) {\n ColorInterpolate.dataMap.set(stops, ins);\n }\n\n static GetColorInterpolateInstance(stops: string): ColorInterpolate | undefined {\n return ColorInterpolate.dataMap.get(stops);\n }\n}\n\nclass ConicalPatternStore {\n private static cache: {\n [key: string]: {\n width: number;\n height: number;\n pattern: CanvasPattern;\n }[];\n } = {};\n private static ImageSize = [20, 40, 80, 160, 320, 640, 1280, 2560];\n\n static GetSize(minSize: number): number {\n for (let i = 0; i < ConicalPatternStore.ImageSize.length; i++) {\n if (ConicalPatternStore.ImageSize[i] >= minSize) {\n return ConicalPatternStore.ImageSize[i];\n }\n }\n return minSize;\n }\n\n static Get(\n stops: Array<[number, string]>,\n x: number,\n y: number,\n startAngle: number,\n endAngle: number,\n w: number,\n h: number\n ): CanvasPattern | null {\n const key = ConicalPatternStore.GenKey(stops, x, y, startAngle, endAngle);\n const data = ConicalPatternStore.cache[key];\n if (!data || data.length === 0) {\n return null;\n }\n for (let i = 0; i < data.length; i++) {\n if (data[i].width >= w && data[i].height >= h) {\n return data[i].pattern;\n }\n }\n return null;\n }\n\n static Set(\n stops: Array<[number, string]>,\n x: number,\n y: number,\n startAngle: number,\n endAngle: number,\n pattern: CanvasPattern,\n w: number,\n h: number\n ) {\n const key = ConicalPatternStore.GenKey(stops, x, y, startAngle, endAngle);\n // 必然是顺序的,因为如果能get到的话就不需要set\n if (!ConicalPatternStore.cache[key]) {\n ConicalPatternStore.cache[key] = [\n {\n width: w,\n height: h,\n pattern\n }\n ];\n } else {\n ConicalPatternStore.cache[key].push({\n width: w,\n height: h,\n pattern\n });\n }\n }\n\n static GenKey(stops: Array<[number, string]>, x: number, y: number, startAngle: number, endAngle: number): string {\n return `${x},${y},${startAngle},${endAngle},${stops.join()}`;\n }\n}\n\nexport function getConicGradientAt(x: number, y: number, angle: number, color: IConicalGradient) {\n const { stops, startAngle, endAngle } = color;\n\n while (angle < 0) {\n angle += pi2;\n }\n while (angle > pi2) {\n angle -= pi2;\n }\n\n if (angle < startAngle) {\n return stops[0].color;\n }\n if (angle > endAngle) {\n return stops[0].color;\n }\n let percent = (angle - startAngle) / (endAngle - startAngle);\n let startStop: any;\n let endStop: any;\n for (let i = 0; i < stops.length; i++) {\n if (stops[i].offset >= percent) {\n startStop = stops[i - 1];\n endStop = stops[i];\n break;\n }\n }\n percent = (percent - startStop.offset) / (endStop.offset - startStop.offset);\n return interpolateColor(startStop.color, endStop.color, percent, false);\n}\n\n/**\n * 环形渐变效果\n * @param context\n * @param stops\n * @param x\n * @param y\n * @param deltaAngle 用于细分出颜色插值数组[start,,,,,,end, (没有用到的颜色)]\n * @param startAngle 实际开始的angle\n * @param endAngle 实际结束的angle\n * @param minW\n * @param minH\n * @returns\n */\nexport function createConicalGradient(\n context: IContext2d,\n stops: Array<[number, string]>,\n x: number,\n y: number,\n deltaAngle: number,\n startAngle: number,\n endAngle: number,\n minW: number,\n minH: number\n): null | CanvasPattern {\n const deltaDeg = Math.floor((deltaAngle * 180) / Math.PI);\n\n const conicalCanvas = ConicalCanvas.GetCanvas();\n const conicalCtx = ConicalCanvas.GetCtx();\n\n if (!conicalCtx) {\n return null;\n }\n const width = ConicalPatternStore.GetSize(minW);\n const height = ConicalPatternStore.GetSize(minH);\n let pattern = ConicalPatternStore.Get(stops, x, y, startAngle, endAngle, width, height);\n if (pattern) {\n return pattern;\n }\n\n const r = Math.sqrt(\n Math.max(\n Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)),\n Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2))\n )\n );\n // 每一度一个三角形\n const stepNum = deltaDeg + 1;\n const step = deltaAngle / Math.max(1, stepNum - 1);\n const colorInter = ColorInterpolate.GetOrCreate(stops, stepNum);\n\n const lineWidth = (2 * Math.PI * r) / 360;\n\n conicalCanvas.width = width;\n conicalCanvas.height = height;\n conicalCtx.setTransform(1, 0, 0, 1, 0, 0);\n conicalCtx.clearRect(0, 0, width, height);\n conicalCtx.translate(x, y);\n conicalCtx.rotate(startAngle);\n for (let i = 0, len = stepNum - 1; i < len; i++) {\n if (startAngle + i * step > endAngle) {\n break;\n }\n const color = colorInter.getColor(i);\n conicalCtx.beginPath();\n conicalCtx.rotate(step);\n conicalCtx.moveTo(0, 0);\n conicalCtx.lineTo(r, -2 * lineWidth);\n conicalCtx.lineTo(r, 0);\n conicalCtx.fillStyle = color;\n conicalCtx.closePath();\n conicalCtx.fill();\n }\n\n const imageData = conicalCtx.getImageData(0, 0, width, height);\n\n conicalCanvas.width = imageData.width;\n conicalCanvas.height = imageData.height;\n conicalCtx.putImageData(imageData, 0, 0);\n pattern = context.createPattern(conicalCanvas, 'no-repeat');\n pattern && ConicalPatternStore.Set(stops, x, y, startAngle, endAngle, pattern, width, height);\n return pattern;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/canvas/conical-gradient.ts"],"names":[],"mappings":"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","file":"conical-gradient.js","sourcesContent":["/**\n * 环形渐变部分源码借鉴https://github.com/parksben/create-conical-gradient/blob/master/LICENSE\n * MIT License\n\n * Copyright (c) 2020 parksben\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\nimport { pi2, LRU } from '@visactor/vutils';\nimport { application } from '../application';\nimport type { IConicalGradient, IContext2d } from '../interface';\nimport { interpolateColor } from '../color-string';\n\nclass ConicalCanvas {\n static canvas: HTMLCanvasElement;\n static ctx: CanvasRenderingContext2D | null;\n\n static GetCanvas() {\n try {\n if (!ConicalCanvas.canvas) {\n ConicalCanvas.canvas = application.global.createCanvas({});\n }\n return ConicalCanvas.canvas;\n } catch (err) {\n return null;\n }\n }\n\n static GetCtx() {\n if (!ConicalCanvas.ctx) {\n const conicalCanvas = ConicalCanvas.GetCanvas();\n ConicalCanvas.ctx = conicalCanvas.getContext('2d');\n }\n return ConicalCanvas.ctx;\n }\n}\n\n// todo 目前环形渐变缓存还是依赖于x和y,后续优化环形渐变\nexport class ColorInterpolate extends LRU {\n private readonly rgbaSet: Uint8ClampedArray;\n private cacheParams: {\n CLEAN_THRESHOLD?: number;\n L_TIME?: number;\n R_COUNT?: number;\n R_TIMESTAMP_MAX_SIZE?: number;\n } = { CLEAN_THRESHOLD: 100, L_TIME: 1e3 };\n static _instance: ColorInterpolate;\n\n static getInstance() {\n if (!ColorInterpolate._instance) {\n ColorInterpolate._instance = new ColorInterpolate();\n }\n return ColorInterpolate._instance;\n }\n\n constructor(stops: [number, string][] = [], precision = 100) {\n super();\n const canvas = ConicalCanvas.GetCanvas();\n const conicalCtx = ConicalCanvas.GetCtx();\n canvas.width = precision;\n canvas.height = 1;\n if (!conicalCtx) {\n return;\n }\n conicalCtx.translate(0, 0);\n if (!conicalCtx) {\n throw new Error('获取ctx发生错误');\n }\n\n const gradient = conicalCtx.createLinearGradient(0, 0, precision, 0);\n stops.forEach(stop => {\n gradient.addColorStop(stop[0], stop[1]);\n });\n\n conicalCtx.fillStyle = gradient;\n conicalCtx.fillRect(0, 0, precision, 1);\n\n this.rgbaSet = conicalCtx.getImageData(0, 0, precision, 1).data;\n }\n\n getColor(offset: number): string {\n const rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);\n return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;\n }\n\n dataMap: Map<string, { data: ColorInterpolate; timestamp: number[] }> = new Map();\n // static lastCache: {\n // stops: [number, string][],\n // precision: number,\n // colorInter: ColorInterpolate,\n // step: number,\n // stepNum: number,\n // r: number,\n // lineWidth: number,\n // } | null = null;\n\n GetOrCreate(x: number, y: number, w: number, h: number, stops: [number, string][] = [], precision = 100) {\n let str = `${x}${y}${w}${h}`;\n stops.forEach(item => (str += item.join()));\n str += precision;\n let colorInter = this.dataMap.get(str);\n if (!colorInter) {\n const data = new ColorInterpolate(stops, precision);\n colorInter = { data, timestamp: [] };\n this.addLimitedTimestamp(colorInter, Date.now(), {});\n this.dataMap.set(str, colorInter);\n }\n this.clearCache(this.dataMap, this.cacheParams);\n return colorInter.data;\n }\n}\n\nclass ConicalPatternStore {\n private static cache: {\n [key: string]: {\n width: number;\n height: number;\n pattern: CanvasPattern;\n }[];\n } = {};\n private static ImageSize = [20, 40, 80, 160, 320, 640, 1280, 2560];\n\n static GetSize(minSize: number): number {\n for (let i = 0; i < ConicalPatternStore.ImageSize.length; i++) {\n if (ConicalPatternStore.ImageSize[i] >= minSize) {\n return ConicalPatternStore.ImageSize[i];\n }\n }\n return minSize;\n }\n\n static Get(\n stops: Array<[number, string]>,\n x: number,\n y: number,\n startAngle: number,\n endAngle: number,\n w: number,\n h: number\n ): CanvasPattern | null {\n const key = ConicalPatternStore.GenKey(stops, x, y, startAngle, endAngle);\n const data = ConicalPatternStore.cache[key];\n if (!data || data.length === 0) {\n return null;\n }\n for (let i = 0; i < data.length; i++) {\n if (data[i].width >= w && data[i].height >= h) {\n return data[i].pattern;\n }\n }\n return null;\n }\n\n static Set(\n stops: Array<[number, string]>,\n x: number,\n y: number,\n startAngle: number,\n endAngle: number,\n pattern: CanvasPattern,\n w: number,\n h: number\n ) {\n const key = ConicalPatternStore.GenKey(stops, x, y, startAngle, endAngle);\n // 必然是顺序的,因为如果能get到的话就不需要set\n if (!ConicalPatternStore.cache[key]) {\n ConicalPatternStore.cache[key] = [\n {\n width: w,\n height: h,\n pattern\n }\n ];\n } else {\n ConicalPatternStore.cache[key].push({\n width: w,\n height: h,\n pattern\n });\n }\n }\n\n static GenKey(stops: Array<[number, string]>, x: number, y: number, startAngle: number, endAngle: number): string {\n return `${x},${y},${startAngle},${endAngle},${stops.join()}`;\n }\n}\n\nexport function getConicGradientAt(x: number, y: number, angle: number, color: IConicalGradient) {\n const { stops, startAngle, endAngle } = color;\n\n while (angle < 0) {\n angle += pi2;\n }\n while (angle > pi2) {\n angle -= pi2;\n }\n\n if (angle < startAngle) {\n return stops[0].color;\n }\n if (angle > endAngle) {\n return stops[0].color;\n }\n let percent = (angle - startAngle) / (endAngle - startAngle);\n let startStop: any;\n let endStop: any;\n for (let i = 0; i < stops.length; i++) {\n if (stops[i].offset >= percent) {\n startStop = stops[i - 1];\n endStop = stops[i];\n break;\n }\n }\n percent = (percent - startStop.offset) / (endStop.offset - startStop.offset);\n return interpolateColor(startStop.color, endStop.color, percent, false);\n}\n\n/**\n * 环形渐变效果\n * @param context\n * @param stops\n * @param x\n * @param y\n * @param deltaAngle 用于细分出颜色插值数组[start,,,,,,end, (没有用到的颜色)]\n * @param startAngle 实际开始的angle\n * @param endAngle 实际结束的angle\n * @param minW\n * @param minH\n * @returns\n */\nexport function createConicalGradient(\n context: IContext2d,\n stops: Array<[number, string]>,\n x: number,\n y: number,\n deltaAngle: number,\n startAngle: number,\n endAngle: number,\n minW: number,\n minH: number\n): null | CanvasPattern {\n const deltaDeg = Math.floor((deltaAngle * 180) / Math.PI);\n\n const conicalCanvas = ConicalCanvas.GetCanvas();\n const conicalCtx = ConicalCanvas.GetCtx();\n\n if (!conicalCtx) {\n return null;\n }\n const width = ConicalPatternStore.GetSize(minW);\n const height = ConicalPatternStore.GetSize(minH);\n let pattern = ConicalPatternStore.Get(stops, x, y, startAngle, endAngle, width, height);\n if (pattern) {\n return pattern;\n }\n\n const r = Math.sqrt(\n Math.max(\n Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)),\n Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2))\n )\n );\n // 每一度一个三角形\n const stepNum = deltaDeg + 1;\n const step = deltaAngle / Math.max(1, stepNum - 1);\n const colorInter = ColorInterpolate.getInstance().GetOrCreate(x, y, width, height, stops, stepNum);\n\n const lineWidth = (2 * Math.PI * r) / 360;\n\n conicalCanvas.width = width;\n conicalCanvas.height = height;\n conicalCtx.setTransform(1, 0, 0, 1, 0, 0);\n conicalCtx.clearRect(0, 0, width, height);\n conicalCtx.translate(x, y);\n conicalCtx.rotate(startAngle);\n for (let i = 0, len = stepNum - 1; i < len; i++) {\n if (startAngle + i * step > endAngle) {\n break;\n }\n const color = colorInter.getColor(i);\n conicalCtx.beginPath();\n conicalCtx.rotate(step);\n conicalCtx.moveTo(0, 0);\n conicalCtx.lineTo(r, -2 * lineWidth);\n conicalCtx.lineTo(r, 0);\n conicalCtx.fillStyle = color;\n conicalCtx.closePath();\n conicalCtx.fill();\n }\n\n const imageData = conicalCtx.getImageData(0, 0, width, height);\n\n conicalCanvas.width = imageData.width;\n conicalCanvas.height = imageData.height;\n conicalCtx.putImageData(imageData, 0, 0);\n pattern = context.createPattern(conicalCanvas, 'no-repeat');\n pattern && ConicalPatternStore.Set(stops, x, y, startAngle, endAngle, pattern, width, height);\n return pattern;\n}\n"]}
|
package/dist/index.js
CHANGED
|
@@ -13124,8 +13124,17 @@
|
|
|
13124
13124
|
return ConicalCanvas.ctx;
|
|
13125
13125
|
}
|
|
13126
13126
|
}
|
|
13127
|
-
class ColorInterpolate {
|
|
13127
|
+
class ColorInterpolate extends vutils.LRU {
|
|
13128
|
+
static getInstance() {
|
|
13129
|
+
if (!ColorInterpolate._instance) {
|
|
13130
|
+
ColorInterpolate._instance = new ColorInterpolate();
|
|
13131
|
+
}
|
|
13132
|
+
return ColorInterpolate._instance;
|
|
13133
|
+
}
|
|
13128
13134
|
constructor(stops = [], precision = 100) {
|
|
13135
|
+
super();
|
|
13136
|
+
this.cacheParams = { CLEAN_THRESHOLD: 100, L_TIME: 1e3 };
|
|
13137
|
+
this.dataMap = new Map();
|
|
13129
13138
|
const canvas = ConicalCanvas.GetCanvas();
|
|
13130
13139
|
const conicalCtx = ConicalCanvas.GetCtx();
|
|
13131
13140
|
canvas.width = precision;
|
|
@@ -13149,25 +13158,21 @@
|
|
|
13149
13158
|
const rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);
|
|
13150
13159
|
return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;
|
|
13151
13160
|
}
|
|
13152
|
-
|
|
13153
|
-
let str =
|
|
13161
|
+
GetOrCreate(x, y, w, h, stops = [], precision = 100) {
|
|
13162
|
+
let str = `${x}${y}${w}${h}`;
|
|
13154
13163
|
stops.forEach(item => (str += item.join()));
|
|
13155
13164
|
str += precision;
|
|
13156
|
-
let colorInter =
|
|
13165
|
+
let colorInter = this.dataMap.get(str);
|
|
13157
13166
|
if (!colorInter) {
|
|
13158
|
-
|
|
13159
|
-
|
|
13167
|
+
const data = new ColorInterpolate(stops, precision);
|
|
13168
|
+
colorInter = { data, timestamp: [] };
|
|
13169
|
+
this.addLimitedTimestamp(colorInter, Date.now(), {});
|
|
13170
|
+
this.dataMap.set(str, colorInter);
|
|
13160
13171
|
}
|
|
13161
|
-
|
|
13162
|
-
|
|
13163
|
-
static SetColorInterpolateInstance(stops, ins) {
|
|
13164
|
-
ColorInterpolate.dataMap.set(stops, ins);
|
|
13165
|
-
}
|
|
13166
|
-
static GetColorInterpolateInstance(stops) {
|
|
13167
|
-
return ColorInterpolate.dataMap.get(stops);
|
|
13172
|
+
this.clearCache(this.dataMap, this.cacheParams);
|
|
13173
|
+
return colorInter.data;
|
|
13168
13174
|
}
|
|
13169
13175
|
}
|
|
13170
|
-
ColorInterpolate.dataMap = new Map();
|
|
13171
13176
|
class ConicalPatternStore {
|
|
13172
13177
|
static GetSize(minSize) {
|
|
13173
13178
|
for (let i = 0; i < ConicalPatternStore.ImageSize.length; i++) {
|
|
@@ -13258,7 +13263,7 @@
|
|
|
13258
13263
|
const r = Math.sqrt(Math.max(Math.max(Math.pow(x, 2) + Math.pow(y, 2), Math.pow(width - x, 2) + Math.pow(y, 2)), Math.max(Math.pow(width - x, 2) + Math.pow(height - y, 2), Math.pow(x, 2) + Math.pow(height - y, 2))));
|
|
13259
13264
|
const stepNum = deltaDeg + 1;
|
|
13260
13265
|
const step = deltaAngle / Math.max(1, stepNum - 1);
|
|
13261
|
-
const colorInter = ColorInterpolate.GetOrCreate(stops, stepNum);
|
|
13266
|
+
const colorInter = ColorInterpolate.getInstance().GetOrCreate(x, y, width, height, stops, stepNum);
|
|
13262
13267
|
const lineWidth = (2 * Math.PI * r) / 360;
|
|
13263
13268
|
conicalCanvas.width = width;
|
|
13264
13269
|
conicalCanvas.height = height;
|