@leafer/canvas 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/canvas",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.31",
   "description": "@leafer/canvas",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,9 +19,9 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/list": "1.0.0-alpha.23"
+    "@leafer/list": "1.0.0-alpha.31"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.23"
+    "@leafer/interface": "1.0.0-alpha.31"
   }
 }

package/src/Canvas.ts

@@ -0,0 +1,278 @@
+import { ICanvasAttr, ITextMetrics, ICanvasContext2D, IPath2D, IObject, InnerId, IMatrixData, IFunction, IWindingRule } from '@leafer/interface'
+
+function contextAttr(realName?: string) {
+    return (target: Canvas, key: string) => {
+        if (!realName) realName = key
+        const property: IObject & ThisType<Canvas> = {
+            get() { return (this.context as IObject)[realName] },
+            set(value: unknown) { (this.context as IObject)[realName] = value }
+        }
+        Object.defineProperty(target, key, property)
+    }
+}
+
+const contextMethodNameList: string[] = []
+function contextMethod() {
+    return (_target: Canvas, key: string) => {
+        contextMethodNameList.push(key)
+    }
+}
+
+const emptyArray: number[] = []
+
+
+export class Canvas implements ICanvasAttr {
+
+    public readonly innerId: InnerId
+
+    public width: number
+    public height: number
+
+    public context: ICanvasContext2D
+
+    // canvas attr
+
+    @contextAttr('imageSmoothingEnabled')
+    public smooth: boolean
+
+    @contextAttr('imageSmoothingQuality')
+    public smoothLevel: ImageSmoothingQuality
+
+    @contextAttr('globalAlpha')
+    public opacity: number
+
+    @contextAttr('globalCompositeOperation')
+    public blendMode: string
+
+
+    @contextAttr()
+    public fillStyle: string | object
+
+    @contextAttr()
+    public strokeStyle: string | object
+
+
+    @contextAttr('lineWidth')
+    public strokeWidth: number
+
+    @contextAttr('lineCap')
+    public strokeCap: string
+
+    @contextAttr('lineJoin')
+    public strokeJoin: string
+
+    public set dashPattern(value: number[]) {
+        this.context.setLineDash(value || emptyArray)
+    }
+    public get dashPattern(): number[] {
+        return this.context.getLineDash()
+    }
+
+    @contextAttr('lineDashOffset')
+    public dashOffset: number
+
+    @contextAttr()
+    public miterLimit: number
+
+
+    @contextAttr()
+    public shadowBlur: number
+
+    @contextAttr()
+    public shadowColor: string
+
+    @contextAttr()
+    public shadowOffsetX: number
+
+    @contextAttr()
+    public shadowOffsetY: number
+
+    @contextAttr()
+    public filter: string
+
+
+    @contextAttr()
+    public font: string
+
+    @contextAttr()
+    public fontKerning: string
+
+    @contextAttr()
+    public fontStretch: string
+
+    @contextAttr()
+    public fontVariantCaps: string
+
+
+    @contextAttr()
+    public textAlign: string
+
+    @contextAttr()
+    public textBaseline: string
+
+    @contextAttr()
+    public textRendering: string
+
+    @contextAttr()
+    public wordSpacing: string
+
+    @contextAttr()
+    public letterSpacing: string
+
+
+    @contextAttr()
+    public direction: string
+
+    // end
+
+    public __bindContext(): void {
+        let method: IFunction
+        contextMethodNameList.forEach(name => {
+            method = (this.context as IObject)[name]
+            if (method) (this as IObject)[name] = method.bind(this.context)
+        })
+    }
+
+    // canvas method
+
+    @contextMethod()
+    public setTransform(_a: number | IMatrixData, _b?: number, _c?: number, _d?: number, _e?: number, _f?: number): void { }
+
+    @contextMethod()
+    public resetTransform(): void { }
+
+    @contextMethod()
+    public getTransform(): IMatrixData { return void 0 }
+
+    @contextMethod()
+    public save(): void { }
+
+    @contextMethod()
+    public restore(): void { }
+
+    @contextMethod()
+    public transform(_a: number, _b: number, _c: number, _d: number, _e: number, _f: number): void { }
+
+    @contextMethod()
+    public translate(_x: number, _y: number): void { }
+
+    @contextMethod()
+    public scale(_x: number, _y: number): void { }
+
+    @contextMethod()
+    public rotate(_angle: number): void { }
+
+    @contextMethod()
+    public fill(_path2d?: IPath2D | IWindingRule, _rule?: IWindingRule): void { }
+
+    @contextMethod()
+    public stroke(_path2d?: IPath2D): void { }
+
+    @contextMethod()
+    public clip(_path2d?: IPath2D | IWindingRule, _rule?: IWindingRule): void { }
+
+    @contextMethod()
+    public fillRect(_x: number, _y: number, _width: number, _height: number): void { }
+
+    @contextMethod()
+    public strokeRect(_x: number, _y: number, _width: number, _height: number): void { }
+
+    @contextMethod()
+    public clearRect(_x: number, _y: number, _width: number, _height: number): void { }
+
+    public drawImage(image: CanvasImageSource, sx: number, sy: number, sw?: number, sh?: number, dx?: number, dy?: number, dw?: number, dh?: number): void {
+        switch (arguments.length) {
+            case 9:
+
+                // safari: drawimage裁剪画布外的坐标会有问题, 必须是不小于0的坐标点
+                if (sx < 0) {
+                    const d = (-sx / sw) * dw
+                    sw += sx
+                    sx = 0
+                    dx += d
+                    dw -= d
+                }
+
+                if (sy < 0) {
+                    const d = (-sy / sh) * dh
+                    sh += sy
+                    sy = 0
+                    dy += d
+                    dh -= d
+                }
+
+                this.context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
+                break
+            case 5:
+                this.context.drawImage(image, sx, sy, sw, sh) // = dx, dy, dw, dh
+                break
+            case 3:
+                this.context.drawImage(image, sx, sy)
+        }
+    }
+
+
+    // canvas draw
+    @contextMethod()
+    public beginPath(): void { }
+
+    @contextMethod()
+    public moveTo(_x: number, _y: number): void { }
+
+    @contextMethod()
+    public lineTo(_x: number, _y: number): void { }
+
+    @contextMethod()
+    public bezierCurveTo(_cp1x: number, _cp1y: number, _cp2x: number, _cp2y: number, _x: number, _y: number): void { }
+
+    @contextMethod()
+    public quadraticCurveTo(_cpx: number, _cpy: number, _x: number, _y: number): void { }
+
+    @contextMethod()
+    public closePath(): void { }
+
+    @contextMethod()
+    public arc(_x: number, _y: number, _radius: number, _startAngle: number, _endAngle: number, _anticlockwise?: boolean): void { }
+
+    @contextMethod()
+    public arcTo(_x1: number, _y1: number, _x2: number, _y2: number, _radius: number): void { }
+
+    @contextMethod()
+    public ellipse(_x: number, _y: number, _radiusX: number, _radiusY: number, _rotation: number, _startAngle: number, _endAngle: number, _anticlockwise?: boolean): void { }
+
+    @contextMethod()
+    public rect(_x: number, _y: number, _width: number, _height: number): void { }
+
+    @contextMethod()
+    public roundRect(_x: number, _y: number, _width: number, _height: number, _radius?: number | number[]): void { }
+
+    // end canvas draw
+
+    // paint
+
+    @contextMethod()
+    public createConicGradient(_startAngle: number, _x: number, _y: number): CanvasGradient { return void 0 }
+
+    @contextMethod()
+    public createLinearGradient(_x0: number, _y0: number, _x1: number, _y1: number): CanvasGradient { return void 0 }
+
+    @contextMethod()
+    public createPattern(_image: CanvasImageSource, _repetition: string | null): CanvasPattern | null { return void 0 }
+
+    @contextMethod()
+    public createRadialGradient(_x0: number, _y0: number, _r0: number, _x1: number, _y1: number, _r1: number): CanvasGradient { return void 0 }
+
+    // text
+    @contextMethod()
+    public fillText(_text: string, _x: number, _y: number, _maxWidth?: number): void { }
+
+    @contextMethod()
+    public measureText(_text: string): ITextMetrics { return void 0 }
+
+    @contextMethod()
+    public strokeText(_text: string, _x: number, _y: number, _maxWidth?: number): void { }
+
+    public destroy(): void {
+        this.context = null
+    }
+}

package/src/CanvasManager.ts

@@ -17,6 +17,7 @@ export class CanvasManager implements ICanvasManager {
             old = list[i]
             if (old.recycled && old.isSameSize(size)) {
                 old.recycled = false
+                old.manager || (old.manager = this)
                 return old
             }
         }

package/src/LeaferCanvasBase.ts

@@ -0,0 +1,301 @@
+import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule } from '@leafer/interface'
+import { Bounds, BoundsHelper, IncrementId } from '@leafer/math'
+import { Creator, Platform } from '@leafer/platform'
+import { DataHelper } from '@leafer/data'
+
+import { Canvas } from './Canvas'
+
+
+const temp = new Bounds()
+const minSize: IScreenSizeData = { width: 1, height: 1, pixelRatio: 1 }
+
+export const canvasSizeAttrs = ['width', 'height', 'pixelRatio']
+
+export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
+
+    public readonly innerId: InnerId
+
+    public name: string
+
+    public manager: ICanvasManager
+
+    public pixelRatio: number
+    public get pixelWidth(): number { return this.width * this.pixelRatio }
+    public get pixelHeight(): number { return this.height * this.pixelRatio }
+    public get allowBackgroundColor(): boolean { return this.view && this.parentView && !this.offscreen }
+
+    public bounds: IBounds
+
+    public config: ILeaferCanvasConfig
+
+    public autoLayout: boolean
+
+    public view: unknown
+    public parentView: unknown
+
+    public unreal?: boolean
+
+    public offscreen: boolean
+
+    public recycled?: boolean
+
+    public worldTransform: IMatrixData = {} as IMatrixData
+
+    protected savedBlendMode: string
+
+    constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
+        super()
+        if (!config) config = minSize
+        if (!config.pixelRatio) config.pixelRatio = devicePixelRatio
+
+        this.manager = manager
+        this.innerId = IncrementId.create(IncrementId.CNAVAS)
+
+        const { width, height, pixelRatio } = config
+        this.autoLayout = !width || !height
+
+        this.pixelRatio = pixelRatio
+        this.offscreen = Platform.isWorker || config.offscreen
+        this.config = config
+
+        this.init()
+
+        this.textBaseline = "alphabetic"
+    }
+
+    public init(): void { }
+    public setBackgroundColor(_color: string): void { }
+    public setHittable(_hittable: boolean): void { }
+
+    public resize(size: IScreenSizeData): void {
+        const { width, height } = size
+        if (this.isSameSize(size)) return
+
+        let takeCanvas: ILeaferCanvas
+        if (this.context && !this.unreal && this.width) {
+            takeCanvas = this.getSameCanvas()
+            takeCanvas.copyWorld(this)
+        }
+
+        DataHelper.copyAttrs(this, size, canvasSizeAttrs)
+        this.bounds = new Bounds(0, 0, width, height)
+
+        if (!this.unreal) {
+            this.setViewSize(size)
+            this.smooth = this.config.smooth
+        }
+
+        if (this.context && !this.unreal && takeCanvas) {
+            this.clearWorld(takeCanvas.bounds)
+            this.copyWorld(takeCanvas)
+            takeCanvas.recycle()
+        }
+    }
+
+    public setViewSize(_size: IScreenSizeData): void { }
+    public startAutoLayout(_autoBounds: IAutoBounds, _listener: IResizeEventListener): void { }
+    public stopAutoLayout(): void { }
+
+    public setWorld(matrix: IMatrixData, parentMatrix?: IMatrixData, onlyTranslate?: boolean): void {
+        const { pixelRatio } = this
+        const w = this.worldTransform
+        if (parentMatrix) {
+
+            if (onlyTranslate) {
+                this.setTransform(
+                    w.a = matrix.a * pixelRatio,
+                    w.b = matrix.b * pixelRatio,
+                    w.c = matrix.c * pixelRatio,
+                    w.d = matrix.d * pixelRatio,
+                    w.e = (matrix.e + parentMatrix.e) * pixelRatio,
+                    w.f = (matrix.f + parentMatrix.f) * pixelRatio
+                )
+            } else {
+                const { a, b, c, d, e, f } = parentMatrix
+                this.setTransform(
+                    w.a = ((matrix.a * a) + (matrix.b * c)) * pixelRatio,
+                    w.b = ((matrix.a * b) + (matrix.b * d)) * pixelRatio,
+                    w.c = ((matrix.c * a) + (matrix.d * c)) * pixelRatio,
+                    w.d = ((matrix.c * b) + (matrix.d * d)) * pixelRatio,
+                    w.e = (((matrix.e * a) + (matrix.f * c) + e)) * pixelRatio,
+                    w.f = (((matrix.e * b) + (matrix.f * d) + f)) * pixelRatio
+                )
+            }
+
+        } else {
+
+            this.setTransform(
+                w.a = matrix.a * pixelRatio,
+                w.b = matrix.b * pixelRatio,
+                w.c = matrix.c * pixelRatio,
+                w.d = matrix.d * pixelRatio,
+                w.e = matrix.e * pixelRatio,
+                w.f = matrix.f * pixelRatio
+            )
+        }
+    }
+
+    public setStroke(color: string | object, strokeWidth: number, options?: ICanvasStrokeOptions): void {
+        if (strokeWidth) this.strokeWidth = strokeWidth
+        if (color) this.strokeStyle = color
+        if (options) this.setStrokeOptions(options)
+    }
+
+    public setStrokeOptions(options: ICanvasStrokeOptions): void {
+        this.strokeCap = options.strokeCap
+        this.strokeJoin = options.strokeJoin
+        this.dashPattern = options.dashPattern
+        this.dashOffset = options.dashOffset
+        this.miterLimit = options.miterLimit
+    }
+
+    public saveBlendMode(blendMode: string): void {
+        this.savedBlendMode = this.blendMode
+        this.blendMode = blendMode
+    }
+
+    public restoreBlendMode(): void {
+        this.blendMode = this.savedBlendMode
+    }
+
+    public hitFill(point: IPointData, fillRule?: IWindingRule): boolean {
+        return this.context.isPointInPath(point.x, point.y, fillRule)
+    }
+
+    public hitStroke(point: IPointData, strokeWidth?: number): boolean {
+        this.strokeWidth = strokeWidth
+        return this.context.isPointInStroke(point.x, point.y)
+    }
+
+
+    public setWorldShadow(x: number, y: number, blur: number, color?: string): void {
+        const { pixelRatio } = this
+        this.shadowOffsetX = x * pixelRatio
+        this.shadowOffsetY = y * pixelRatio
+        this.shadowBlur = blur * pixelRatio
+        this.shadowColor = color || 'black'
+    }
+
+    public setWorldBlur(blur: number): void {
+        const { pixelRatio } = this
+        this.filter = `blur(${blur * pixelRatio}px)`
+    }
+
+
+    public copyWorld(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: string): void {
+        if (blendMode) this.blendMode = blendMode
+        if (from) {
+            const { pixelRatio } = this
+            if (!to) to = from
+            this.drawImage(canvas.view as HTMLCanvasElement, from.x * pixelRatio, from.y * pixelRatio, from.width * pixelRatio, from.height * pixelRatio, to.x * pixelRatio, to.y * pixelRatio, to.width * pixelRatio, to.height * pixelRatio)
+        } else {
+            this.drawImage(canvas.view as HTMLCanvasElement, 0, 0)
+        }
+        if (blendMode) this.blendMode = 'source-over'
+    }
+
+    public copyWorldToInner(canvas: ILeaferCanvas, fromWorld: IMatrixWithBoundsData, toInnerBounds: IBoundsData, blendMode?: string): void {
+        if (blendMode) this.blendMode = blendMode
+        if (fromWorld.b || fromWorld.c) {
+            this.save()
+            this.resetTransform()
+            this.copyWorld(canvas, fromWorld, BoundsHelper.tempToOuterOf(toInnerBounds, fromWorld))
+            this.restore()
+        } else {
+            const { pixelRatio } = this
+            this.drawImage(canvas.view as HTMLCanvasElement, fromWorld.x * pixelRatio, fromWorld.y * pixelRatio, fromWorld.width * pixelRatio, fromWorld.height * pixelRatio, toInnerBounds.x, toInnerBounds.y, toInnerBounds.width, toInnerBounds.height)
+        }
+        if (blendMode) this.blendMode = 'source-over'
+    }
+
+    public useMask(maskCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void {
+        this.copyWorld(maskCanvas, fromBounds, toBounds, 'destination-in')
+    }
+
+    public fillWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
+        if (blendMode) this.blendMode = blendMode
+        this.fillStyle = color
+        temp.copy(bounds).scale(this.pixelRatio)
+        this.fillRect(temp.x, temp.y, temp.width, temp.height)
+        if (blendMode) this.blendMode = 'source-over'
+    }
+
+    public strokeWorld(bounds: IBoundsData, color: string | object, blendMode?: string): void {
+        if (blendMode) this.blendMode = blendMode
+        this.strokeStyle = color
+        temp.copy(bounds).scale(this.pixelRatio)
+        this.strokeRect(temp.x, temp.y, temp.width, temp.height)
+        if (blendMode) this.blendMode = 'source-over'
+    }
+
+    public clearWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
+        temp.copy(bounds).scale(this.pixelRatio)
+        if (ceilPixel) temp.ceil()
+        this.clearRect(temp.x, temp.y, temp.width, temp.height)
+    }
+
+    public clipWorld(bounds: IBoundsData, ceilPixel?: boolean): void {
+        this.beginPath()
+        temp.copy(bounds).scale(this.pixelRatio)
+        if (ceilPixel) temp.ceil()
+        this.rect(temp.x, temp.y, temp.width, temp.height)
+        this.clip()
+
+    }
+
+    public clear(): void {
+        const { pixelRatio } = this
+        this.clearRect(0, 0, this.width * pixelRatio, this.height * pixelRatio)
+    }
+
+
+    // other
+
+    public isSameSize(size: IScreenSizeData): boolean {
+        return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio
+    }
+
+    // 需要有 manager变量
+    public getSameCanvas(useSameWorldTransform?: boolean): ILeaferCanvas {
+        const { width, height, pixelRatio } = this
+
+        const options = { width, height, pixelRatio }
+        const canvas = this.manager ? this.manager.get(options) : Creator.canvas(options)
+
+        canvas.save()
+
+        if (useSameWorldTransform) {
+            const w = this.worldTransform
+            canvas.setTransform(w.a, w.b, w.c, w.d, w.e, w.f)
+        }
+
+        return canvas
+    }
+
+    public getBiggerCanvas(addWidth: number, addHeight: number): ILeaferCanvas {
+        let { width, height, pixelRatio } = this
+        if (addWidth) width += addWidth
+        if (addHeight) height += addHeight
+
+        const options = { width, height, pixelRatio }
+        const canvas = this.manager ? this.manager.get(options) : Creator.canvas(options)
+
+        canvas.save()
+        return canvas
+    }
+
+    public recycle(): void {
+        this.restore()
+        this.manager ? this.manager.recycle(this) : this.destroy()
+    }
+
+    public unrealCanvas(): void { }
+
+    public destroy(): void {
+        this.manager = null
+        this.view = null
+        this.parentView = null
+        this.context = null
+        this.config = null
+    }
+}

package/src/index.ts

@@ -1,2 +1,4 @@
 export { CanvasManager } from './CanvasManager'
 export { HitCanvasManager } from './HitCanvasManager'
+export { LeaferCanvasBase, canvasSizeAttrs } from './LeaferCanvasBase'
+