@visactor/vrender 0.9.0-alpha.0

package/es/canvas/contributions/browser/canvas.js

@@ -0,0 +1,139 @@
+var __decorate = this && this.__decorate || function(decorators, target, key, desc) {
+    var d, c = arguments.length, r = c < 3 ? target : null === desc ? desc = Object.getOwnPropertyDescriptor(target, key) : desc;
+    if ("object" == typeof Reflect && "function" == typeof Reflect.decorate) r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) (d = decorators[i]) && (r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r);
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}, __metadata = this && this.__metadata || function(k, v) {
+    if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
+};
+
+import { injectable } from "inversify";
+
+import { global } from "../../../modules";
+
+import { BrowserContext2d } from "./context";
+
+const DefaultConfig = {
+    WIDTH: 500,
+    HEIGHT: 500,
+    DPR: 1
+};
+
+let BrowserCanvas = class {
+    get displayWidth() {
+        return this._pixelWidth / this._dpr;
+    }
+    get displayHeight() {
+        return this._pixelHeight / this._dpr;
+    }
+    get id() {
+        return this._id;
+    }
+    get x() {
+        return this._x;
+    }
+    get y() {
+        return this._y;
+    }
+    get nativeCanvas() {
+        return this._nativeCanvas;
+    }
+    get width() {
+        return this._pixelWidth;
+    }
+    set width(width) {
+        this._pixelWidth = width, this._displayWidth = width / (this._dpr || 1);
+    }
+    get height() {
+        return this._pixelHeight;
+    }
+    set height(height) {
+        this._pixelHeight = height, this._displayHeight = height / (this._dpr || 1);
+    }
+    getContext(str) {
+        return this._context;
+    }
+    get visiable() {
+        return this._visiable;
+    }
+    set visiable(visiable) {
+        this._visiable = visiable, visiable ? this.show() : this.hide();
+    }
+    get dpr() {
+        return this._dpr;
+    }
+    set dpr(dpr) {
+        this._dpr = dpr, this.resize(this.width, this.height);
+    }
+    constructor(params) {
+        const {nativeCanvas: nativeCanvas, width: width = DefaultConfig.WIDTH, height: height = DefaultConfig.HEIGHT, dpr: dpr = DefaultConfig.DPR, container: container, x: x, y: y, canvasControled: canvasControled = !0} = params;
+        if (this._x = null != x ? x : 0, this._y = null != y ? y : 0, this._pixelWidth = width * dpr, 
+        this._pixelHeight = height * dpr, this._visiable = !1 !== params.visiable, this.controled = canvasControled, 
+        "string" == typeof container) {
+            const _c = global.getElementById(container);
+            _c && (this._container = _c);
+        } else this._container = container;
+        this._displayWidth = width, this._displayHeight = height, this._dpr = dpr, this._nativeCanvas = nativeCanvas, 
+        this._context = new BrowserContext2d(this, this._dpr), this._id = nativeCanvas.id, 
+        this.initStyle();
+    }
+    initStyle() {
+        if (!this.controled) return;
+        const {nativeCanvas: nativeCanvas} = this;
+        nativeCanvas.width = this._pixelWidth, nativeCanvas.height = this._pixelHeight;
+        !nativeCanvas.style || this.setCanvasStyle(nativeCanvas, this._x, this._y, this._displayWidth, this._displayHeight), 
+        null != this.id && (nativeCanvas.id = this.id.toString()), this._container && this._container.appendChild(nativeCanvas), 
+        this.visiable || this.hide();
+    }
+    applyPosition() {
+        const canvas = this._nativeCanvas;
+        canvas.style.position = "absolute", canvas.style.top = `${this._y}px`, canvas.style.left = `${this._x}px`;
+    }
+    getNativeCanvas() {
+        return this._nativeCanvas;
+    }
+    resetStyle(params) {
+        if (!this.controled) return;
+        const {width: width = this._displayWidth, height: height = this._displayHeight, dpr: dpr = this._dpr, x: x = this._x, y: y = this._y} = params, {nativeCanvas: nativeCanvas} = this;
+        nativeCanvas.width = width * dpr, nativeCanvas.height = height * dpr;
+        !nativeCanvas.style || this.setCanvasStyle(nativeCanvas, x, y, width, height), params.id && (nativeCanvas.id = params.id), 
+        this.visiable || this.hide();
+    }
+    setCanvasStyle(canvas, x, y, w, h) {
+        this.controled && (canvas.style.padding = "0", canvas.style.margin = "0", canvas.style.border = "0", 
+        canvas.style.background = "transparent", canvas.style.width = `${w}px`, canvas.style.height = `${h}px`);
+    }
+    hide() {
+        this._nativeCanvas && (this._nativeCanvas.style.display = "none");
+    }
+    show() {
+        this._nativeCanvas && (this._nativeCanvas.style.display = "block");
+    }
+    resize(width, height) {
+        if (!this.controled) return;
+        this._pixelWidth = width * this._dpr, this._pixelHeight = height * this._dpr, this._displayWidth = width, 
+        this._displayHeight = height, this._nativeCanvas.style && (this._nativeCanvas.style.width = `${width}px`, 
+        this._nativeCanvas.style.height = `${height}px`), this._nativeCanvas.width = this._pixelWidth, 
+        this._nativeCanvas.height = this._pixelHeight;
+        this._context.dpr = this._dpr;
+    }
+    toDataURL(mimeType, quality) {
+        return "image/jpeg" === mimeType ? this._nativeCanvas.toDataURL(mimeType, quality) : "image/png" === mimeType ? this._nativeCanvas.toDataURL(mimeType) : this._nativeCanvas.toDataURL(mimeType, quality);
+    }
+    readPixels(x, y, w, h) {
+        return this._context.getImageData(x, y, w, h);
+    }
+    convertToBlob(options) {
+        throw new Error("暂未实现");
+    }
+    transferToImageBitmap() {
+        throw new Error("暂未实现");
+    }
+    release(...params) {
+        this.controled && this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);
+    }
+};
+
+BrowserCanvas.env = "browser", BrowserCanvas = __decorate([ injectable(), __metadata("design:paramtypes", [ Object ]) ], BrowserCanvas);
+
+export { BrowserCanvas };
+//# sourceMappingURL=canvas.js.map

package/es/canvas/contributions/browser/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/contributions/browser/canvas.ts"],"names":[],"mappings":"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","file":"canvas.js","sourcesContent":["import { injectable } from 'inversify';\nimport { global } from '../../../modules';\nimport { CanvasConfigType, ICanvas, IContext2d, EnvType } from '../../../interface';\nimport { BrowserContext2d } from './context';\n\nconst DefaultConfig = {\n  WIDTH: 500,\n  HEIGHT: 500,\n  DPR: 1\n};\n\n@injectable()\nexport class BrowserCanvas implements ICanvas {\n  static env: EnvType = 'browser';\n  // 显示的宽高，如果是离屏canvas，就是pixelWidth / pixelRatio\n  private _displayWidth: number; // 显示的宽度\n  private _displayHeight: number; // 显示的高度\n  private _id: number | string;\n  // 像素宽高\n  private _pixelWidth: number; // 像素宽度\n  private _pixelHeight: number; // 像素高度\n\n  private _x: number;\n  private _y: number;\n  private _dpr: number;\n\n  private _container?: HTMLElement | null;\n  private _nativeCanvas: HTMLCanvasElement;\n  private _context: IContext2d;\n  private _visiable: boolean;\n  private controled: boolean;\n\n  get displayWidth(): number {\n    return this._pixelWidth / this._dpr;\n  }\n\n  get displayHeight(): number {\n    return this._pixelHeight / this._dpr;\n  }\n\n  get id(): number | string {\n    return this._id;\n  }\n  get x(): number {\n    return this._x;\n  }\n  get y(): number {\n    return this._y;\n  }\n  get nativeCanvas(): HTMLCanvasElement {\n    return this._nativeCanvas;\n  }\n\n  get width(): number {\n    return this._pixelWidth;\n  }\n  set width(width: number) {\n    this._pixelWidth = width;\n    this._displayWidth = width / (this._dpr || 1);\n  }\n\n  get height(): number {\n    return this._pixelHeight;\n  }\n  set height(height: number) {\n    this._pixelHeight = height;\n    this._displayHeight = height / (this._dpr || 1);\n  }\n  getContext(str?: string): IContext2d {\n    return this._context;\n  }\n\n  get visiable(): boolean {\n    return this._visiable;\n  }\n  set visiable(visiable: boolean) {\n    this._visiable = visiable;\n    visiable ? this.show() : this.hide();\n  }\n\n  get dpr(): number {\n    return this._dpr;\n  }\n  set dpr(dpr: number) {\n    // this._lastPixelRatio = this._pixelRatio;\n    this._dpr = dpr;\n    this.resize(this.width, this.height);\n  }\n\n  /**\n   * 通过canvas生成一个wrap对象，初始化时不会再设置canvas的属性\n   * @param params\n   */\n  constructor(params: CanvasConfigType) {\n    const {\n      nativeCanvas,\n      width = DefaultConfig.WIDTH,\n      height = DefaultConfig.HEIGHT,\n      dpr = DefaultConfig.DPR,\n      container,\n      x,\n      y,\n      canvasControled = true\n    } = params;\n    // const data = nativeCanvas.getBoundingClientRect ? nativeCanvas.getBoundingClientRect() : { x: 0, y: 0 };\n    // const offsetX = nativeCanvas.offsetLeft ?? 0;\n    // const offsetY = nativeCanvas.offsetTop ?? 0;\n    const offsetX = 0;\n    const offsetY = 0;\n    this._x = x ?? offsetX;\n    this._y = y ?? offsetY;\n    this._pixelWidth = width * dpr;\n    this._pixelHeight = height * dpr;\n    this._visiable = params.visiable !== false;\n    this.controled = canvasControled;\n    if (typeof container === 'string') {\n      const _c = global.getElementById(container);\n      if (_c) {\n        this._container = _c;\n      }\n    } else {\n      this._container = container;\n    }\n\n    // 离屏canvas\n    this._displayWidth = width;\n    this._displayHeight = height;\n    this._dpr = dpr;\n    this._nativeCanvas = nativeCanvas;\n    this._context = new BrowserContext2d(this, this._dpr);\n    this._id = nativeCanvas.id;\n\n    this.initStyle();\n  }\n\n  initStyle() {\n    if (!this.controled) {\n      return;\n    }\n    const { nativeCanvas } = this;\n    nativeCanvas.width = this._pixelWidth;\n    nativeCanvas.height = this._pixelHeight;\n\n    const isOffscreen = !nativeCanvas.style;\n    if (!isOffscreen) {\n      this.setCanvasStyle(nativeCanvas, this._x, this._y, this._displayWidth, this._displayHeight);\n    }\n    if (this.id != null) {\n      nativeCanvas.id = this.id.toString();\n    }\n    if (this._container) {\n      this._container.appendChild(nativeCanvas);\n    }\n    if (!this.visiable) {\n      this.hide();\n    }\n    // this._context.setScale(this.dpr, this.dpr, true);\n  }\n\n  applyPosition() {\n    const canvas = this._nativeCanvas;\n    canvas.style.position = 'absolute';\n    canvas.style.top = `${this._y}px`;\n    canvas.style.left = `${this._x}px`;\n  }\n\n  getNativeCanvas(): HTMLCanvasElement {\n    return this._nativeCanvas;\n  }\n\n  resetStyle(params: Partial<CanvasConfigType>) {\n    if (!this.controled) {\n      return;\n    }\n    const {\n      width = this._displayWidth,\n      height = this._displayHeight,\n      dpr = this._dpr,\n      x = this._x,\n      y = this._y\n    } = params;\n    const { nativeCanvas } = this;\n    nativeCanvas.width = width * dpr;\n    nativeCanvas.height = height * dpr;\n\n    const isOffscreen = !nativeCanvas.style;\n    if (!isOffscreen) {\n      this.setCanvasStyle(nativeCanvas, x, y, width, height);\n    }\n    params.id && (nativeCanvas.id = params.id);\n    if (!this.visiable) {\n      this.hide();\n    }\n    // this._context.setScale(dpr, dpr);\n  }\n\n  private setCanvasStyle(canvas: HTMLCanvasElement, x: number, y: number, w: number, h: number) {\n    if (!this.controled) {\n      return;\n    }\n    canvas.style.padding = '0';\n    canvas.style.margin = '0';\n    canvas.style.border = '0';\n    canvas.style.background = 'transparent';\n    // canvas.style.position = 'absolute';\n    // canvas.style.top = `${y}px`;\n    // canvas.style.left = `${x}px`;\n\n    canvas.style.width = `${w}px`;\n    canvas.style.height = `${h}px`;\n  }\n\n  hide() {\n    this._nativeCanvas && (this._nativeCanvas.style.display = 'none');\n  }\n  show() {\n    this._nativeCanvas && (this._nativeCanvas.style.display = 'block');\n  }\n\n  /**\n   * 设置canvas的size大小，设置context的scale\n   * @param width\n   * @param height\n   */\n  resize(width: number, height: number) {\n    if (!this.controled) {\n      return;\n    }\n    // 设置Canvas的w和h\n    this._pixelWidth = width * this._dpr;\n    this._pixelHeight = height * this._dpr;\n    this._displayWidth = width;\n    this._displayHeight = height;\n    // 可能是离屏canvas\n    if (this._nativeCanvas.style) {\n      this._nativeCanvas.style.width = `${width}px`;\n      this._nativeCanvas.style.height = `${height}px`;\n    }\n    this._nativeCanvas.width = this._pixelWidth;\n    this._nativeCanvas.height = this._pixelHeight;\n\n    // 设置context的dpr\n    const _context = this._context;\n    _context.dpr = this._dpr;\n    // _context.setScale(this._dpr, this._dpr);\n  }\n\n  toDataURL(): string;\n  toDataURL(mimeType: 'image/png'): string;\n  toDataURL(mimeType: 'image/jpeg', quality: number): string;\n  toDataURL(mimeType?: string, quality?: number) {\n    if (mimeType === 'image/jpeg') {\n      return this._nativeCanvas.toDataURL(mimeType, quality);\n    } else if (mimeType === 'image/png') {\n      return this._nativeCanvas.toDataURL(mimeType);\n    }\n    return this._nativeCanvas.toDataURL(mimeType, quality);\n  }\n\n  readPixels(x: number, y: number, w: number, h: number): ImageData | Promise<ImageData> {\n    return this._context.getImageData(x, y, w, h);\n  }\n\n  convertToBlob(options?: { type?: string | undefined; quality?: number | undefined } | undefined): Promise<Blob> {\n    throw new Error('暂未实现');\n  }\n\n  transferToImageBitmap(): ImageBitmap {\n    throw new Error('暂未实现');\n  }\n\n  release(...params: any): void {\n    if (this.controled) {\n      this._nativeCanvas.parentElement && this._nativeCanvas.parentElement.removeChild(this._nativeCanvas);\n    }\n  }\n}\n"]}

package/es/canvas/contributions/browser/conical-gradient.d.ts

@@ -0,0 +1,13 @@
+import { IContext2d } from '../../../interface';
+import { IConicalGradient } from '../../../interface/color';
+export declare class ColorInterpolate {
+    private readonly rgbaSet;
+    constructor(stops?: [number, string][], precision?: number);
+    getColor(offset: number): string;
+    static dataMap: Map<string, ColorInterpolate>;
+    static GetOrCreate(stops?: [number, string][], precision?: number): ColorInterpolate;
+    static SetColorInterpolateInstance(stops: string, ins: ColorInterpolate): void;
+    static GetColorInterpolateInstance(stops: string): ColorInterpolate | undefined;
+}
+export declare function getConicGradientAt(x: number, y: number, angle: number, color: IConicalGradient): string | false | import("../../../interface").IGradientColor;
+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;

package/es/canvas/contributions/browser/conical-gradient.js

@@ -0,0 +1,120 @@
+import { global } from "../../../modules";
+
+import { interpolateColor } from "../../../color-string/interpolate";
+
+import { pi2 } from "@visactor/vutils";
+
+class ConicalCanvas {
+    static GetCanvas() {
+        try {
+            return ConicalCanvas.canvas || (ConicalCanvas.canvas = global.createCanvas({})), 
+            ConicalCanvas.canvas;
+        } catch (err) {
+            return null;
+        }
+    }
+    static GetCtx() {
+        if (!ConicalCanvas.ctx) {
+            const conicalCanvas = ConicalCanvas.GetCanvas();
+            ConicalCanvas.ctx = conicalCanvas.getContext("2d");
+        }
+        return ConicalCanvas.ctx;
+    }
+}
+
+export class ColorInterpolate {
+    constructor(stops = [], precision = 100) {
+        const canvas = ConicalCanvas.GetCanvas(), conicalCtx = ConicalCanvas.GetCtx();
+        if (canvas.width = precision, canvas.height = 1, !conicalCtx) return;
+        if (conicalCtx.translate(0, 0), !conicalCtx) throw new Error("获取ctx发生错误");
+        const gradient = conicalCtx.createLinearGradient(0, 0, precision, 0);
+        stops.forEach((stop => {
+            gradient.addColorStop(stop[0], stop[1]);
+        })), conicalCtx.fillStyle = gradient, conicalCtx.fillRect(0, 0, precision, 1), this.rgbaSet = conicalCtx.getImageData(0, 0, precision, 1).data;
+    }
+    getColor(offset) {
+        const rgba = this.rgbaSet.slice(4 * offset, 4 * offset + 4);
+        return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3] / 255})`;
+    }
+    static GetOrCreate(stops = [], precision = 100) {
+        let str = "";
+        stops.forEach((item => str += item.join())), str += precision;
+        let colorInter = ColorInterpolate.dataMap.get(str);
+        return colorInter || (colorInter = new ColorInterpolate(stops, precision), ColorInterpolate.dataMap.set(str, colorInter)), 
+        colorInter;
+    }
+    static SetColorInterpolateInstance(stops, ins) {
+        ColorInterpolate.dataMap.set(stops, ins);
+    }
+    static GetColorInterpolateInstance(stops) {
+        return ColorInterpolate.dataMap.get(stops);
+    }
+}
+
+ColorInterpolate.dataMap = new Map;
+
+class ConicalImageDataStore {
+    static GetSize(minSize) {
+        for (let i = 0; i < ConicalImageDataStore.ImageSize.length; i++) if (ConicalImageDataStore.ImageSize[i] >= minSize) return ConicalImageDataStore.ImageSize[i];
+        return minSize;
+    }
+    static Get(stops, x, y, startAngle, endAngle, w, h) {
+        const key = ConicalImageDataStore.GenKey(stops, x, y, startAngle, endAngle), data = ConicalImageDataStore.cache[key];
+        if (!data || 0 === data.length) return null;
+        for (let i = 0; i < data.length; i++) if (data[i].width >= w && data[i].height >= h) return data[i].imageData;
+        return null;
+    }
+    static Set(stops, x, y, startAngle, endAngle, imageData, w, h) {
+        const key = ConicalImageDataStore.GenKey(stops, x, y, startAngle, endAngle);
+        ConicalImageDataStore.cache[key] ? ConicalImageDataStore.cache[key].push({
+            width: w,
+            height: h,
+            imageData: imageData
+        }) : ConicalImageDataStore.cache[key] = [ {
+            width: w,
+            height: h,
+            imageData: imageData
+        } ];
+    }
+    static GenKey(stops, x, y, startAngle, endAngle) {
+        return `${x},${y},${startAngle},${endAngle},${stops.join()}`;
+    }
+}
+
+ConicalImageDataStore.cache = {}, ConicalImageDataStore.ImageSize = [ 20, 40, 80, 160, 320, 640, 1280, 2560 ];
+
+export function getConicGradientAt(x, y, angle, color) {
+    const {stops: stops, startAngle: startAngle, endAngle: endAngle} = color;
+    for (;angle < 0; ) angle += pi2;
+    for (;angle > pi2; ) angle -= pi2;
+    if (angle < startAngle) return stops[0].color;
+    if (angle > endAngle) return stops[0].color;
+    let startStop, endStop, percent = (angle - startAngle) / (endAngle - startAngle);
+    for (let i = 0; i < stops.length; i++) if (stops[i].offset >= percent) {
+        startStop = stops[i - 1], endStop = stops[i];
+        break;
+    }
+    return percent = (percent - startStop.offset) / (endStop.offset - startStop.offset), 
+    interpolateColor(startStop.color, endStop.color, percent, !1);
+}
+
+export function createConicalGradient(context, stops, x, y, deltaAngle, startAngle, endAngle, minW, minH) {
+    const deltaDeg = Math.floor(180 * deltaAngle / Math.PI), conicalCanvas = ConicalCanvas.GetCanvas(), conicalCtx = ConicalCanvas.GetCtx();
+    if (!conicalCtx) return null;
+    const width = ConicalImageDataStore.GetSize(minW), height = ConicalImageDataStore.GetSize(minH);
+    let imageData = ConicalImageDataStore.Get(stops, x, y, startAngle, endAngle, width, height);
+    if (imageData) return conicalCanvas.width = imageData.width, conicalCanvas.height = imageData.height, 
+    conicalCtx.putImageData(imageData, 0, 0), context.createPattern(conicalCanvas, "no-repeat");
+    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;
+    conicalCanvas.width = width, conicalCanvas.height = height, conicalCtx.setTransform(1, 0, 0, 1, 0, 0), 
+    conicalCtx.clearRect(0, 0, width, height), conicalCtx.translate(x, y), conicalCtx.rotate(startAngle);
+    for (let i = 0, len = stepNum - 1; i < len && !(startAngle + i * step > endAngle); i++) {
+        const color = colorInter.getColor(i);
+        conicalCtx.beginPath(), conicalCtx.rotate(step), conicalCtx.moveTo(0, 0), conicalCtx.lineTo(r, -2 * lineWidth), 
+        conicalCtx.lineTo(r, 0), conicalCtx.fillStyle = color, conicalCtx.closePath(), conicalCtx.fill();
+    }
+    return imageData = conicalCtx.getImageData(0, 0, width, height), ConicalImageDataStore.Set(stops, x, y, startAngle, endAngle, imageData, width, height), 
+    conicalCanvas.width = imageData.width, conicalCanvas.height = imageData.height, 
+    conicalCtx.putImageData(imageData, 0, 0), context.createPattern(conicalCanvas, "no-repeat");
+}
+//# sourceMappingURL=conical-gradient.js.map

package/es/canvas/contributions/browser/conical-gradient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/contributions/browser/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 */\n\nimport { global } from '../../../modules';\nimport { IContext2d } from '../../../interface';\nimport { IConicalGradient } from '../../../interface/color';\nimport { interpolateColor } from '../../../color-string/interpolate';\nimport { pi2 } from '@visactor/vutils';\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 = 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 ConicalImageDataStore {\n  private static cache: {\n    [key: string]: {\n      width: number;\n      height: number;\n      imageData: ImageData;\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 < ConicalImageDataStore.ImageSize.length; i++) {\n      if (ConicalImageDataStore.ImageSize[i] >= minSize) {\n        return ConicalImageDataStore.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  ): ImageData | null {\n    const key = ConicalImageDataStore.GenKey(stops, x, y, startAngle, endAngle);\n    const data = ConicalImageDataStore.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].imageData;\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    imageData: ImageData,\n    w: number,\n    h: number\n  ) {\n    const key = ConicalImageDataStore.GenKey(stops, x, y, startAngle, endAngle);\n    // 必然是顺序的，因为如果能get到的话就不需要set\n    if (!ConicalImageDataStore.cache[key]) {\n      ConicalImageDataStore.cache[key] = [\n        {\n          width: w,\n          height: h,\n          imageData\n        }\n      ];\n    } else {\n      ConicalImageDataStore.cache[key].push({\n        width: w,\n        height: h,\n        imageData\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 = ConicalImageDataStore.GetSize(minW);\n  const height = ConicalImageDataStore.GetSize(minH);\n  let imageData = ConicalImageDataStore.Get(stops, x, y, startAngle, endAngle, width, height);\n  if (imageData) {\n    conicalCanvas.width = imageData.width;\n    conicalCanvas.height = imageData.height;\n    conicalCtx.putImageData(imageData, 0, 0);\n    return context.createPattern(conicalCanvas, 'no-repeat');\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  imageData = conicalCtx.getImageData(0, 0, width, height);\n  ConicalImageDataStore.Set(stops, x, y, startAngle, endAngle, imageData, width, height);\n\n  conicalCanvas.width = imageData.width;\n  conicalCanvas.height = imageData.height;\n  conicalCtx.putImageData(imageData, 0, 0);\n  return context.createPattern(conicalCanvas, 'no-repeat');\n}\n"]}

package/es/canvas/contributions/browser/context.d.ts

@@ -0,0 +1,171 @@
+import { IPointLike, Matrix, TextMeasure, ITextMeasureSpec } from '@visactor/vutils';
+import { ICamera, ICanvas, ICommonStyleParams, IConicalGradientData, IContext2d, ISetCommonStyleParams, ISetStrokeStyleParams, IStrokeStyleParams, ITextStyleParams, mat4, EnvType, vec3 } from '../../../interface';
+export declare class BrowserContext2d implements IContext2d {
+    static env: EnvType;
+    drawPromise?: Promise<any>;
+    mathTextMeasure: TextMeasure<ITextMeasureSpec>;
+    canvas: ICanvas;
+    camera?: ICamera;
+    modelMatrix?: mat4;
+    nativeContext: CanvasRenderingContext2D | any;
+    _inuse: boolean;
+    stack: Matrix[];
+    disableFill?: boolean;
+    disableStroke?: boolean;
+    disableBeginPath?: boolean;
+    protected matrix: Matrix;
+    protected applyedMatrix?: Matrix;
+    fontFamily: string;
+    fontSize: number;
+    set fillStyle(d: string | CanvasGradient | CanvasPattern);
+    get fillStyle(): string | CanvasGradient | CanvasPattern;
+    set font(d: string);
+    get font(): string;
+    set globalAlpha(d: number);
+    get globalAlpha(): number;
+    set lineCap(d: CanvasLineCap);
+    get lineCap(): CanvasLineCap;
+    set lineDashOffset(d: number);
+    get lineDashOffset(): number;
+    set lineJoin(d: CanvasLineJoin);
+    get lineJoin(): CanvasLineJoin;
+    set lineWidth(d: number);
+    get lineWidth(): number;
+    set miterLimit(d: number);
+    get miterLimit(): number;
+    set shadowBlur(d: number);
+    get shadowBlur(): number;
+    set shadowColor(d: string);
+    get shadowColor(): string;
+    set shadowOffsetX(d: number);
+    get shadowOffsetX(): number;
+    set shadowOffsetY(d: number);
+    get shadowOffsetY(): number;
+    set strokeStyle(d: string | CanvasGradient | CanvasPattern);
+    get strokeStyle(): string | CanvasGradient | CanvasPattern;
+    set textAlign(d: CanvasTextAlign);
+    get textAlign(): CanvasTextAlign;
+    set textBaseline(d: CanvasTextBaseline);
+    get textBaseline(): CanvasTextBaseline;
+    get inuse(): boolean;
+    set inuse(use: boolean);
+    dpr: number;
+    constructor(canvas: ICanvas, dpr: number);
+    reset(): void;
+    getCanvas(): ICanvas;
+    getContext(): any;
+    setTransformForCurrent(force?: boolean): void;
+    get currentMatrix(): Matrix;
+    cloneMatrix(m: Matrix): import("@visactor/vutils").IMatrix;
+    clear(): void;
+    restore(): void;
+    highPerformanceRestore(): void;
+    rotate(rad: number, setTransform?: boolean): void;
+    save(): void;
+    highPerformanceSave(): void;
+    scale(sx: number, sy: number, setTransform?: boolean): void;
+    setScale(sx: number, sy: number, setTransform?: boolean): void;
+    scalePoint(sx: number, sy: number, px: number, py: number, setTransform?: boolean): void;
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number, setTransform?: boolean, dpr?: number): void;
+    setTransformFromMatrix(matrix: Matrix, setTransform?: boolean, dpr?: number): void;
+    resetTransform(setTransform?: boolean, dpr?: number): void;
+    transform(a: number, b: number, c: number, d: number, e: number, f: number, setTransform?: boolean): void;
+    transformFromMatrix(matrix: Matrix, setTransform?: boolean): void;
+    translate(x: number, y: number, setTransform?: boolean): void;
+    rotateDegrees(deg: number, setTransform?: boolean): void;
+    rotateAbout(rad: number, x: number, y: number, setTransform?: boolean): void;
+    rotateDegreesAbout(deg: number, x: number, y: number, setTransform?: boolean): void;
+    beginPath(): void;
+    clip(fillRule?: CanvasFillRule): void;
+    clip(path: Path2D, fillRule?: CanvasFillRule): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean, z?: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number, z?: number): void;
+    closePath(): void;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
+    lineTo(x: number, y: number, z: number): void;
+    moveTo(x: number, y: number, z: number): void;
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number, z: number): void;
+    rect(x: number, y: number, w: number, h: number, z: number): void;
+    createImageData(imageDataOrSw: number | ImageData, sh?: number): ImageData;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number): any;
+    createPattern(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, repetition: string): CanvasPattern;
+    createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+    createConicGradient(x: number, y: number, startAngle: number, endAngle: number): IConicalGradientData;
+    fill(path?: Path2D, fillRule?: CanvasFillRule): void;
+    fillRect(x: number, y: number, width: number, height: number): void;
+    clearRect(x: number, y: number, w: number, h: number): void;
+    project(x: number, y: number, z: number): IPointLike;
+    view(x: number, y: number, z: number): vec3;
+    fillText(text: string, x: number, y: number, z: number): void;
+    getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
+    getLineDash(): number[];
+    isPointInPath(x: number, y: number): any;
+    isPointInStroke(x: number, y: number): any;
+    measureText(text: string, method?: 'native' | 'simple' | 'quick'): {
+        width: number;
+    };
+    putImageData(imagedata: ImageData, dx: number, dy: number): void;
+    setLineDash(segments: number[]): void;
+    stroke(path?: Path2D): void;
+    strokeRect(x: number, y: number, width: number, height: number): void;
+    strokeText(text: string, x: number, y: number, z: number): void;
+    drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number): void;
+    drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number, dstW: number, dstH: number): void;
+    drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, srcX: number, srcY: number, srcW: number, srcH: number, dstX: number, dstY: number, dstW: number, dstH: number): void;
+    protected fillAttributes: {
+        opacity: number;
+        fillColor: import("../../../interface").IColor;
+        fillOpacity: number;
+        shadowBlur: number;
+        shadowColor: string;
+        shadowOffsetX: number;
+        shadowOffsetY: number;
+        fill: boolean;
+    };
+    protected strokeAttributes: {
+        opacity: number;
+        outerBorder: Partial<import("../../../interface").IBorderStyle>;
+        innerBorder: Partial<import("../../../interface").IBorderStyle>;
+        strokeColor: import("../../../interface").IColor;
+        strokeOpacity: number;
+        lineDash: number[];
+        lineDashOffset: number;
+        lineWidth: number;
+        lineCap: CanvasLineCap;
+        lineJoin: CanvasLineJoin;
+        miterLimit: number;
+        strokeBoundsBuffer: number;
+        stroke: number | boolean | boolean[];
+    };
+    protected textAttributes: {
+        opacity: number;
+        text: string | number | string[] | number[];
+        maxLineWidth: number;
+        textAlign: import("../../../interface").TextAlignType;
+        textBaseline: import("../../../interface").TextBaselineType;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: string | number;
+        ellipsis: string | boolean;
+        fontVariant: string;
+        fontStyle: string;
+        lineHeight: number;
+        underline: number;
+        lineThrough: number;
+    };
+    setCommonStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, offsetX: number, offsetY: number, defaultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]): void;
+    protected _setCommonStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, offsetX: number, offsetY: number, defaultParams?: ICommonStyleParams): void;
+    setShadowStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, defaultParams?: ICommonStyleParams | Partial<ICommonStyleParams>[]): void;
+    protected _clearShadowStyle: boolean;
+    protected _clearFilterStyle: boolean;
+    protected _setShadowStyle(params: ISetCommonStyleParams, attribute: ICommonStyleParams, defaultParams?: ICommonStyleParams): void;
+    setStrokeStyle(params: ISetStrokeStyleParams, attribute: IStrokeStyleParams, offsetX: number, offsetY: number, defaultParams?: IStrokeStyleParams | IStrokeStyleParams[]): void;
+    protected _setStrokeStyle(params: ISetStrokeStyleParams, attribute: IStrokeStyleParams, offsetX: number, offsetY: number, defaultParams?: IStrokeStyleParams): void;
+    setTextStyleWithoutAlignBaseline(params: Partial<ITextStyleParams>, defaultParams?: ITextStyleParams, z?: number): void;
+    setTextStyle(params: Partial<ITextStyleParams>, defaultParams?: ITextStyleParams, z?: number): void;
+    draw(): void;
+    clearMatrix(setTransform?: boolean, dpr?: number): void;
+    onlyTranslate(dpr?: number): boolean;
+    release(...params: any): void;
+}