### Quick Start

Source: https://github.com/leaferjs/leafer-ui/blob/main/README.md

Install the package and import Leafer and Rect to create a basic interactive application with a draggable rectangle.

```sh
npm install leafer-ui

# When plugins are needed, it is recommended to install the cross-platform core package at the same time to prevent version synchronization issues
npm install leafer-ui @leafer-ui/core @leafer-ui/draw
```

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

// Create an interactive application that adapts to the window
const leafer = new Leafer({ view: window })

// Create a rectangle that can be dragged
const rect = new Rect({
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  fill: '#32cd79',
  draggable: true,
})

leafer.add(rect)
```

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

### isHoldKeys example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

Example of using isHoldKeys.

```typescript
element.on('pointer.down', (event) => {
    if (event.ctrlKey && event.isHoldKeys('shift')) {
        console.log('按下了 Ctrl+Shift')
    }
})
```

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

### getLocalMove example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

Example of using getLocalMove.

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

rect.on('drag', (event) => {
    const move = event.getLocalMove(rect)
    console.log('移动距离:', move)
})
```

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

### getLocalPoint example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

Example of using getLocalPoint.

```typescript
element.on('pointer.down', (event) => {
    const localPoint = event.getLocalPoint(element)
    console.log('相对于元素的坐标:', localPoint)
})
```

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

### 初始化应用示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/app-应用-类.md

Example of initializing the App.

```typescript
const app = new App()
app.init({
    view: document.getElementById('canvas'),
    editor: {}
})
```

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

### PointerEvent example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

Example of using PointerEvent.

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

// 监听指针按下
rect.on('pointer.down', (event) => {
    console.log('按下位置:', event.x, event.y)
    console.log('指针类型:', event.pointerType)
})

// 监听指针移动
rect.on('pointer.move', (event) => {
    const localPoint = event.getLocalPoint(rect)
    console.log('相对位置:', localPoint)
})

// 监听点击
rect.on('click', (event) => {
    console.log('点击事件')
})

// 监听长按
rect.on('long_press', (event) => {
    console.log('长按事件')
})
```

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

### DragEvent example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

Example of using DragEvent.

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

rect.on('drag.start', (event) => {
    console.log('开始拖拽')
})

rect.on('drag', (event) => {
    const move = event.getLocalMove(rect)
    console.log('移动中:', move)
})

rect.on('drag.end', (event) => {
    const total = event.getLocalTotal(rect)
    console.log('拖拽完成，总移动距离:', total)
})
```

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

### 完整示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/app-应用-类.md

A comprehensive example demonstrating the usage of the App class, including initialization, adding elements to different layers, and event handling.

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

// 创建应用
const app = new App({
    view: document.getElementById('canvas'),
    width: 1000,
    height: 800
})

// 初始化时创建 ground、tree、sky 层
app.init({
    view: document.getElementById('canvas'),
    ground: { fill: '#f5f5f5' },
    tree: {},
    sky: { fill: 'transparent' },
    editor: {}  // 启用编辑器
})

// 在 tree 层添加矩形
const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    draggable: true
})
app.tree.add(rect)

// 在 sky 层添加 UI 文本
const label = new Text({
    x: 50,
    y: 50,
    content: '标题',
    fontSize: 24
})
app.sky.add(label)

// 遍历所有层
app.forEach((leafer) => {
    leafer.on('pointer.move', (event) => {
        console.log(`${leafer.__tag} 层鼠标移动`)
    })
})
```

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

### Pen Element Example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/显示元素-图形.md

An example demonstrating the creation of a Pen element and setting its path style.

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

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

const pen = new Pen({
    x: 100,
    y: 100
})

pen.setStyle({
    stroke: '#333',
    strokeWidth: 2
})

leafer.add(pen)
```

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

### 模块系统示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Example of how to use the useModule decorator for adding functionality modules.

```typescript
import { useModule } from '@leafer/core'

@useModule(MyModule)
class MyElement extends UI {
    // 元素定义
}
```

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

### Frame example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/容器元素-group-box-frame.md

Example demonstrating the creation and usage of a Frame with child elements.

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

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

// 创建一个框架
const frame = new Frame({
    x: 50,
    y: 50,
    width: 400,
    height: 600,
    fill: '#ffffff',
    overflow: 'hide'
})

// 在框架中添加内容
const rect = new Rect({
    x: 20,
    y: 20,
    width: 360,
    height: 200,
    fill: '#32cd79'
})

const text = new Text({
    x: 20,
    y: 240,
    width: 360,
    content: 'Frame 标题',
    fontSize: 24,
    fill: '#333'
})

frame.add(rect, text)
leafer.add(frame)
```

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

### Path Element Example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/显示元素-图形.md

An example showing how to create a Path element using an SVG path string.

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

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

// 使用 SVG 路径字符串
const path = new Path({
    x: 100,
    y: 100,
    path: 'M 0 0 L 100 0 L 100 100 L 0 100 Z',
    stroke: '#333',
    strokeWidth: 2
})

leafer.add(path)
```

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

### Box example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/容器元素-group-box-frame.md

Example demonstrating the creation and usage of a Box with Flexbox layout and child elements.

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

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

// 创建一个具有 Flex 布局的盒子
const box = new Box({
    x: 50,
    y: 50,
    width: 300,
    height: 200,
    fill: '#f0f0f0',
    overflow: 'auto',
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
    padding: 10
})

// 添加子元素
for (let i = 0; i < 5; i++) {
    const item = new Rect({
        width: 280,
        height: 50,
        fill: '#32cd79'
    })
    box.add(item)
}

leafer.add(box)

// 滚动内容
box.scroll({ x: 0, y: 100 })
```

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

### Group add method example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/容器元素-group-box-frame.md

Example of adding child elements to a Group.

```typescript
const group = new Group()
const rect = new Rect({ x: 0, y: 0, width: 100, height: 100, fill: '#32cd79' })
const circle = new Ellipse({ x: 110, y: 0, width: 100, height: 100, fill: '#ff6b6b' })

group.add(rect, circle)
```

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

### 插件系统示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Example of how to create and use a plugin in LeaferJS.

```typescript
import { Plugin } from '@leafer/core'

class MyPlugin extends Plugin {
    install(leafer: Leafer) {
        // 注册自定义功能
        leafer.myCustomMethod = () => {
            // 实现自定义方法
        }
    }
}

// 使用插件
leafer.use(new MyPlugin())
```

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

### Canvas Element Example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/显示元素-图形.md

An example of creating a Canvas element with specified dimensions and properties.

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

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

const canvas = new Canvas({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    pixelRatio: 2,
    smooth: true
})

leafer.add(canvas)
```

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

### 遍历所有 Leafer 层示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/app-应用-类.md

Example of iterating through all Leafer layers.

```typescript
app.forEach((leafer) => {
    console.log(leafer.__tag)
})
```

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

### Box scroll method example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/容器元素-group-box-frame.md

Example of scrolling content within a Box.

```typescript
box.scroll({ x: 0, y: 100 })
```

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

### Text Element Example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/显示元素-图形.md

An example demonstrating how to create and add a Text element to the Leafer instance.

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

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

const text = new Text({
    x: 100,
    y: 100,
    content: 'Hello LeaferJS',
    fontSize: 24,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fill: '#333',
    draggable: true
})

leafer.add(text)
```

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

### Group example

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/容器元素-group-box-frame.md

Example demonstrating the creation and usage of a Group with child elements.

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

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

// 创建分组
const group = new Group({
    x: 100,
    y: 100,
    draggable: true
})

// 创建子元素
const rect = new Rect({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    fill: '#32cd79'
})

const text = new Text({
    x: 10,
    y: 40,
    content: 'Group',
    fill: '#fff'
})

// 添加子元素
group.add(rect, text)

// 添加到 Leafer
leafer.add(group)

// 遍历子元素
group.forEach((child, index) => {
    console.log(`子元素 ${index}:`, child.__tag)
})

// 查找子元素
const foundText = group.find({ className: 'title' })
```

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

### 添加 Leafer 层示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/app-应用-类.md

Example of adding a new Leafer layer.

```typescript
const skyLayer = app.addLeafer({ fill: 'transparent' })
```

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

### Hello World

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建一个 Leafer 实例，添加一个矩形和一个文本元素，展示基本用法。

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

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

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

const text = new Text({
    x: 150, y: 145,
    content: 'Hello',
    fill: '#fff'
})

leafer.add(rect, text)
```

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

### App 配置选项

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

App 初始化时的配置对象 IAppConfig 接口。

```typescript
interface IAppConfig extends ILeaferConfig {
    ground?: ILeaferConfig              // 底层 Leafer 配置
    tree?: ILeaferConfig                // 中层 Leafer 配置
    sky?: ILeaferConfig                 // 顶层 Leafer 配置
    editor?: IEditorConfig | boolean    // 编辑器配置
    realCanvas?: boolean                // 是否使用真实 Canvas
}
```

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

### Paint 对象接口

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

Paint 对象接口 IPaintObject 定义。

```typescript
interface IPaintObject {
    type?: 'solid' | 'linear' | 'radial' | 'image'
    color?: string              // 纯色填充
    colors?: string[]           // 渐变色列表
    stops?: number[]            // 渐变色停止点
    x1?: number                 // 线性渐变起点 X
    y1?: number                 // 线性渐变起点 Y
    x2?: number                 // 线性渐变终点 X
    y2?: number                 // 线性渐变终点 Y
    cx?: number                 // 径向渐变圆心 X
    cy?: number                 // 径向渐变圆心 Y
    r?: number                  // 径向渐变半径
    url?: string                // 图像 URL（图像填充）
    mode?: string               // 图像填充模式
}
```

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

### start 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/leafer-核心-类.md

启动 Leafer 渲染循环的示例代码。

```typescript
leafer.start()
```

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

### App 类签名

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/app-应用-类.md

The signature of the App class.

```typescript
class App extends Leafer implements IApp {
    constructor(userConfig?: IAppConfig, data?: IAppInputData)
}
```

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

### 设置光标

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

通过 `cursor` 属性设置元素的鼠标光标样式，并在事件中动态更改。

```typescript
const rect = new Rect({
    cursor: 'pointer'
})

// 在事件中更改光标
rect.on('pointer.enter', () => {
    rect.cursor = 'grab'
})

rect.on('pointer.leave', () => {
    rect.cursor = 'default'
})

rect.on('drag.start', () => {
    rect.cursor = 'grabbing'
})

rect.on('drag.end', () => {
    rect.cursor = 'grab'
})
```

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

### on 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

监听事件的示例。

```typescript
rect.on('pointer.down', (event) => {
    console.log('按下鼠标:', event.x, event.y)
})
```

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

### Leafer 配置选项

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

Leafer 初始化时的配置对象 ILeaferConfig 接口。

```typescript
interface ILeaferConfig {
    view?: unknown                          // DOM 元素或 window
    width?: number                          // 画布宽度
    height?: number                         // 画布高度
    type?: ILeaferType                      // Leafer 类型
    dpr?: number                            // 设备像素比
    fill?: string | IFill                   // 背景色
    smooth?: boolean                        // 是否启用平滑渲染（默认 true）
    hittable?: boolean                      // 是否启用命中检测（默认 true）
    draggable?: boolean                     // 背景是否可拖拽（默认 false）
    start?: boolean                         // 是否自动启动（默认 true）
    lazySpeard?: number                     // 懒加载扩展距离（默认 100）
    cursor?: ICursorType                    // 默认光标
    zoom?: number                           // 初始缩放级别
}
```

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

### 批量修改

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

通过 `lockLayout` 和 `unlockLayout` 锁定和解锁布局，以优化批量修改元素时的性能。

```typescript
// 锁定布局
leafer.lockLayout()

// 进行多个修改
for (let i = 0; i < 1000; i++) {
    // 创建元素
}

// 解锁并更新
leafer.unlockLayout(true)
```

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

### 光标类型示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

光标类型示例

```typescript
const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    cursor: 'pointer'  // 鼠标悬停时显示指针光标
})
```

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

### updateLayout 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

更新布局的示例。

```typescript
rect.updateLayout()
```

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

### App 使用示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

App 初始化时的配置对象使用示例。

```typescript
import { App } from 'leafer-ui'

const app = new App({
    view: document.getElementById('canvas'),
    width: 1000,
    height: 800,
    ground: { fill: '#ffffff' },
    tree: { fill: '#f0f0f0' },
    sky: { fill: 'transparent' },
    editor: {}  // 启用编辑器
})
```

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

### 布局（Flex）配置示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

布局（Flex）配置示例

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

const box = new Box({
    x: 50,
    y: 50,
    width: 400,
    height: 300,
    fill: '#f0f0f0',
    display: 'flex',
    flexDirection: 'row',
    gap: 10,
    padding: 10,
    justifyContent: 'space-between',
    alignItems: 'center'
})

// 添加子元素
for (let i = 0; i < 3; i++) {
    const item = new Rect({
        width: 100,
        height: 100,
        fill: '#32cd79'
    })
    box.add(item)
}
```

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

### Display-Module 渲染模块导出

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Export statements for rendering logic within the Display-Module.

```typescript
UIRender            // 基础渲染
RectRender          // 矩形渲染
TextRender          // 文本渲染
```

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

### 核心架构 - 事件流

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

The event flow architecture.

```mermaid
输入事件（鼠标、触摸、键盘）
  ↓
交互模块 Interaction
  ↓
命中检测 Hit Testing
  ↓
事件分发 Event Dispatch
  ↓
目标元素处理
  ↓
事件冒泡 Event Bubbling
```

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

### App 模块导出

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Export statement for the App module.

```typescript
export { App } from './App'
```

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

### 核心架构 - UI 层次

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

The UI hierarchy architecture.

```mermaid
Leafer（顶级容器）
  ├── Group（分组）
  │   ├── UI（基础元素）
  │   │   ├── Rect（矩形）
  │   │   ├── Ellipse（椭圆）
  │   │   ├── Text（文本）
  │   │   └── ...
  │   └── Box（盒子）
  │       ├── Frame（框架）
  │       └── ...
  └── ...
```

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

### 动画

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建一个矩形并为其添加动画效果，使其在指定范围内循环移动。

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

leafer.add(rect)

rect.animate([
    { frame: 0, x: 0 },
    { frame: 60, x: 200 }
], {
    duration: 1000,
    loop: true,
    reverse: true
})
```

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

### 更新布局

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/元素操作方法.md

updateLayout 方法用于立即更新元素的布局。可以通过 lockLayout 和 unlockLayout 来批量更新，以提高性能。

```typescript
const rect = new Rect({
    x: 0,
    y: 0,
    width: 200,
    height: 200
})

// 立即更新布局
rect.updateLayout()

// 锁定布局
if (rect.leafer) {
    rect.leafer.lockLayout()
}

// 进行多个修改
rect.x = 100
rect.y = 100
rect.width = 300
rect.height = 300

// 恢复布局更新
if (rect.leafer) {
    rect.leafer.unlockLayout(true)
}
```

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

### getPagePoint 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

获取页面坐标点的示例。

```typescript
rect.getPagePoint(point, relative?, skipRotation?)
```

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

### 阴影配置接口

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

阴影配置接口 IShadowEffect 定义。

```typescript
interface IShadowEffect {
    x?: number              // 阴影偏移 X（默认 0）
    y?: number              // 阴影偏移 Y（默认 0）
    blur?: number           // 阴影模糊半径（默认 0）
    spread?: number         // 阴影扩展距离（默认 0）
    color?: string          // 阴影颜色（默认 '#000000'）
    alpha?: number          // 阴影透明度（默认 1）
}
```

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

### 禁用不需要的功能

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

通过设置 `hittable` 属性为 `false` 来禁用命中检测，以优化性能。

```typescript
leafer.hittable = false  // 禁用命中检测
element.hittable = false // 禁用单个元素的交互
```

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

### UI 元素通用配置示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

所有 UI 元素共有的输入数据结构 IUIInputData 接口的使用示例。

```typescript
const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    stroke: '#333',
    strokeWidth: 2,
    opacity: 0.8,
    draggable: true,
    cursor: 'pointer',
    id: 'main-rect',
    name: 'Rectangle',
    className: 'shape'
})
```

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

### Node.js 环境

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

在 Node.js 中使用 LeaferJS 进行离线渲染的示例。

```typescript
// 需要使用 Node.js 特定的包
import { Leafer } from '@leafer-ui/node'

// 创建 Leafer 实例（无需 view）
const leafer = new Leafer({
    width: 1000,
    height: 800
})

// 添加内容
const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79'
})
leafer.add(rect)

// 导出为图像
// const png = await leafer.export('png')
// fs.writeFileSync('output.png', png)
```

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

### Display 模块导出

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Export statements for the Display module.

```typescript
export { Leafer, Group, Box, Frame, Rect, Ellipse, ... }
```

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

### getBoxPoint 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

获取盒子坐标点的示例。

```typescript
rect.getBoxPoint(point, relative?, skipRotation?)
```

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

### 盒子（Flex 容器）

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建一个 Box 元素，作为 Flex 容器，可配置布局方向、间距和内边距。

```typescript
new Box({
    width: 300, height: 300,
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
    padding: 10
})
```

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

### 快捷键检测

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

使用 `isHoldKeys` 方法检测组合按键，如 Ctrl+A 或 Shift+Delete。

```typescript
leafer.on('key.down', (event) => {
    // 检查 Ctrl+A
    if (event.isHoldKeys({ ctrl: true, key: 'a' })) {
        console.log('按下了 Ctrl+A')
    }
    
    // 检查 Shift+Delete
    if (event.isHoldKeys({ shift: true, key: 'Delete' })) {
        console.log('按下了 Shift+Delete')
    }
    
    // 检查多个修饰键
    if (event.ctrlKey && event.shiftKey && event.key === 'z') {
        console.log('按下了 Ctrl+Shift+Z')
    }
})
```

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

### Paint 对象使用示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/类型和配置.md

Paint 对象的使用示例，包括纯色、线性渐变、径向渐变和图像填充。

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

// 纯色填充
const rect1 = new Rect({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    fill: '#32cd79'
})

// 线性渐变
const rect2 = new Rect({
    x: 110,
    y: 0,
    width: 100,
    height: 100,
    fill: {
        type: 'linear',
        colors: ['#32cd79', '#ff6b6b'],
        x1: 0, y1: 0,
        x2: 100, y2: 100
    }
})

// 径向渐变
const circle = new Ellipse({
    x: 220,
    y: 0,
    width: 100,
    height: 100,
    fill: {
        type: 'radial',
        colors: ['#32cd79', '#ff6b6b'],
        cx: 50, cy: 50, r: 50
    }
})

// 图像填充
const image = new Image({
    x: 330,
    y: 0,
    width: 100,
    height: 100,
    fill: {
        type: 'image',
        url: 'https://example.com/image.png'
    }
})
```

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

### Display-Module 边界模块导出

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Export statement for boundary calculation within the Display-Module.

```typescript
UIBounds            // UI 边界计算
```

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

### 属性修改流程

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

The data flow for property modification.

```mermaid
用户代码
  ↓
element.set({property: value})
  ↓
ElementData.__setProperty()
  ↓
Watcher.addChanged()
  ↓
[下一帧]
  ↓
Watcher.update()
  ↓
Layouter.updateLayout()（如果需要）
  ↓
Renderer.render()
  ↓
Canvas 绘制
```

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

### getBounds 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

获取边界框的示例。

```typescript
rect.getBounds()
```

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

### UIEvent - 基础事件类

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

UIEvent class signature.

```typescript
class UIEvent extends Event implements IUIEvent {
    readonly x: number
    readonly y: number
    readonly path: ILeafList
    readonly altKey: boolean
    readonly ctrlKey: boolean
    readonly shiftKey: boolean
    readonly metaKey: boolean
    readonly buttons: number
    readonly target: ILeaf
    readonly current: ILeaf
    readonly bubbles: boolean = true
    readonly time: number
}
```

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

### 渐变填充

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

使用对象配置线性渐变填充，包括类型、颜色、起点和终点。

```typescript
{
    type: 'linear',
    colors: ['#32cd79', '#ff6b6b'],
    x1: 0, y1: 0,
    x2: 200, y2: 200
}
```

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

### 事件处理流程

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

The data flow for event handling.

```mermaid
系统事件（鼠标、触摸、键盘）
  ↓
Interaction 获取事件
  ↓
HitTesting 命中检测
  ↓
查找目标元素
  ↓
创建 UIEvent 对象
  ↓
目标元素处理
  ↓
事件冒泡（如果 bubbles=true）
  ↓
父元素处理
  ↓
Leafer 处理
```

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

### 触摸事件

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

监听触摸事件，并可获取触摸点的数量。

```typescript
leafer.on('touch', (e) => {
    e.touches.length  // 触摸点数
})
```

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

### 键盘事件

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

监听键盘按下和抬起事件，并可检查组合键状态。

```typescript
leafer.on('key.down', (e) => {})
leafer.on('key.up', (e) => {})

// 检查快捷键
if (e.isHoldKeys({ ctrl: true, key: 'a' })) {
    // Ctrl+A
}
```

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

### 核心架构 - 渲染引擎层

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

The rendering engine layer architecture.

```mermaid
canvas 绘制层
  ↓
Renderer（渲染器）
  ↓
Watcher（观察者）
  ↓
Layouter（布局引擎）
```

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

### 椭圆/圆

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建并配置一个椭圆或圆元素，包括位置、大小和填充色。

```typescript
new Ellipse({
    x: 100, y: 100,
    width: 100, height: 100,
    fill: '#32cd79'
})
```

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

### SVG 路径 - 基本用法

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/高级特性.md

使用 `Path` 类和 SVG 路径数据来创建和绘制复杂的矢量路径。

```typescript
import { Path } from 'leafer-ui'

const path = new Path({
    x: 100,
    y: 100,
    path: 'M 0 0 L 100 0 L 100 100 L 0 100 Z',
    fill: '#32cd79',
    stroke: '#333',
    strokeWidth: 2
})

leafer.add(path)
```

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

### 图像优化

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

通过设置 `dpr` 为 1 来降低像素比，优化图像加载和渲染性能。

```typescript
const leafer = new Leafer({
    view: window,
    dpr: 1  // 降低像素比
})
```

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

### 样式

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

设置元素的填充色、描边色、描边宽度、透明度、可见性、混合模式和光标样式。

```typescript
element.fill = '#32cd79'           // 填充色
element.stroke = '#333'            // 描边色
element.strokeWidth = 2            // 描边宽度
element.opacity = 0.8              // 透明度（0-1）
element.visible = true             // 可见性
element.blendMode = 'multiply'     // 混合模式
element.cursor = 'pointer'         // 光标
```

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

### 完整示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

一个展示如何使用 UI 基础类的完整示例，包括创建 Leafer、矩形、设置属性、监听事件、播放动画和获取边界信息。

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

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

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

// 添加到 Leafer
leafer.add(rect)

// 设置属性
rect.set({
    fill: '#ff6b6b',
    strokeWidth: 2,
    stroke: '#000'
})

// 监听交互事件
rect.on('pointer.down', (event) => {
    console.log('点击位置:', event.getLocalPoint(rect))
})

// 播放动画
rect.animate([
    { frame: 0, x: 100 },
    { frame: 60, x: 300 }
], { duration: 1000 })

// 获取边界信息
const bounds = rect.getBounds()
console.log('边界:', bounds)
```

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

### 路径

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建并配置一个路径元素，使用 SVG path 数据定义，并可设置描边颜色和宽度。

```typescript
new Path({
    path: 'M 0 0 L 100 100',
    stroke: '#333',
    strokeWidth: 2
})
```

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

### 性能考虑

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

关于事件委托、避免频繁事件中的复杂计算以及使用 lockLayout 优化批量更新的性能建议。

```typescript
// 1. 对大量元素使用事件委托
const group = new Group()
group.on('click', (event) => {
    if (event.target.__tag === 'Rect') {
        // 处理点击
    }
})

// 2. 避免在频繁事件中进行复杂计算
leafer.on('pointer.move', (event) => {
    // 使用防抖或节流
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => {
        // 执行计算
    }, 16)  // 大约 60 FPS
})

// 3. 使用 lockLayout 来优化批量更新
leafer.lockLayout()
for (let i = 0; i < 1000; i++) {
    // 创建并添加元素
}
leafer.unlockLayout(true)
```

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

### 修改属性

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

通过直接赋值或使用 `set` 方法修改元素属性，支持批量修改和带过渡的修改。

```typescript
// 单个属性
element.x = 100

// 多个属性
element.set({
    x: 100,
    y: 100,
    fill: '#32cd79'
})

// 带过渡
element.set({ x: 200 }, { duration: 1000 })
```

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

### 打包输出

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

展示了 leafer-ui 构建后的打包输出文件结构，包括不同模块格式（ESM, CommonJS, UMD）的 JS 文件以及 TypeScript 类型定义。

```text
dist/
├── web.esm.js             # ES Module 版本
├── web.esm.min.js         # ES Module 压缩版
├── web.cjs                # CommonJS 版本
├── web.min.cjs            # CommonJS 压缩版
├── web.js                 # UMD 版本
└── web.min.js             # UMD 压缩版

types/
└── index.d.ts             # TypeScript 类型定义
```

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

### 元素继承树

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

The inheritance tree for UI elements in LeaferJS.

```mermaid
Leaf（核心基类，来自 @leafer/core）
  └─ UI（UI 基类）
      ├─ Rect（矩形）
      ├─ Ellipse（椭圆）
      ├─ Polygon（多边形）
      ├─ Star（星形）
      ├─ Line（线段）
      ├─ Image（图像）
      ├─ Text（文本）
      ├─ Path（路径）
      ├─ Canvas（画布）
      ├─ Pen（画笔）
      └─ Group（分组）
          ├─ Box（盒子）
          │   └─ Frame（框架）
          └─ Leafer（叶子引擎）
```

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

### 拖拽事件

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

监听和处理拖拽事件，包括拖拽开始、拖拽中和拖拽结束。

```typescript
element.on('drag.start', (e) => {})
element.on('drag', (e) => {})
element.on('drag.end', (e) => {})
```

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

### 多点触摸

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

监听触摸事件，获取触摸点数量和每个触摸点的坐标。

```typescript
leafer.on('touch', (event) => {
    console.log('触摸点数:', event.touches.length)
    
    // 遍历所有触摸点
    event.touches.forEach((touch, index) => {
        console.log(`触摸点 ${index}:`, touch.x, touch.y)
    })
    
    // 检查是否为多点触摸
    if (event.touches.length > 1) {
        console.log('多点触摸')
    }
})
```

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

### 文本

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建并配置一个文本元素，包括位置、内容、字体大小和填充色。

```typescript
new Text({
    x: 100, y: 100,
    content: 'Hello',
    fontSize: 24,
    fill: '#333'
})
```

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

### 颜色格式

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

支持多种颜色格式，包括十六进制、RGB、RGBA、命名颜色和透明色。

```typescript
'#ff0000'                    // 十六进制
'rgb(255, 0, 0)'             // RGB
'rgba(255, 0, 0, 0.5)'       // RGBA
'red'                        // 命名颜色
'transparent'                // 透明
```

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

### 触摸设备优化

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

为触摸设备启用平滑渲染并调整交互区域。

```typescript
const leafer = new Leafer({
    view: window,
    smooth: true  // 启用平滑渲染
})

// 为触摸设备增大点击区域
const isTouchDevice = () => {
    return (('ontouchstart' in window) ||
            (navigator.maxTouchPoints > 0) ||
            (navigator.msMaxTouchPoints > 0))
}

if (isTouchDevice()) {
    // 增加元素大小或交互区域
    rect.width = 100  // 更大的点击目标
}
```

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

### isHoldKeys method signature

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/事件系统.md

isHoldKeys method signature.

```typescript
public isHoldKeys(shortcutKeys?: IShortcutKeysCheck | IShortcutKeys): boolean
```

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

### getInnerPoint 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

获取内部坐标点的示例。

```typescript
rect.getInnerPoint(point, relative?, skipRotation?)
```

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

### 径向渐变

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

使用对象配置径向渐变填充，包括类型、颜色、中心点和半径。

```typescript
{
    type: 'radial',
    colors: ['#32cd79', '#ff6b6b'],
    cx: 100, cy: 100,
    r: 50
}
```

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

### 关键性能指标

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

提供了一些用于监控和优化性能的关键指标和方法，例如 FPS 监控、渲染边界和布局锁定。

```typescript
// FPS 监控
console.log(leafer.FPS)

// 渲染边界
leafer.forceRender(bounds)

// 布局锁定
leafer.lockLayout()
// ... 批量操作
leafer.unlockLayout()
```

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

### emit 方法示例

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/ui-基础-类.md

触发事件的示例。

```typescript
rect.emit(type, params?)
```

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

### FPS 监控

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/高级特性.md

通过 `leafer.FPS` 属性实时监控应用程序的帧率。

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

// 获取当前 FPS
setInterval(() => {
    console.log('FPS:', leafer.FPS)
}, 1000)
```

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

### 交互式按钮

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

创建一个可交互的按钮，通过鼠标悬停改变透明度，点击时打印日志。

```typescript
const button = new Rect({
    x: 100, y: 100,
    width: 150, height: 50,
    fill: '#32cd79',
    cursor: 'pointer'
})

button.on('pointer.enter', () => {
    button.opacity = 0.8
})

button.on('pointer.leave', () => {
    button.opacity = 1
})

button.on('click', () => {
    console.log('点击了按钮')
})

leafer.add(button)
```

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

### 交互响应性

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/交互和平台.md

关于提供视觉反馈、使用合适的光标、平滑过渡和处理多种交互方式的最佳实践。

```typescript
// 1. 提供视觉反馈
rect.on('pointer.down', () => {
    rect.fill = '#ff6b6b'  // 改变颜色
})

// 2. 使用合适的光标
rect.cursor = 'pointer'

// 3. 使用平滑过渡
rect.set({ opacity: 0.8 }, { duration: 200 })

// 4. 处理多种交互方式
rect.on('click', handleClick)
rect.on('tap', handleClick)
```

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

### 交互

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/快速参考.md

配置元素的拖拽、命中检测和锁定状态。

```typescript
element.draggable = true           // 可拖拽
element.hittable = true            // 命中检测
element.locked = false             // 锁定
```

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

### 渲染优化

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/高级特性.md

通过锁定布局来提高性能，尤其是在进行多个修改时。

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

// 锁定布局以提高性能（当进行多个修改时）
leafer.lockLayout()

// 进行多个修改
const rect1 = new Rect({ x: 0, y: 0, width: 100, height: 100 })
const rect2 = new Rect({ x: 110, y: 0, width: 100, height: 100 })
const rect3 = new Rect({ x: 220, y: 0, width: 100, height: 100 })

leafer.add(rect1)
leafer.add(rect2)
leafer.add(rect3)

// 更新位置
rect1.x = 10
rect2.x = 120
rect3.x = 230

// 解锁布局并更新
leafer.unlockLayout(true)
```

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

### Interface 模块导出

Source: https://github.com/leaferjs/leafer-ui/blob/main/_autodocs/模块结构和架构.md

Export statements for interfaces and types in the Interface module.

```typescript
export {
    // UI 元素接口
    IRect, IEllipse, IPolygon, IStar, ILine, IImage, IText, IPath, IPen,
    IBox, IFrame, IGroup, IUI,
    
    // 应用接口
    IApp, ILeafer,
    
    // 数据接口
    IUIData, ILeaferData, ...
}
```