Skip to content

LeaferJS

Main Navigation

Ask AI - Context7

MCP

Leafer AI Knowledge Base & Skills

LeaferJS Open Source Forest

Official PxGrow Ecosystem

Early Community Contributions

English

English

Appearance

Sidebar Navigation

Getting Started

Overview

Quick Install

Web Version

Worker Version

Node Version

Mini Program Version

Cross-platform Core Package

Quick Update

More Scenarios

Multiple Product Forms

leafer-draw

Web Version

Worker Version

Node Version

Mini Program Version

leafer-game

Web Version

Worker Version

Node Version

Mini Program Version

leafer-editor

Web Version

Worker Version

Node Version

Mini Program Version

leafer

Web Version

Worker Version

Node Version

Mini Program Version

Quick Start

🧬 Basics

Create Leafer Engine

Create Elements

Set Styles

Event Handling

Remove Elements

Export Elements

Vue / React

Frontend Environment

Vue

React

HTML

Server-side Rendering

Nuxt.js

VitePress

Next.js

Component-based Development (Community Provided)

leafer-vue

🧲 Fun

Animation

Interactive State

Motion Path

Robot Game Element

Auto Layout

Graphic Editor

😎 Advanced

Create App Application

Zoom & Pan View

Coordinate Transformation

Get Bounding Box

Partial Rendering

Lifecycle

Element Lifecycle

Engine Lifecycle

Render Lifecycle

App & Engine Configuration

Base

Viewport Type

Canvas

Pointer Interaction

Touch Interaction

Multi-touch

Wheel Interaction

Pan View

Zoom View

Element Reference

🍉 App & Engine

App

Leafer

🥥 Group Elements

Group

Box

Frame

🍊 Elements

Rect

Ellipse

Line

Polygon

Star

Path

Pen

Image

SVG

Canvas

Text

UI

🥝 Custom Elements

Base

Register Element

Register Data

Add Attribute

Add Method

Advanced

Extend Element

Draw Path

context

Common Element Features

🎞️ Data

id / name

id

tag

name

className

innerId

innerName

parent / leafer

parent

leafer

Data / Clone

data

proxyData

clone()

Path Data

getPath()

getPathString()

path

Import / Export

export()

toJSON()

Remove / Destroy

remove()

destroy()

📐 Layout

Position / Scale / Rotation

position

size

scale

scaleFixed

flip()

rotation

skew

Offset / resize

offset

resize

Around Center

origin

around

Bounds / Transform

bounds

transform

Coordinate Conversion

Quick Conversion

Stack / Placement

zIndex

dropTo()

🏼 Appearance

Opacity / Visibility

opacity

visible

Fill / Stroke

fill

stroke

Gradient / Image

linear

radial

angular

solid

image

Inner / Outer Shadow

shadow

innerShadow

Dim / Highlight

dim

bright

Clip / Erase

clip

mask

eraser

Blend Mode

blendMode

🖱 Interaction

Interactivity

hittable

hitChildren

hitSelf

hitFill

hitStroke

Edit / Drag

editable

draggable

Cursor Style

cursor

Interaction State

state

hover

press

focus

selected

disabled

Event Handling

on() / once()

off()

emit()

Naming

Capture / Bubble

Simulate Interaction

🐆 Animation

Animation

animation

animate()

Transition

transition

Motion Path

motionPath

motion

getMotionTotal()

getMotionPoint()

🌴 Advanced

Limit Drag Range

dragBounds

Force Render

forceUpdate()

forceRender()

nextRender()

Find & Pick

find()

findOne()

pick()

Custom Attributes

changeAttr()

addAttr()

Common Features

🌲 Events

Interaction Events

PointerEvent

DragEvent

DropEvent

SwipeEvent

MoveEvent

ZoomEvent

RotateEvent

KeyEvent

Element Events

ImageEvent

ChildEvent

PropertyEvent

BoundsEvent

Platform Events

LeaferEvent

ResizeEvent

RenderEvent

LayoutEvent

WatchEvent

Basic Events

Event

UIEvent

🌷 Utilities

Math

Point

Bounds

Matrix

List

LeafList

Resources

Resource

🛠 Development

Debug Mode

Develop Plugins

Plugins

🎨 Graphic Editor

Editor

Editor Properties

State

List

Display Elements

Editor Features

Select

Group

Inner Editing

Lock

Z-Index

Update

Transform

Shortcuts

History

Editor Configuration

Base

Events

Style

Button Group

Cursor

Selection

Control

Enable

Inner Editor

Editor Events

EditorEvent

EditorMoveEvent

EditorScaleEvent

EditorRotateEvent

EditorSkewEvent

EditorGroupEvent

InnerEditorEvent

Editing Tools

EditTool

Register

Control Points

Usage

Inner Editor

InnerEditor

Register

Control Points

Usage

🫧 Auto Layout

Flow

Layout Properties

Direction

Wrap

Alignment

Gap

Padding

Box Type

Child Properties

Include in Layout

Auto Width

Auto Height

Width Range

Height Range

Lock Ratio

🐆 Animation

Animate

Animation Options

Easing

Delay

Duration

Speed

Reverse

Loop

Ending Style

Join Keyframes

Autoplay

Transition Attributes

Events

Animation Properties

State

Timing

Style

Animation Features

Play

Pause

Stop

Seek

kill

Destroy

Animation Events

AnimateEvent

🫐 Official Plugins

Viewport

View Control

Scrollbar

Arrow

HTML

Text Editing

Motion Path

Robot

Interactive State

Find Elements

Export Elements

Filter

color

resize

Highlight Elements

scale-fixed

box Elements

Path Corner

🍇 Community Plugins

Open Source Forest Plugins

PxGrow Solutions

On this page

自定义元素

学习自定义元素教程

Edit this page on GitHub

Pager

NextOverview

Released under the MIT License.

自定义元素 ​

学习自定义元素教程 ​

自定义元素

学习自定义元素教程