1. Canvas 1

1.

Canvas 1.5s 100

2.

leaferjs setAttr

3ms

leaferjs

leafer leafer ui git leafer ui ImageLine

phpimport { App, Leafer, Rect } from 'leafer-ui'const app = new App({ view: window, type: 'user' }) const backgroundLayer = new Leafer()const contentLayer = new Leafer({ type: 'design' })const wireframeLayer = new Leafer()app.add(backgroundLayer)app.add(contentLayer)app.add(wireframeLayer)const background = new Rect({ width: 800, height: 600, fill: 'gray' })const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })const border = new Rect({ x: 200, y: 200, stroke: 'blue', draggable: true })backgroundLayer.add(background)contentLayer.add(rect)wireframeLayer.add(border)

Demo App Leafer Leafer Canvas Konva Layer

Leafer Canvas

leafer rect

2.1 Leafer

Leafer

java@registerUI()export class Leafer extends Group implements ILeafer {    public get __tag() { return 'Leafer' }    @dataProcessor(LeaferData)    public __: ILeaferData    @boundsType()    public pixelRatio: number    public get isApp(): boolean { return false }    public parent?: App}

registerUI Leafer UICreator.list Leafer.one(data)

__tag 'Leafer''Rect'

boundsType Object.defineProperty set __setAttr

__ fillshadow

interaction DOM

canvasManager Canvas Canvas Canvas Canvas

imageManager

init Leafer config Canvas view leaferjs Canvas

Creator renderer Canvas

Creator.watcher Watcher Watcher

Creator.selector Branch

Leafer Group Group mixin Branch leaferjs Group Branch

2.2 Leaf

Rect

kotlin@useModule(RectRender)@registerUI()export class Rect extends UI implements IRect {    public get __tag() { return 'Rect' }    @dataProcessor(RectData)    public __: IRectData    constructor(data?: IRectInputData) {        super(data)    }    public __drawPathByData(drawer: IPathDrawer, _data: IPathCommandData): void {        const { width, height, cornerRadius } = this.__        if (cornerRadius) {            drawer.roundRect(0, 0, width, height, cornerRadius)        } else {            drawer.rect(0, 0, width, height)        }    }}

1. useModule RectRender Rect
2. UI
3. __drawPathByData

RectRender __drawFast __drawFast __drawPathByData

__complex __drawPathByData __drawFast

Demo fill fillstroke __drawPathByData

Rect UI fillstrokexy

UI Leaf Leaf

LeafMatrix LeafBounds LeafEventer

LeafDataProxy get/set UI @opcityType@positionType set

__setAttr

kotlinexport const LeafDataProxy: ILeafDataProxyModule = {    __setAttr(name: string, newValue: unknown): void {        if (this.leafer && this.leafer.ready) {            this.__[name] = newValue            const { CHANGE } = PropertyEvent            const event = new PropertyEvent(CHANGE, this, name, this.__.__get(name), newValue)            if (this.hasEvent(CHANGE) && !this.isLeafer) this.emitEvent(event)            this.leafer.emitEvent(event)        } else {            this.__[name] = newValue        }    },    __getAttr(name: string): unknown {        return this.__.__get(name)    }}

3.

__setAttr this.emitEvent(CHANGE)

Watcher RenderEvent.REQUEST

requestAnimateFrame

render fullRender partRender

3.1

fullRender usePartRender false

this.target.__render target Leafer Leafer

__render Leafer GroupGroup Branch __render Branch

Branch Leaf Bound Bound child.__world bounds.hit

continue __render

Fabric Konva leaferjs Konva

3.2

partRender partRender Block

Canvas clip Leafer Block

partRender

updateBlocks

100px

arduinoconst rect = new Rect({ x: 0, y: 0, width: 100, height: 100});rect.x = 100;

{ x: 0, y: 0, width: 200, height }

clipRender

fullRender Bounds

rect2 clip clear

circle1rect2circle2rect3 __render

rect4 circle2 clip circle2 rect4

hit cpu

4.

Canvas Canvas DOM

Konva

leaferjs Konva

Antv/g G 4.0

interaction Leafer DOM Leaf

this.selector.getByPoint Leaf

getByPoint FindPath eachFind

eachFind Leafer BranchGroup Leaf

Branch hitRadiusPoint hit Branch

Branch Leaf __hitWorld point Leaf

__hitWorld

1. hitCanvas
2. isPointInPath isPointInStroke

isPointInPath

beginPath isPointInPath(x, y) xy

isPointInPath

isPointInPath hitCanvas

Konva leaferjs hitCanvas Konva

colorKey Konva

5.

leaferjs CanvaskitMiniapp

leaferjs Canvas

Disclaimer: The content of this article is sourced from the internet. The copyright of the text, images, and other materials belongs to the original author. The platform reprints the materials for the purpose of conveying more information. The content of the article is for reference and learning only, and should not be used for commercial purposes. If it infringes on your legitimate rights and interests, please contact us promptly and we will handle it as soon as possible! We respect copyright and are committed to protecting it. Thank you for sharing.(Email:[email protected])