### Listening to Drag Events

Source: https://context7.com/leaferjs/code/llms.txt

Shows how to use the DragEvent to listen for and handle drag operations on a Rect element. The example moves the element in world coordinates based on drag movement.

```typescript
import { Leafer, Rect, DragEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 200, y: 100, fill: '#32cd79' })

leafer.rotation = 30
leafer.add(rect)

rect.on(DragEvent.DRAG, function (e: DragEvent) {
    e.current.moveWorld(e.moveX, e.moveY)
})
```

--------------------------------

### Adding Scroll Functionality with ScrollBar Plugin

Source: https://context7.com/leaferjs/code/llms.txt

Integrate scrollbars for content with the ScrollBar plugin. This example sets up an App with an editor and adds scrollbars.

```typescript
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
import '@leafer-in/viewport'
import { ScrollBar } from '@leafer-in/scroll'

const app = new App({ view: window, editor: {} })

new ScrollBar(app)

app.tree.add(Rect.one({ editable: true, fill: '#FEB027' }, 500, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B' }, 650, 2400))
```

--------------------------------

### Create Ellipse Element

Source: https://context7.com/leaferjs/code/llms.txt

Use the Ellipse element to draw circles, ellipses, arcs, and sectors. Configure start and end angles, inner radius, stroke properties, and more.

```typescript
import { Leafer, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

// 绘制圆形
const circle = new Ellipse({
    width: 100,
    height: 100,
    fill: "#32cd79"
})

// 绘制圆弧
const arc = new Ellipse({
    width: 100,
    height: 100,
    startAngle: -60,
    endAngle: 180,
    innerRadius: 1,
    stroke: "#32cd79",
    strokeWidth: 10,
    strokeAlign: 'center',
    strokeCap: 'round'
})

leafer.add(circle)
leafer.add(arc)
```

--------------------------------

### Create Leafer Application

Source: https://context7.com/leaferjs/code/llms.txt

Initialize a Leafer instance for full-screen or fixed-size applications. Add graphical elements to the Leafer instance for rendering.

```typescript
import { Leafer, Rect } from 'leafer-ui'

// 创建全屏 Leafer 应用
const leafer = new Leafer({ view: window })

// 创建固定尺寸的 Leafer 应用
const div = document.createElement('div')
document.body.appendChild(div)

const leafer2 = new Leafer({
    view: div,
    width: 600,
    height: 600,
    fill: '#333'
})

// 添加图形元素
leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
```

--------------------------------

### Listening to Pointer Events

Source: https://context7.com/leaferjs/code/llms.txt

Shows how to listen for various pointer events like ENTER, TAP, DOUBLE_TAP, LONG_TAP, and LONG_PRESS on a Rect element using the 'on' method. Event handlers can modify element properties.

```typescript
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

// 监听单个事件
function onEnter(e: PointerEvent) {
    (e.current as Rect).fill = '#42dd89'
}

rect.on(PointerEvent.ENTER, onEnter)

// 监听多种点击事件
rect.on(PointerEvent.TAP, () => {
    console.log('tap')
})

rect.on(PointerEvent.DOUBLE_TAP, () => {
    console.log('double_tap')
})

rect.on(PointerEvent.LONG_TAP, () => {
    console.log('long_tap')
})

rect.on(PointerEvent.LONG_PRESS, () => {
    console.log('long_press')
})
```

--------------------------------

### Creating Editable Graphics with Editor Plugin

Source: https://context7.com/leaferjs/code/llms.txt

Use the App component with the editor configuration to create a graphics editor. Mark elements with `editable: true` to enable editing.

```typescript
import { App, Rect } from 'leafer'  // 自动导入 leafer-ui 和所有插件

const app = new App({
    view: window,
    editor: {}  // 配置 editor 会自动创建编辑器实例
})

app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100))
```

--------------------------------

### Basic Animation with LeaferJS

Source: https://context7.com/leaferjs/code/llms.txt

Demonstrates applying a simple animation to a Rect shape using the 'animate' method. Requires importing the '@leafer-in/animate' plugin. The animation targets properties like 'x' and 'cornerRadius' with duration and swing options.

```typescript
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/animate'  // 导入动画插件

const leafer = new Leafer({ view: window })

const rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })

leafer.add(rect)

rect.animate(
    { x: 500, cornerRadius: 0 },  // 目标样式
    {
        duration: 1,
        swing: true  // 摇摆循环播放
    }
)
```

--------------------------------

### Keyframe Animations with Animate Class

Source: https://context7.com/leaferjs/code/llms.txt

Illustrates creating complex keyframe animations using the 'Animate' class from '@leafer-in/animate'. This allows defining multiple style changes with specific durations, delays, and easing functions for a single animation sequence.

```typescript
import { Leafer, Rect } from 'leafer-ui'
import { Animate } from '@leafer-in/animate'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 50, y: 100, cornerRadius: 50, fill: '#32cd79', around: 'center' })

leafer.add(rect)

new Animate(
    rect,
    [
        { style: { x: 150, scaleX: 2, fill: '#ffcd00' }, duration: 0.5 },
        { style: { x: 50, scaleX: 1, fill: '#ffcd00' }, duration: 0.2 },
        { style: { x: 550, cornerRadius: 0, fill: '#ffcd00' }, delay: 0.1, easing: 'bounce-out' },
        { x: 50, rotation: -720, cornerRadius: 50 }
    ],
    {
        duration: 3,
        loop: true,
        join: true  // 加入动画前的元素状态作为 from 关键帧
    }
)
```

--------------------------------

### Simulating Interaction Events

Source: https://context7.com/leaferjs/code/llms.txt

Simulate user interaction events like drag and zoom using the `interaction` API. This is useful for testing and automation.

```typescript
import { Leafer, Rect, DragEvent, ZoomEvent } from 'leafer-ui'
import '@leafer-in/viewport'

const leafer = new Leafer({ view: window, type: 'viewport' })

const rect = new Rect({ x: 100, y: 100, width: 200, height: 200, fill: '#32cd79', draggable: true })

leafer.add(rect)

rect.on(DragEvent.DRAG, (e) => {
    console.log('drag', e)
})

const { interaction } = leafer

// 模拟拖拽
setTimeout(() => {
    interaction.pointerDown({ x: 100, y: 100 })
    interaction.pointerMove({ x: 500, y: 500 })
    interaction.pointerUp()
}, 1000)

// 模拟缩放
setTimeout(() => {
    interaction.zoom({ x: 100, y: 100, scale: 0.2 })
}, 2000)
```

--------------------------------

### Create Container Elements (Box / Frame)

Source: https://context7.com/leaferjs/code/llms.txt

Use Box and Frame as containers with clipping capabilities. Child elements exceeding the container's bounds will be clipped. Box has a default fill, while Frame is transparent by default.

```typescript
import { Leafer, Box, Frame, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window, fill: '#333' })

// Box 容器
const box = new Box({
    width: 100,
    height: 100,
    fill: '#FF4B4B'
})

const circle = new Ellipse({
    x: 60,
    y: 60,
    width: 50,
    height: 50,
    fill: '#FEB027',
    draggable: true
})

box.add(circle)
leafer.add(box)

// Frame 容器（默认白色背景）
const frame = new Frame({
    width: 100,
    height: 100
})

leafer.add(frame)
```

--------------------------------

### Configuring Event Listeners via Object

Source: https://context7.com/leaferjs/code/llms.txt

Demonstrates creating a Rect element and configuring its event listeners directly within the constructor using the 'event' property. This method is useful for defining multiple event handlers at element creation.

```typescript
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = Rect.one({
    fill: '#32cd79',
    draggable: true,
    event: {
        [PointerEvent.ENTER]: function (e: PointerEvent) {
            (e.current as Rect).fill = '#42dd89'
        },
        [PointerEvent.LEAVE]: function (e: PointerEvent) {
            (e.current as Rect).fill = '#32cd79'
        }
    }
}, 100, 100, 200, 200)

leafer.add(rect)
```

--------------------------------

### Create Polygon and Star Elements

Source: https://context7.com/leaferjs/code/llms.txt

Draw regular polygons with the Polygon element and stars with the Star element. Configure the number of sides or corners and appearance.

```typescript
import { Leafer, Polygon, Star } from 'leafer-ui'

const leafer = new Leafer({ view: window })

// 绘制五边形
const polygon = new Polygon({
    width: 100,
    height: 100,
    sides: 5,
    fill: '#32cd79'
})

// 绘制五角星
const star = new Star({
    width: 100,
    height: 100,
    corners: 5,
    fill: '#FEB027'
})

leafer.add(polygon)
leafer.add(star)
```

--------------------------------

### Linear and Radial Gradient Fills

Source: https://context7.com/leaferjs/code/llms.txt

Demonstrates how to apply linear and radial gradient fills to a Rect shape using LeaferJS. Ensure the Leafer instance is properly initialized.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

// 线性渐变
const linearRect = new Rect({
    width: 100,
    height: 100,
    fill: {
        type: 'linear',
        stops: ['#FF4B4B', '#FEB027']
    }
})

// 径向渐变
const radialRect = new Rect({
    width: 100,
    height: 100,
    fill: {
        type: 'radial',
        stops: [
            { offset: 0, color: '#FF4B4B' },
            { offset: 1, color: '#FEB027' }
        ]
    }
})

leafer.add(linearRect)
leafer.add(radialRect)
```

--------------------------------

### Create Rect Element

Source: https://context7.com/leaferjs/code/llms.txt

Instantiate a Rect element for drawing rectangles and rounded rectangles. Configure properties like position, size, fill, corner radius, and draggable behavior.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: '#32cd79',
    cornerRadius: 20,
    draggable: true
})

leafer.add(rect)
```

--------------------------------

### Freehand Drawing with Pen Tool

Source: https://context7.com/leaferjs/code/llms.txt

Use the Pen tool to draw freehand paths by capturing mouse drag events. Ensure the Leafer instance is configured for design mode.

```typescript
import { Leafer, DragEvent, Pen } from 'leafer-ui'
import '@leafer-in/viewport'

const leafer = new Leafer({ view: window, type: 'design', fill: '#333' })

const pen = new Pen()
leafer.add(pen)

// 按下鼠标拖动开始画线，抬起结束
leafer.on(DragEvent.START, (e: DragEvent) => {
    const point = e.getPagePoint()
    pen.setStyle({ stroke: '#32cd79', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(point.x, point.y)
})

leafer.on(DragEvent.DRAG, (e: DragEvent) => {
    const point = e.getPagePoint()
    pen.lineTo(point.x, point.y)
})
```

--------------------------------

### Automatic Layout with Flow Plugin

Source: https://context7.com/leaferjs/code/llms.txt

Implement automatic layout for child elements using the Flow plugin. Configure direction, spacing, alignment, and wrapping.

```typescript
import { Leafer, Rect, Star, Ellipse } from 'leafer-ui'
import { Flow } from '@leafer-in/flow'

const leafer = new Leafer({ view: window })

const flow = new Flow({
    flow: 'y',  // 垂直方向排列
    gap: { x: 'auto', y: 20 },
    flowAlign: { content: 'top', x: 'from' },
    flowWrap: true,
    x: 100,
    y: 100,
    width: 260,
    height: 260,
    fill: '#333'
})

const rect = new Rect({ fill: 'red' })
const star = new Star({ fill: 'green', height: 100 })
const ellipse = new Ellipse({ fill: 'blue' })
flow.add([rect, star, ellipse])

leafer.add(flow)
```

--------------------------------

### Create Line Element

Source: https://context7.com/leaferjs/code/llms.txt

Draw lines, dashed lines, and polylines using the Line element. Configure line width, rotation, stroke color, and dash patterns.

```typescript
import { Leafer, Line } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const line = new Line({
    width: 100,
    rotation: 45,
    strokeWidth: 5,
    stroke: '#32cd79',
    dashPattern: [10, 10]  // 虚线描边
})

leafer.add(line)
```

--------------------------------

### Create Text Element

Source: https://context7.com/leaferjs/code/llms.txt

Render text content on the canvas using the Text element. Customize text, font size, font weight, and fill color.

```typescript
import { Leafer, Text } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const text = new Text({
    fill: '#32cd79',
    text: 'Welcome to LeaferJS',
    fontSize: 24,
    fontWeight: 'bold'
})

leafer.add(text)
```

--------------------------------

### Create Group Element

Source: https://context7.com/leaferjs/code/llms.txt

Organize multiple graphical elements into a single Group for unified management and transformations. Add elements to the group using the add method.

```typescript
import { Leafer, Group, Rect, Ellipse } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: '#32cd79',
    draggable: true
})

const ellipse = new Ellipse({
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    innerRadius: 0.5,
    fill: "#FEB027"
})

const group = new Group({
    x: 100,
    y: 100
})

group.add([rect, ellipse])
leafer.add(group)
```

--------------------------------

### Drawing Lines with Arrow Plugin

Source: https://context7.com/leaferjs/code/llms.txt

Draw lines with arrowheads using the Arrow plugin. Configure the `endArrow` property to specify the arrowhead style.

```typescript
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

const leafer = new Leafer({ view: window })

const arrow = new Arrow({
    y: 50,
    endArrow: 'arrow',
    strokeWidth: 5,
    stroke: '#32cd79'
})

leafer.add(arrow)
```

--------------------------------

### Stroke Styles in LeaferJS

Source: https://context7.com/leaferjs/code/llms.txt

Illustrates how to set stroke properties for a Rect shape, including solid color, width, dash patterns for dashed lines, and gradient strokes. Requires Leafer and Rect imports.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    stroke: '#32cd79',
    strokeWidth: 2,
    dashPattern: [6, 6]  // 虚线描边
})

// 渐变描边
const rect2 = new Rect({
    width: 100,
    height: 100,
    stroke: {
        type: 'solid',
        color: '#32cd79'
    }
})

leafer.add(rect)
```

--------------------------------

### Image Fill with LeaferJS

Source: https://context7.com/leaferjs/code/llms.txt

Shows how to use an image as a fill for a Rect shape in LeaferJS. Supports various fill modes like 'cover', 'fit', 'stretch', 'repeat', and 'clip'. The Rect is also made draggable.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    fill: {
        type: 'image',
        url: '/image/leafer.jpg',
        mode: 'cover'  // 支持 cover, fit, stretch, repeat, clip
    },
    draggable: true
})

leafer.add(rect)
```

--------------------------------

### Custom Drawing with Canvas and Pen

Source: https://context7.com/leaferjs/code/llms.txt

Utilize the Canvas element and Pen tool for custom drawing operations, including applying gradients and complex shapes.

```typescript
import { Leafer, Canvas, Pen } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const canvas = new Canvas({ width: 800, height: 600 })
leafer.add(canvas)

const pen = new Pen()

pen.setStyle({ fill: { type: 'radial', stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }] } })
pen.roundRect(0, 0, 100, 100, 30)

pen.setStyle({ y: -5, fill: 'white' })
pen.moveTo(40, 30).bezierCurveTo(70, 30, 90, 60, 63, 80).quadraticCurveTo(50, 88, 40, 80).bezierCurveTo(10, 60, 50, 40, 40, 30)

canvas.draw(pen)
```

--------------------------------

### Configuring Viewport for Zoom and Pan

Source: https://context7.com/leaferjs/code/llms.txt

Set the Leafer viewport type to 'design' to enable zoom and pan functionalities. This allows for interactive manipulation of the canvas.

```typescript
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/viewport'

const leafer = new Leafer({
    view: window,
    type: 'design'  // 支持 design, document, viewport 等类型
})

leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))
```

--------------------------------

### Shadow Effects with LeaferJS

Source: https://context7.com/leaferjs/code/llms.txt

Demonstrates adding shadow effects to a Rect shape using the 'shadow' property. Supports offset (x, y), blur, color, and a 'box' mode for box-shadow-like behavior. Corner radius is also applied.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    width: 100,
    height: 100,
    cornerRadius: 30,
    fill: 'rgba(50,205,121,0.7)',
    shadow: {
        x: 10,
        y: -10,
        blur: 20,
        color: '#FF0000AA',
        box: true  // box-shadow 模式
    }
})

leafer.add(rect)
```

--------------------------------

### Create Path Element

Source: https://context7.com/leaferjs/code/llms.txt

Draw complex shapes using SVG path syntax with the Path element. Alternatively, use PathCreator for programmatic path generation.

```typescript
import { Leafer, Path, PathCreator } from 'leafer-ui'

const leafer = new Leafer({ view: window })

// 使用 SVG 路径字符串
const path = new Path({
    scale: 0.1,
    path: 'M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048...',
    fill: '#32cd79'
})

// 使用 PathCreator 程序化创建路径
const drawer = new PathCreator()
drawer.moveTo(40, 30)
    .bezierCurveTo(70, 30, 90, 60, 63, 80)
    .quadraticCurveTo(50, 88, 40, 80)
    .bezierCurveTo(10, 60, 50, 40, 40, 30)

leafer.add(new Path({ path: drawer.path, fill: 'white' }))
```

--------------------------------

### Solid Color Fill

Source: https://context7.com/leaferjs/code/llms.txt

Set the fill color of graphical elements using the 'fill' property. Supports both shorthand string notation and a more detailed object configuration for type and color.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

// 简写方式
const rect1 = new Rect({
    width: 100,
    height: 100,
    fill: '#32cd79'
})

// 完整配置方式
const rect2 = new Rect({
    width: 100,
    height: 100,
    fill: {
        type: 'solid',
        color: '#32cd79'
    }
})

leafer.add(rect1)
```

--------------------------------

### Exporting Canvas Content to JSON

Source: https://context7.com/leaferjs/code/llms.txt

Export the current state of the Leafer canvas to a JSON format. This allows for saving and loading canvas content.

```typescript
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    fill: '#32cd79',
    draggable: true
})

leafer.add(rect)

const json = leafer.toJSON()

console.log(json)
// {"tag":"Leafer","width":1273,"height":877,"pixelRatio":2,"hittable":true,"children":[{"tag":"Rect","x":100,"y":100,"width":100,"height":100,"fill":"#32cd79","draggable":true}]}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.