@leafer/canvas 1.0.0-beta.15 → 1.0.0-beta.17

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@leafer/canvas",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "description": "@leafer/canvas",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
   "types": "types/index.d.ts",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -21,15 +22,15 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/file": "1.0.0-beta.15",
-    "@leafer/list": "1.0.0-beta.15",
-    "@leafer/math": "1.0.0-beta.15",
-    "@leafer/data": "1.0.0-beta.15",
-    "@leafer/path": "1.0.0-beta.15",
-    "@leafer/debug": "1.0.0-beta.15",
-    "@leafer/platform": "1.0.0-beta.15"
+    "@leafer/file": "1.0.0-beta.17",
+    "@leafer/list": "1.0.0-beta.17",
+    "@leafer/math": "1.0.0-beta.17",
+    "@leafer/data": "1.0.0-beta.17",
+    "@leafer/path": "1.0.0-beta.17",
+    "@leafer/debug": "1.0.0-beta.17",
+    "@leafer/platform": "1.0.0-beta.17"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.15"
+    "@leafer/interface": "1.0.0-beta.17"
   }
 }

package/src/Canvas.ts

@@ -0,0 +1,289 @@
+import { ICanvasAttr, ITextMetrics, ICanvasContext2D, IPath2D, IObject, InnerId, IMatrixData, IFunction, IWindingRule, IBlendMode } 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
+
+    public set blendMode(value: IBlendMode) {
+        if (value === 'normal') value = 'source-over'
+        this.context.globalCompositeOperation = value as any
+    }
+
+    public get blendMode(): IBlendMode {
+        return this.context.globalCompositeOperation as IBlendMode
+    }
+
+    @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)
+        })
+        this.textBaseline = "alphabetic"
+    }
+
+    // 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 { }
+
+    public transform(a: number | IMatrixData, b?: number, c?: number, d?: number, e?: number, f?: number): void {
+        if (typeof a === 'object') {
+            this.context.transform(a.a, a.b, a.c, a.d, a.e, a.f)
+        } else {
+            this.context.transform(a, b, c, d, e, f)
+        }
+    }
+
+    @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

@@ -0,0 +1,56 @@
+import { ILeaferCanvas, IScreenSizeData, ICanvasManager } from '@leafer/interface'
+import { Creator } from '@leafer/platform'
+
+export class CanvasManager implements ICanvasManager {
+
+    public list: ILeaferCanvas[] = []
+
+    public add(canvas: ILeaferCanvas): void {
+        canvas.manager = this
+        this.list.push(canvas)
+    }
+
+    public get(size: IScreenSizeData): ILeaferCanvas {
+        let old: ILeaferCanvas
+        const { list } = this
+        for (let i = 0, len = list.length; i < len; i++) {
+            old = list[i]
+            if (old.recycled && old.isSameSize(size)) {
+                old.recycled = false
+                old.manager || (old.manager = this)
+                return old
+            }
+        }
+
+        const canvas = Creator.canvas(size)
+        this.add(canvas)
+        return canvas
+    }
+
+    public recycle(old: ILeaferCanvas): void {
+        if (!old.recycled) {
+            old.clear()
+            old.recycled = true
+        }
+    }
+
+    public clearRecycled(): void {
+        let canvas: ILeaferCanvas
+        const filter: ILeaferCanvas[] = []
+        for (let i = 0, len = this.list.length; i < len; i++) {
+            canvas = this.list[i]
+            canvas.recycled ? canvas.destroy() : filter.push(canvas)
+        }
+        this.list = filter
+    }
+
+    public clear(): void {
+        this.list.forEach(item => { item.destroy() })
+        this.list.length = 0
+    }
+
+    public destroy(): void {
+        this.clear()
+    }
+
+}

package/src/HitCanvasManager.ts

@@ -0,0 +1,48 @@
+import { IScreenSizeData, IHitCanvasManager, ILeaf, IHitCanvas, ILeafList } from '@leafer/interface'
+import { LeafList } from '@leafer/list'
+import { Creator } from '@leafer/platform'
+
+import { CanvasManager } from './CanvasManager'
+
+
+export class HitCanvasManager extends CanvasManager implements IHitCanvasManager {
+
+    protected pathTypeList: ILeafList = new LeafList()
+    protected imageTypeList: ILeafList = new LeafList()
+
+    public getImageType(leaf: ILeaf, size: IScreenSizeData): IHitCanvas {
+        this.imageTypeList.push(leaf)
+        return Creator.hitCanvas(size)
+    }
+
+    public getPathType(leaf: ILeaf): IHitCanvas {
+        this.pathTypeList.push(leaf)
+        return Creator.hitCanvas()
+    }
+
+    public clearImageType(): void {
+        this.__clearLeafList(this.imageTypeList)
+    }
+
+    public clearPathType(): void {
+        this.__clearLeafList(this.pathTypeList)
+    }
+
+    protected __clearLeafList(leafList: ILeafList): void {
+        if (leafList.length) {
+            leafList.forEach(leaf => {
+                if (leaf.__hitCanvas) {
+                    leaf.__hitCanvas.destroy()
+                    leaf.__hitCanvas = null
+                }
+            })
+            leafList.reset()
+        }
+    }
+
+    public clear(): void {
+        this.clearPathType()
+        this.clearImageType()
+    }
+
+}

package/src/LeaferCanvasBase.ts

@@ -0,0 +1,366 @@
+import { IBounds, ILeaferCanvas, ICanvasStrokeOptions, ILeaferCanvasConfig, IMatrixData, IBoundsData, IAutoBounds, IScreenSizeData, IResizeEventListener, IMatrixWithBoundsData, IPointData, InnerId, ICanvasManager, IWindingRule, IBlendMode, IExportImageType, IExportFileType, IBlob, ICursorType } from '@leafer/interface'
+import { Bounds, BoundsHelper, IncrementId } from '@leafer/math'
+import { Creator, Platform } from '@leafer/platform'
+import { DataHelper } from '@leafer/data'
+import { FileHelper } from '@leafer/file'
+import { Debug } from '@leafer/debug'
+
+import { Canvas } from './Canvas'
+
+
+const temp = new Bounds()
+const minSize: IScreenSizeData = { width: 1, height: 1, pixelRatio: 1 }
+const debug = Debug.get('LeaferCanvasBase')
+
+export const canvasSizeAttrs = ['width', 'height', 'pixelRatio']
+
+export class LeaferCanvasBase extends Canvas implements ILeaferCanvas {
+
+    declare 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 }
+
+    public bounds: IBounds
+    public clientBounds: IBoundsData
+
+    public config: ILeaferCanvasConfig
+
+    public autoLayout: boolean
+
+    public view: any
+    public parentView: any
+
+    public unreal?: boolean
+
+    public recycled?: boolean
+
+    public worldTransform: IMatrixData = {} as IMatrixData
+
+    protected savedBlendMode: IBlendMode
+
+    constructor(config?: ILeaferCanvasConfig, manager?: ICanvasManager) {
+        super()
+        if (!config) config = minSize
+        if (!config.pixelRatio) config.pixelRatio = Platform.devicePixelRatio
+
+        this.manager = manager
+        this.innerId = IncrementId.create(IncrementId.CNAVAS)
+
+        const { width, height, pixelRatio } = config
+        this.autoLayout = !width || !height
+
+        this.pixelRatio = pixelRatio
+        this.config = config
+
+        this.init()
+    }
+
+    public init(): void { }
+
+    public __createContext(): void {
+        this.context = this.view.getContext('2d')
+        this.__bindContext()
+    }
+
+    public toBlob(type?: IExportFileType, quality?: number): Promise<IBlob> {
+        return new Promise((resolve) => {
+            const canvas = this.getSaveCanvas(type)
+            Platform.origin.canvasToBolb(canvas.view, type, quality).then((blob) => {
+                canvas.recycle()
+                resolve(blob)
+            }).catch((e) => {
+                debug.error(e)
+                resolve(null)
+            })
+        })
+    }
+
+    public toDataURL(type?: IExportImageType, quality?: number): string | Promise<string> {
+        const canvas = this.getSaveCanvas(type)
+        const data = Platform.origin.canvasToDataURL(canvas.view, type, quality)
+        canvas.recycle()
+        return data
+    }
+
+    public saveAs(filename: string, quality?: number): Promise<boolean> {
+        return new Promise((resolve) => {
+            const canvas = this.getSaveCanvas(FileHelper.fileType(filename))
+            Platform.origin.canvasSaveAs(canvas.view, filename, quality).then(() => {
+                canvas.recycle()
+                resolve(true)
+            }).catch((e) => {
+                debug.error(e)
+                resolve(false)
+            })
+        })
+    }
+
+    public getSaveCanvas(type: string): ILeaferCanvas {
+        const { backgroundColor, bounds } = this as ILeaferCanvas
+        const canvas = this.getSameCanvas()
+        if (['jpg', 'jpeg'].includes(type)) canvas.fillWorld(bounds, '#FFFFFF')
+        if (backgroundColor) canvas.fillWorld(bounds, backgroundColor)
+        canvas.copyWorld(this)
+        return canvas
+    }
+
+
+    public resize(size: IScreenSizeData): void {
+        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, this.width, this.height)
+        this.pixelRatio || (this.pixelRatio = 1)
+
+        if (!this.unreal) {
+            this.updateViewSize()
+            this.smooth = this.config.smooth
+        }
+
+        this.updateClientBounds()
+
+        if (this.context && !this.unreal && takeCanvas) {
+            this.clearWorld(takeCanvas.bounds)
+            this.copyWorld(takeCanvas)
+            takeCanvas.recycle()
+        }
+    }
+
+    public updateViewSize(): void { }
+    public updateClientBounds(): void { }
+
+    public startAutoLayout(_autoBounds: IAutoBounds, _listener: IResizeEventListener): void { }
+    public stopAutoLayout(): void { }
+
+    public setCursor(_cursor: ICursorType | ICursorType[]): 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 useWorldTransform(worldTransform?: IMatrixData): void {
+        if (worldTransform) this.worldTransform = worldTransform
+        const w = this.worldTransform
+        if (w) this.setTransform(w.a, w.b, w.c, w.d, w.e, w.f)
+    }
+
+    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: IBlendMode): void {
+        this.savedBlendMode = this.blendMode
+        this.blendMode = blendMode
+    }
+
+    public restoreBlendMode(): void {
+        this.blendMode = this.savedBlendMode
+    }
+
+    public hitFill(point: IPointData, fillRule?: IWindingRule): boolean {
+        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y)
+    }
+
+    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?: IBlendMode): 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?: IBlendMode): 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 copyWorldByReset(canvas: ILeaferCanvas, from?: IBoundsData, to?: IBoundsData, blendMode?: IBlendMode): void {
+        this.resetTransform()
+        this.copyWorld(canvas, from, to, blendMode)
+        this.useWorldTransform()
+    }
+
+    public useMask(maskCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void {
+        this.copyWorld(maskCanvas, fromBounds, toBounds, 'destination-in')
+    }
+
+    public useEraser(eraserCanvas: ILeaferCanvas, fromBounds?: IBoundsData, toBounds?: IBoundsData): void {
+        this.copyWorld(eraserCanvas, fromBounds, toBounds, 'destination-out')
+    }
+
+    public fillWorld(bounds: IBoundsData, color: string | object, blendMode?: IBlendMode): 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?: IBlendMode): 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) canvas.useWorldTransform({ ...this.worldTransform })
+
+        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 {
+        if (!this.recycled) {
+            this.restore()
+            this.manager ? this.manager.recycle(this) : this.destroy()
+        }
+    }
+
+    public updateRender(): void { }
+
+    public unrealCanvas(): void { }
+
+    public destroy(): void {
+        this.manager = this.view = this.parentView = null
+    }
+}

package/src/patch/index.ts

@@ -0,0 +1,7 @@
+import { IPathDrawer } from '@leafer/interface'
+
+import { roundRect } from './roundRect'
+
+export function canvasPatch(drawer: IPathDrawer): void {
+    roundRect(drawer)
+}

package/src/patch/roundRect.ts

@@ -0,0 +1,18 @@
+import { IPathDrawer } from '@leafer/interface'
+import { RectHelper } from '@leafer/path'
+
+
+const { drawRoundRect } = RectHelper
+
+export function roundRect(drawer: IPathDrawer): void {
+
+    if (drawer && !drawer.roundRect) {
+
+        drawer.roundRect = function (x: number, y: number, width: number, height: number, cornerRadius: number | number[]): void {
+
+            drawRoundRect(this as IPathDrawer, x, y, width, height, cornerRadius)
+        }
+    }
+
+}
+