Playground | LeaferJS

Scenes

🎨 Graphic Editing

Transparent Canvas

Create Shapes

Duplicate Elements

Pen Tool

Drag to Create

Context Menu

🎮️ Mini Games

Blooming Heart

Finishing the Dragon

Quick Start

🧬 Basics

Create Leafer Engine

Create Elements

Set Styles

Event Handling

Remove Elements

Export Elements

Vue / React

🧲 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

App & Engine Configuration

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

Advanced

Common Element Features

🎞️ Data

id / name

parent / leafer

Data / Clone

Path Data

Import / Export

Remove / Destroy

📐 Layout

Position / Scale / Rotation

Offset / resize

Around Center

Bounds / Transform

Coordinate Conversion

Stack / Placement

🏼 Appearance

Opacity / Visibility

Fill / Stroke

Gradient / Image

Inner / Outer Shadow

Dim / Highlight

Clip / Erase

Blend Mode

blendMode

混合模式

🖱 Interaction

Interactivity

Edit / Drag

Cursor Style

Interaction State

Event Handling

🐆 Animation

Animation

Transition

Motion Path

🌴 Advanced

Limit Drag Range

Force Render

Find & Pick

Custom Attributes

Common Features

🌲 Events

Interaction Events

Element Events

Platform Events

Basic Events

🌷 Utilities

Math

List

Resources

🛠 Development

Debug Mode

Develop Plugins

Plugins

🎨 Graphic Editor

Editor

Editor Properties

Editor Features

Editor Configuration

Editor Events

Editing Tools

Inner Editor

🫧 Auto Layout

Flow

Layout Properties

Child Properties

🐆 Animation

Animate

Animation Options

Easing

Delay

Duration

Speed

Reverse

Loop

Ending Style

Join Keyframes

Autoplay

Transition Attributes

Events

Animation Properties

Animation Features

Animation Events

🫐 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

App.ts

Live Preview

Clear

TS

JS