54:T6f1,// #创建 Robot 游戏元素 [leafer-game] import { Leafer, Robot, KeyEvent } from 'leafer-game' const leafer = new Leafer({ view: window }) const robot = new Robot({ robot: { url: '/image/arrows.png', size: { width: 100, height: 100 }, total: 20 }, actions: { // 预设游戏动作（通过动作帧） up: 0, // 静止向上的箭头（编号为0的动作帧） right: 5, down: 10, left: 15, arrowUp: [0, 1, 2, 3, 4], // 动态向上的箭头（循环播放编号为 1-4 的动作帧） arrowRight: [5, 6, 7, 8, 9], arrowDown: [10, 11, 12, 13, 14], arrowLeft: [15, 16, 17, 18, 19] }, action: 'right' // 设置动作：静止向右的箭头 }) leafer.add(robot) // 监听方向键进行交互 let speed = 5 leafer.on(KeyEvent.DOWN, (e: KeyEvent) => { speed++ switch (e.code) { // 动态的方向箭头 case 'ArrowUp': robot.action = 'arrowUp' robot.y -= speed break case 'ArrowDown': robot.action = 'arrowDown' robot.y += speed break case 'ArrowLeft': robot.action = 'arrowLeft' robot.x -= speed break case 'ArrowRight': robot.action = 'arrowRight' robot.x += speed break } }) leafer.on(KeyEvent.UP, (e: KeyEvent) => { speed = 5 switch (e.code) { // 静态的方向箭头 case 'ArrowUp': robot.action = 'up' break case 'ArrowDown': robot.action = 'down' break case 'ArrowLeft': robot.action = 'left' break case 'ArrowRight': robot.action = 'right' break } })55:T5b6,// #Linker [创建连线点，自动吸附方向、偏移距离] import { App, Rect } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 import '@leafer-in/viewport' // 导入视口插件 (可选) import '@leafer-in/find' // 导入查找元素插件 import '@leafer-in/arrow' // 导入箭头插件 import { Linker } from '@leafer-in/linker' // 导入连线插件 // [!code hl] const app = new App({ view: window, editor: {} }) app.tree.cacheId = true // 创建时缓存元素id, 加快查找id的速度 const rect1 = Rect.one({ id: 'rect1', editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100) const rect2 = Rect.one({ id: 'rect2', editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 300) const rect3 = Rect.one({ id: 'rect3', editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 200) app.tree.add(rect1) app.tree.add(rect2) app.tree.add(rect3) const linker = new Linker({ startPoint: { id: 'rect1' }, endPoint: { id: 'rect3' }, endArrow: 'arrow', stroke: '#836DFF', strokeWidth: 2, }) app.tree.add(linker) setTimeout(() => { // 创建连线点，自动吸附方向 // [!code hl:4] console.log(linker.createStartPoint({ x: 400, y: 380 }, rect2, { snapRadius: 10 // 吸附到方向点上之后，如果吸附距离超过这个吸附半径（相对元素的Box坐标系），连接点对象会自动增加 offset: {x,y} })) }, 2000)56:T746,## pick(hitPoint, options?) ### Description 通过坐标点（相对世界坐标）拾取元素，支持获取穿透路径，返回拾取到的目标元素和路径。 ### Method pick ### Signature `pick(hitPoint: IPointData, options?: IPickOptions): IPickResult` ### Parameters #### hitPoint (IPointData) - Required 坐标点（相对世界坐标）。 #### options (IPickOptions) - Optional 拾取选项。 - **hitRadius** (number) - Optional - 拾取半径，默认为0。 - **through** (boolean) - Optional - 是否获取穿透路径，默认为false。 - **findList** (ILeaf[]) - Optional - 从指定的元素列表中拾取。 - **exclude** (ILeafList) - Optional - 排除指定的元素。 - **ignoreHittable** (boolean) - Optional - 忽略元素的hittable属性，默认为false。 ### Returns IPickResult - **target** (ILeaf) - 拾取到的目标元素。 - **path** (ILeafList) - 拾取路径，一般用于事件冒泡。 - **throughPath** (ILeafList) - 穿透路径，可以找到被目标元素遮挡的底部元素。 ### Example ```ts // Leafer 示例 import { Leafer, Rect } from 'leafer-ui' const leafer = new Leafer({ view: window }) const rect1 = new Rect({ id: 'block', fill: '#32cd79' }) const rect2 = new Rect({ fill: '#32cd79' }) leafer.add(rect1) leafer.add(rect2) console.log( leafer.pick({ x: 10, y: 10 }) // {taget: rect2, path: [rect2, leafer]} ) ``` ```ts // App 示例 import { App, Rect } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 import '@leafer-in/viewport' // 导入视口插件 (可选) const app = new App({ view: window, editor: {} }) const rect1 = new Rect({ id: 'block', fill: '#32cd79' }) const rect2 = new Rect({ fill: '#32cd79' }) app.tree.add(rect1) app.tree.add(rect2) console.log( app.pick({ x: 10, y: 10 }) // {taget: rect2, path: [rect2, tree, app]} ) ```53:{"contextType":"code","snippets":[{"codeTitle":"Selected state example with Leafer","codeDescription":"Shows how to set the selected state on a Rect using the Leafer environment. Requires installing @leafer-in/state and setting selectedStyle to define the selected appearance. The example toggles selected after 1 second and resets after 2 seconds.","codeLanguage":"ts","codeTokens":250,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/state/selected.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"ts","code":"import { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/state' // 导入交互状态插件 // [!code hl] \n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({\n width: 100,\n height: 100,\n fill: 'rgba(50,205,121, 0.7)',\n cornerRadius: 30,\n selectedStyle: { // [!code hl:3] // 选中样式\n fill: 'rgba(50,205,121, 1)'\n }\n})\n\nleafer.add(rect)\n\nsetTimeout(() => {\n\n rect.selected = true // [!code hl:1] // 设置选中状态 \n\n setTimeout(() => { rect.selected = false }, 2000)\n\n}, 1000)"}],"relevance":0.027242402,"generationDate":"2026-09-18T09:59:55.550Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Example: set() with transition","codeDescription":"Complete example of using set() with animation transition, requiring the '@leafer-in/animate' plugin.","codeLanguage":"ts","codeTokens":156,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/data.md#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"// #通过 set() 修改属性 [有动画过渡]\nimport { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/animate' // 导入动画插件\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = Rect.one({ fill: '#32cd79' })\n\nleafer.add(rect)\n\nsetTimeout(() => {\n\n // 设置元素的位置\n rect.set({ x: 100, y: 100 }, true) // [!code hl]\n\n}, 1000)","language":"ts"}],"relevance":0.02567694,"generationDate":"2026-09-18T10:10:34.556Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Commit message examples for feat, fix, perf, and revert","codeDescription":"These examples show the format for different commit types. The feat example appears under 'Features' header with a 'drag' subheader. The fix example appears under 'Bug Fixes' with a link to issue #16. The perf example appears under 'Performance Improvements' and includes a breaking change note. The revert example reverts a previous commit and includes the revert hash.","codeLanguage":"text","codeTokens":202,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/src/leafer-ui/contributor/COMMIT_CONVENTION.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"text","code":"feat(drag): add 'hover' option"},{"language":"text","code":"fix(editor): handle events on select\n\nclose #16"},{"language":"text","code":"perf(core): improve vdom diffing by removing 'foo' option\n\nBREAKING CHANGE: The 'foo' option has been removed."},{"language":"text","code":"revert: feat(drag): add 'hover' option\n\nThis reverts commit 667ecc1654a317a13331b17617d973392f415f02."}],"relevance":0.02556367,"generationDate":"2026-09-18T10:15:07.552Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"start()","codeDescription":"启动/重启引擎。","codeLanguage":"APIDOC","codeTokens":131,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/display/Leafer.md#_snippet_14","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## start()\n\n### Description\n启动/重启引擎。\n\n### Method\nstart\n\n### Parameters\n无。\n\n### Example\n```ts\n// #应用与引擎配置 - 手动启动应用 [Leafer]\nimport { Leafer } from 'leafer-ui'\n\nconst leafer = new Leafer({\n view: window,\n start: false // [!code hl]\n})\n\n// async create leafs ...\n\nleafer.start() \n```\n"}],"relevance":0.024666667,"generationDate":"2026-09-18T10:05:07.448Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"PressStyle example (App)","codeDescription":"Example for setting pressStyle on a Rect in an App instance. Requires the '@leafer-in/state' plugin, and optionally the editor and viewport plugins. The pressStyle defines the fill when the pointer is down, and it reverts on release.","codeLanguage":"ts","codeTokens":259,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/state/press.md#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"ts","code":"// #光标按下时的交互样式 (App)\nimport { App, Rect } from 'leafer-ui'\nimport '@leafer-in/editor' // 导入图形编辑器插件\nimport '@leafer-in/viewport' // 导入视口插件 (可选)\n\nimport '@leafer-in/state' // 导入交互状态插件 // [!code hl] \n\nconst app = new App({ view: window, editor: {} })\n\nconst rect = new Rect({\n width: 100,\n height: 100,\n fill: 'rgba(50,205,121, 0.7)',\n cornerRadius: 30,\n pressStyle: { // [!code hl:3] // press 样式\n fill: 'rgba(50,205,121, 1)'\n }\n})\n\napp.tree.add(rect)"}],"relevance":0.022579897,"generationDate":"2026-09-18T09:59:06.842Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Example: set() without transition","codeDescription":"Complete example of using set() without animation transition, with a 1-second delay.","codeLanguage":"ts","codeTokens":134,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/data.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"// #通过 set() 修改属性 [无动画过渡]\nimport { Leafer, Rect } from 'leafer-ui'\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = Rect.one({ fill: '#32cd79' })\n\nleafer.add(rect)\n\nsetTimeout(() => {\n\n // 设置元素的位置\n rect.set({ x: 100, y: 100 }) // [!code hl]\n\n}, 1000)","language":"ts"}],"relevance":0.022079773,"generationDate":"2026-09-18T10:10:34.556Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"PressStyle example (Leafer)","codeDescription":"Example for setting pressStyle on a Rect in a Leafer instance. Requires the '@leafer-in/state' plugin. The pressStyle defines the fill when the pointer is down, and it reverts on release.","codeLanguage":"ts","codeTokens":219,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/state/press.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"ts","code":"// #光标按下时的交互样式 (Leafer)\nimport { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/state' // 导入交互状态插件 // [!code hl] \n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({\n width: 100,\n height: 100,\n fill: 'rgba(50,205,121, 0.7)',\n cornerRadius: 30,\n pressStyle: { // [!code hl:3] // press 样式\n fill: 'rgba(50,205,121, 1)'\n }\n})\n\nleafer.add(rect)"}],"relevance":0.020991562,"generationDate":"2026-09-18T09:59:06.842Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-game with bun","codeDescription":"Install the leafer-game package using bun.","codeLanguage":"sh","codeTokens":37,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_3","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"sh","code":"bun add leafer-game"}],"relevance":0.016666668,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"waitInit(item: function, bind?: object)","codeDescription":"在引擎初始化（完成 init 各种管理器）后执行 item 函数，可通过 bind 参数绑定 this 对象。若已完成则立即执行。","codeLanguage":"APIDOC","codeTokens":166,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/display/Leafer.md#_snippet_8","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## waitInit(item: function, bind?: object)\n\n### Description\n在引擎初始化（完成 init 各种管理器）后执行 item 函数，可通过 bind 参数绑定 this 对象。若已完成则立即执行。\n\n### Method\nwaitInit\n\n### Parameters\n- **item** (function) - Required - 要执行的函数。\n- **bind** (object) - Optional - 绑定 item 函数的 this 对象。\n"}],"relevance":0.016393442,"generationDate":"2026-09-18T10:05:07.448Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-game with yarn","codeDescription":"Install the leafer-game package using yarn.","codeLanguage":"sh","codeTokens":37,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_2","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"sh","code":"yarn add leafer-game"}],"relevance":0.016393442,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"init(target, keyframe, options?, isTemp?)","codeDescription":"Reinitializes the animation with a new target, keyframe, and options.","codeLanguage":"APIDOC","codeTokens":155,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/plugin/in/animate/Animate.md#_snippet_10","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## init(target, keyframe, options?, isTemp?)\n\n### Description\nReinitializes the animation with a new target, keyframe, and options.\n\n### Method\ninit\n\n### Parameters\n- **target** (UI) - Required - The target UI element.\n- **keyframe** (IUIInputData | IKeyframe[]) - Required - The keyframe data.\n- **options** (ITranstion) - Optional - Transition options.\n- **isTemp** (boolean) - Optional - Whether the animation is temporary.\n\n### Response\nNone"}],"relevance":0.016129032,"generationDate":"2026-09-18T09:41:49.606Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-game with pnpm","codeDescription":"Install the leafer-game package using pnpm.","codeLanguage":"sh","codeTokens":39,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_1","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"sh","code":"pnpm add leafer-game"}],"relevance":0.016129032,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-game with npm","codeDescription":"Install the leafer-game package using npm.","codeLanguage":"sh","codeTokens":36,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_0","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"sh","code":"npm install leafer-game"}],"relevance":0.015873017,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Color transition animation example","codeDescription":"Shows how to animate color transition using the animate method with a style keyframe that includes fill. Requires the animate plugin import.","codeLanguage":"ts","codeTokens":197,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/animate.md#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"ts","code":"// #动画方法 [颜色过渡]\nimport { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/animate' // 导入动画插件\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })\n\nleafer.add(rect)\n\nrect.animate( // [!code hl:7]\n { x: 500, cornerRadius: 0, fill: '#ffcd00' }, // style keyframe\n {\n duration: 1,\n swing: true // 摇摆循环播放\n } // options\n)"}],"relevance":0.015625,"generationDate":"2026-09-18T10:10:47.464Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Create a Robot game element with keyboard interaction","codeDescription":"Creates a Robot game element with predefined actions and listens for arrow key events to move it. The example uses leafer-game and demonstrates the Robot, KeyEvent, and action configuration.","codeLanguage":"ts","codeTokens":591,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_8","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"ts","code":"$54"}],"relevance":0.015625,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"get","codeDescription":"获取设置过的样式属性数据或属性值。","codeLanguage":"APIDOC","codeTokens":142,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/data.md#_snippet_8","pageTitle":"Unknown","codeList":[{"code":"## get(): IUIInputData\n\n### Description\n获取设置过的样式属性数据（输入数据）。\n\n### Method\nget\n\n### Response\n- **IUIInputData** - 设置过的样式属性数据\n\n## get(name: string): IValue\n\n### Description\n获取设置过的属性值（输入数据），未设置返回 undefined。\n\n### Method\nget\n\n### Parameters\n- **name** (string) - Required - 属性名\n\n### Response\n- **IValue** - 属性值，未设置返回 undefined","language":"APIDOC"}],"relevance":0.015570097,"generationDate":"2026-09-18T09:51:56.766Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Example: Scale around (50,50)","codeDescription":"Creates a rectangle with `around: 'center'` and scales it 1.5 times around the point (50,50).","codeLanguage":"APIDOC","codeTokens":409,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/around.md#_snippet_13","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## Example: Scale around (50,50)\n\n### Description\nCreates a rectangle with `around: 'center'` and scales it 1.5 times around the point (50,50).\n\n### Code (Leafer)\n```ts\nimport { Leafer, Rect, Frame } from 'leafer-ui'\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({\n x: 50,\n y: 50,\n width: 50,\n height: 50,\n around: 'center',\n scale: 1.5, // scaleX = scaleY = 1.5\n fill: '#4DCB71',\n draggable: true\n})\n\nleafer.add(new Frame({ width: 100, height: 100, fill: '#FF4A2C', children: [rect] }))\n```\n\n### Code (App)\n```ts\nimport { App, Rect, Frame } from 'leafer-ui'\nimport '@leafer-in/editor' // 导入图形编辑器插件\nimport '@leafer-in/viewport' // 导入视口插件 (可选)\n\nconst app = new App({ view: window, editor: {} })\n\nconst rect = new Rect({\n x: 50,\n y: 50,\n width: 50,\n height: 50,\n around: 'center',\n scale: 1.5, // scaleX = scaleY = 1.5\n fill: '#4DCB71',\n draggable: true\n})\n\napp.tree.add(new Frame({ width: 100, height: 100, fill: '#FF4A2C', children: [rect] }))\n```"}],"relevance":0.015384615,"generationDate":"2026-09-18T09:50:49.580Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"手动启动应用 (Leafer and App)","codeDescription":"Manually start the engine after creating many graphics asynchronously to speed up creation. Set start: false in the config and call start() when ready. The Leafer example uses a plain Leafer instance; the App example uses an App with a tree layer.","codeLanguage":"ts","codeTokens":178,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/config/app/base.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"import { Leafer } from 'leafer-ui'\n\nconst leafer = new Leafer({\n view: window,\n start: false // [!code hl]\n})\n\n// async create leafs ...\n\nleafer.start() ","language":"ts"},{"code":"import { App } from 'leafer-ui'\n\nconst app = new App({\n view: window,\n tree: {},\n start: false // [!code hl]\n})\n\n// async create leafs ...\n\napp.start() ","language":"ts"}],"relevance":0.015384615,"generationDate":"2026-09-18T10:00:02.921Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-draw with bun","codeDescription":"Install the leafer-draw package using bun. Suitable for pure drawing scenarios in web environments.","codeLanguage":"sh","codeTokens":49,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_3","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"sh","code":"bun add leafer-draw"}],"relevance":0.015151516,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Keyframe animation example","codeDescription":"Shows how to create a keyframe animation with multiple keyframes, including style keyframes and animate keyframes, with options for duration, loop, and join.","codeLanguage":"ts","codeTokens":374,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/animate.md#_snippet_2","pageTitle":"Unknown","codeList":[{"language":"ts","code":"// #动画方法 [关键帧动画]\nimport { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/animate' // 导入动画插件\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({ x: 50, y: 100, cornerRadius: 50, fill: '#32cd79', around: 'center' })\n\nleafer.add(rect)\n\nrect.animate( // [!code hl:13]\n [\n { style: { x: 150, scaleX: 2, fill: '#ffcd00' }, duration: 0.5 }, // animate keyframe\n { style: { x: 50, scaleX: 1, fill: '#ffcd00' }, duration: 0.2 },\n { style: { x: 550, cornerRadius: 0, fill: '#ffcd00' }, delay: 0.1, easing: 'bounce-out' },\n { x: 50, rotation: -720, cornerRadius: 50 } // style keyframe\n ],\n {\n duration: 3, // 自动分配剩余的时长给未设置 duration 的关键帧： (3 - 0.5 - 0.2 - 0.1) / 2 \n loop: true,\n join: true // 加入动画前的元素状态作为 from 关键帧\n } // options\n)"}],"relevance":0.015151516,"generationDate":"2026-09-18T10:10:47.464Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-draw with yarn","codeDescription":"Install the leafer-draw package using yarn. Suitable for pure drawing scenarios in web environments.","codeLanguage":"sh","codeTokens":49,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_2","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"sh","code":"yarn add leafer-draw"}],"relevance":0.014925373,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-draw with pnpm","codeDescription":"Install the leafer-draw package using pnpm. Suitable for pure drawing scenarios in web environments.","codeLanguage":"sh","codeTokens":51,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_1","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"sh","code":"pnpm add leafer-draw"}],"relevance":0.014705882,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Install leafer-draw with npm","codeDescription":"Install the leafer-draw package using npm. Suitable for pure drawing scenarios in web environments.","codeLanguage":"sh","codeTokens":48,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_0","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"sh","code":"npm install leafer-draw"}],"relevance":0.014492754,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Example: Draw around (50,50)","codeDescription":"Creates a rectangle with `around: 'center'` positioned at (50,50) to demonstrate drawing around a specific point.","codeLanguage":"APIDOC","codeTokens":371,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/around.md#_snippet_12","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## Example: Draw around (50,50)\n\n### Description\nCreates a rectangle with `around: 'center'` positioned at (50,50) to demonstrate drawing around a specific point.\n\n### Code (Leafer)\n```ts\nimport { Leafer, Rect, Frame } from 'leafer-ui'\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({\n x: 50,\n y: 50,\n width: 50,\n height: 50,\n around: 'center',\n fill: '#4DCB71',\n draggable: true\n})\n\nleafer.add(new Frame({ width: 100, height: 100, fill: '#FF4A2C', children: [rect] }))\n```\n\n### Code (App)\n```ts\nimport { App, Rect, Frame } from 'leafer-ui'\nimport '@leafer-in/editor' // 导入图形编辑器插件\nimport '@leafer-in/viewport' // 导入视口插件 (可选)\n\nconst app = new App({ view: window, editor: {} })\n\nconst rect = new Rect({\n x: 50,\n y: 50,\n width: 50,\n height: 50,\n around: 'center',\n fill: '#4DCB71',\n draggable: true\n})\n\napp.tree.add(new Frame({ width: 100, height: 100, fill: '#FF4A2C', children: [rect] }))\n```"}],"relevance":0.014492754,"generationDate":"2026-09-18T09:50:49.580Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Animate.fromStyle","codeDescription":"Gets the from frame state style as an IUIInputData object. This property is read-only and represents the starting style of the animation.","codeLanguage":"APIDOC","codeTokens":116,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/plugin/in/animate/Animate/style.md#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## Animate.fromStyle\n\n### Description\nGets the from frame state style as an IUIInputData object. This property is read-only and represents the starting style of the animation.\n\n### Property\n`fromStyle: IUIInputData` (read-only)\n\n### Returns\n- **IUIInputData** - The from frame state style."}],"relevance":0.014285714,"generationDate":"2026-09-18T09:38:10.660Z","model":"gemini-3.1-flash-lite"},{"codeTitle":"Swing loop animation example","codeDescription":"Shows how to create a swing loop animation using the animate method with a style keyframe and options. Requires the animate plugin import.","codeLanguage":"ts","codeTokens":190,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/animate.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"ts","code":"// #动画方法 [摇摆动画]\nimport { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/animate' // 导入动画插件\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({ y: 100, cornerRadius: 50, fill: '#32cd79' })\n\nleafer.add(rect)\n\nrect.animate( // [!code hl:7]\n { x: 500, cornerRadius: 0 }, // style keyframe\n {\n duration: 1,\n swing: true // 摇摆循环播放\n } // options\n)"}],"relevance":0.014285714,"generationDate":"2026-09-18T10:10:47.464Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Example: Rotate around (50,50)","codeDescription":"Creates a rectangle with `around: 'center'` and rotates it 45 degrees around the point (50,50).","codeLanguage":"APIDOC","codeTokens":381,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/around.md#_snippet_14","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## Example: Rotate around (50,50)\n\n### Description\nCreates a rectangle with `around: 'center'` and rotates it 45 degrees around the point (50,50).\n\n### Code (Leafer)\n```ts\nimport { Leafer, Rect, Frame } from 'leafer-ui'\n\nconst leafer = new Leafer({ view: window })\n\nconst rect = new Rect({\n x: 50,\n y: 50,\n width: 50,\n height: 50,\n around: 'center',\n rotation: 45,\n fill: '#4DCB71',\n draggable: true\n})\n\nleafer.add(new Frame({ width: 100, height: 100, fill: '#FF4A2C', children: [rect] }))\n```\n\n### Code (App)\n```ts\nimport { App, Rect, Frame } from 'leafer-ui'\nimport '@leafer-in/editor' // 导入图形编辑器插件\nimport '@leafer-in/viewport' // 导入视口插件 (可选)\n\nconst app = new App({ view: window, editor: {} })\n\nconst rect = new Rect({\n x: 50,\n y: 50,\n width: 50,\n height: 50,\n around: 'center',\n rotation: 45,\n fill: '#4DCB71',\n draggable: true\n})\n\napp.tree.add(new Frame({ width: 100, height: 100, fill: '#FF4A2C', children: [rect] }))\n```"}],"relevance":0.014084507,"generationDate":"2026-09-18T09:50:49.580Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Input data layer example","codeDescription":"Illustrates the input data layer: get() returns undefined for unset properties, while direct property access returns the default value.","codeLanguage":"ts","codeTokens":78,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/data.md#_snippet_1","pageTitle":"Unknown","codeList":[{"code":"const rect = new Rect()\n\nrect.get('width') // undefined，返回输入数据\nrect.width // 100，返回输入数据优先, 不存在则返回默认值","language":"ts"}],"relevance":0.013888889,"generationDate":"2026-09-18T09:51:56.766Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"IPathCommandData example","codeDescription":"Numeric path data as a high-performance one-dimensional array. Only supports Canvas commands; can be created via PathCreator.","codeLanguage":"ts","codeTokens":91,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/interface/ui/PathData.md#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"ts","code":"const data = [1, 0, 0, 2, 100, 100, 2, 0, 100, 11] // M 0 0 L 100 100 L 0 100 Z"}],"relevance":0.013888889,"generationDate":"2026-09-18T10:08:41.878Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Import leafer-game as ES module (module)","codeDescription":"Import the non-minified ES module build of leafer-game. The module exports Leafer, Editor, and Arrow.","codeLanguage":"html","codeTokens":97,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_7","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"html","code":""}],"relevance":0.01369863,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"createStartPoint(worldPoint, node?, options?)","codeDescription":"Creates a start point for the linker connection. It automatically determines the connection point data on the target node based on the world coordinates, or creates a pure coordinate point if no node is provided.","codeLanguage":"APIDOC","codeTokens":253,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/plugin/in/linker/index.md#_snippet_7","pageTitle":"Linker 元素文档","codeList":[{"language":"APIDOC","code":"## createStartPoint(worldPoint, node?, options?)\n\n### Description\nCreates the start point for the linker connection. It automatically determines the connection point data on the target node based on the world coordinates, or creates a pure coordinate point if no node is provided.\n\n### Method\ncreateStartPoint\n\n### Parameters\n- **worldPoint** (IPointData) - Required - The world coordinate point.\n- **node** (UI) - Optional - The target element to attach the point to.\n- **options** (ILinkerPointOptions) - Optional - Options for point creation.\n\n### Options\n- **snapRadius** (number) - Optional - If the snap distance exceeds this radius, the connection point object will automatically add an offset.\n- **mode** (string) - Optional - Snap mode: 'edge', 'four', 'auto', or 'free'.\n\n### Returns\n- **ILinkerPointData** - The created start point data."}],"relevance":0.01369863,"generationDate":"2026-10-26T03:32:34.652Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Create connection point with auto snap direction and offset","codeDescription":"Creates a Linker between two rectangles and then after 2 seconds logs the result of calling createStartPoint with a snapRadius of 10. The snapRadius causes an offset to be added if the snap distance exceeds the radius.","codeLanguage":"TypeScript","codeTokens":590,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/plugin/in/linker/index.md#_snippet_14","pageTitle":"Linker 元素文档","codeList":[{"language":"TypeScript","code":"$55"}],"relevance":0.013513514,"generationDate":"2026-10-26T03:32:34.652Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Import leafer-game as ES module (module.min)","codeDescription":"Import the minified ES module build of leafer-game. The module exports Leafer, Editor, and Arrow.","codeLanguage":"html","codeTokens":98,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_6","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"html","code":""}],"relevance":0.013513514,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Generate poster with @leafer-draw/miniapp","codeDescription":"Create a rectangle and export it as an image using an offscreen canvas. The example automatically creates a 350x800 offscreen canvas and saves the export to the album.","codeLanguage":"ts","codeTokens":215,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/miniapp/start.md#_snippet_5","pageTitle":"@leafer-draw/miniapp Installation and Usage","codeList":[{"language":"ts","code":"import { Leafer, Rect } from '@leafer-draw/miniapp'\n\nPage({\n onReady() {\n // 自动创建一个 350*800 的离屏画布\n const leafer = new Leafer({ width: 350, height: 800 })\n\n const rect = new Rect({\n x: 100,\n y: 100,\n width: 100,\n height: 100,\n fill: '#32cd79',\n })\n\n leafer.add(rect)\n\n // 自动保存到相册\n leafer.export('album.png', { screenshot: true }).then(() => {\n // 提示保存到相册成功逻辑\n })\n },\n})"}],"relevance":0.013333334,"generationDate":"2026-10-26T03:31:11.983Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"LeaferEvent.START","codeDescription":"触发引擎启动事件。监听此事件可在引擎启动时执行逻辑。","codeLanguage":"APIDOC","codeTokens":88,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/event/basic/Leafer.md#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## LeaferEvent.START\n\n### Description\n触发引擎启动事件。\n\n### Event Name\n`LeaferEvent.START`\n\n### Event String\n`leafer.start`\n"}],"relevance":0.013333334,"generationDate":"2026-09-18T10:05:40.803Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Import leafer-draw as ES module (module)","codeDescription":"Import leafer-draw as an ES module using the non-minified module build. Use the import statement to access the Leafer class.","codeLanguage":"html","codeTokens":94,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_7","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"html","code":""}],"relevance":0.013157895,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Import leafer-draw as ES module (module.min)","codeDescription":"Import leafer-draw as an ES module using the minified module build. Use the import statement to access the Leafer class.","codeLanguage":"html","codeTokens":95,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_6","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"html","code":""}],"relevance":0.012987013,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"IPathString example","codeDescription":"String path data using SVG and Canvas drawing commands.","codeLanguage":"ts","codeTokens":47,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/interface/ui/PathData.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"ts","code":"const data = 'M 0 0 L 100 100 L 0 100 Z'"}],"relevance":0.012987013,"generationDate":"2026-09-18T10:08:41.878Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Immediately stop event flow propagation (JavaScript)","codeDescription":"JavaScript version of the example using e.stopNow() to immediately stop event propagation. The setup and behavior are identical to the TypeScript version, but without type annotations.","codeLanguage":"JavaScript","codeTokens":300,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/event/basic/Event.md#_snippet_3","pageTitle":"Unknown","codeList":[{"language":"JavaScript","code":"// #立即阻止事件流传递\nimport { Leafer, Group, Rect, PointerEvent } from 'leafer-ui'\n\nconst leafer = new Leafer({ view: window })\n\nconst parent = new Group()\nconst rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })\n\nleafer.add(parent)\nparent.add(rect)\n\n// 捕获 ---\nparent.on(PointerEvent.ENTER, function (e) { // [!code hl:10]\n console.log('[capture] Parent enter A')\n e.stopNow() // 阻止事件向父节点及同级传递 // [!code hl]\n}, true)\n\nparent.on(PointerEvent.ENTER, function () {\n console.log('[capture] Parent enter B')\n}, true)\n\n// [capture] Parent enter A\n\nrect.on(PointerEvent.ENTER, function () {\n console.log('[capture] Rect enter')\n}, true)\n\n\n// 冒泡 ---\nrect.on(PointerEvent.ENTER, function () {\n console.log('[bubble] Rect enter')\n})\n\nparent.on(PointerEvent.ENTER, function () {\n console.log('[bubble] Parent enter')\n})"}],"relevance":0.012820513,"generationDate":"2026-09-18T10:05:01.656Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Stop event flow propagation (JavaScript)","codeDescription":"JavaScript version of the example using e.stop() to prevent event propagation to parent nodes. The setup and behavior are identical to the TypeScript version, but without type annotations.","codeLanguage":"JavaScript","codeTokens":302,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/event/basic/Event.md#_snippet_1","pageTitle":"Unknown","codeList":[{"language":"JavaScript","code":"// #阻止事件流传递 \nimport { Leafer, Group, Rect, PointerEvent } from 'leafer-ui'\n\nconst leafer = new Leafer({ view: window })\n\nconst parent = new Group()\nconst rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })\n\nleafer.add(parent)\nparent.add(rect)\n\n// 捕获 ---\nparent.on(PointerEvent.ENTER, function (e) { // [!code hl:11]\n console.log('[capture] Parent enter A')\n e.stop() // 阻止事件向父节点传递 // [!code hl]\n}, true)\n\nparent.on(PointerEvent.ENTER, function () {\n console.log('[capture] Parent enter B')\n}, true)\n\n// [capture] Parent enter A\n// [capture] Parent enter B\n\nrect.on(PointerEvent.ENTER, function () {\n console.log('[capture] Rect enter')\n}, true)\n\n\n// 冒泡 ---\nrect.on(PointerEvent.ENTER, function () {\n console.log('[bubble] Rect enter')\n})\n\nparent.on(PointerEvent.ENTER, function () {\n console.log('[bubble] Parent enter')\n})"}],"relevance":0.012658228,"generationDate":"2026-09-18T10:05:01.656Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"pick(hitPoint, options?)","codeDescription":"通过坐标点（相对世界坐标）拾取元素，支持获取穿透路径，返回拾取到的目标元素和路径。","codeLanguage":"APIDOC","codeTokens":686,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/pick.md#_snippet_2","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"$56"}],"relevance":0.0125,"generationDate":"2026-09-18T09:57:08.171Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Include leafer-game via script tag (web)","codeDescription":"Include the non-minified web build of leafer-game via a script tag. The LeaferUI global provides Leafer, Robot, and Animate.","codeLanguage":"html","codeTokens":106,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_5","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"html","code":"\n"}],"relevance":0.0125,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"LeaferEvent.AFTER_READY","codeDescription":"引擎准备就绪后触发。监听此事件可在引擎就绪后执行逻辑。","codeLanguage":"APIDOC","codeTokens":104,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/event/basic/Leafer.md#_snippet_6","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## LeaferEvent.AFTER_READY\n\n### Description\n引擎准备就绪后触发。\n\n### Event Name\n`LeaferEvent.AFTER_READY`\n\n### Event String\n`leafer.after_ready`\n"}],"relevance":0.012345679,"generationDate":"2026-09-18T10:05:40.803Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Include leafer-game via script tag (web.min)","codeDescription":"Include the minified web build of leafer-game via a script tag. The LeaferUI global provides Leafer, Robot, and Animate.","codeLanguage":"html","codeTokens":107,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/game/start.md#_snippet_4","pageTitle":"leafer-game Installation and Usage Guide","codeList":[{"language":"html","code":"\n"}],"relevance":0.012345679,"generationDate":"2026-10-26T03:31:21.407Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Data proxy initialization","codeDescription":"Shows the creation of the DataProcessor instance during UI initialization, which processes and stores attribute data.","codeLanguage":"ts","codeTokens":60,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/display/custom/attr.md#_snippet_4","pageTitle":"Unknown","codeList":[{"language":"ts","code":"this.__ = new this.__DataProcessor(this) // 初始化 UI 的时候会创建如下数据处理实例"}],"relevance":0.0121951215,"generationDate":"2026-09-18T10:02:50.402Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Include leafer-draw via script tag (web)","codeDescription":"Include leafer-draw via a script tag using the non-minified web build. The global variable LeaferUI is used to access the Leafer class.","codeLanguage":"html","codeTokens":104,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_5","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"html","code":"\n"}],"relevance":0.0121951215,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"使用 path 属性 (App)","codeDescription":"在 App 环境中，通过设置 path 属性为路径数据字符串，并设置 windingRule 为 'evenodd'，将矩形转为路径优先模式。需要导入 editor 和 viewport 插件。","codeLanguage":"ts","codeTokens":228,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/path.md#_snippet_5","pageTitle":"Unknown","codeList":[{"language":"ts","code":"// #Rect 转路径优先模式 [使用 path 属性 (App)]\nimport { App, Rect } from 'leafer-ui'\nimport '@leafer-in/editor' // 导入图形编辑器插件\nimport '@leafer-in/viewport' // 导入视口插件 (可选)\n\nconst app = new App({ view: window, editor: {} })\n\nconst rect = new Rect({\n width: 100,\n height: 100,\n windingRule: 'evenodd', // [!code hl:2] \n path: 'X0 0 100 100 30M75 50P50 50 25',\n fill: '#32cd79'\n})\n\napp.tree.add(rect)"}],"relevance":0.012048192,"generationDate":"2026-09-18T09:58:55.343Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Include leafer-draw via script tag (web.min)","codeDescription":"Include leafer-draw via a script tag using the minified web build. The global variable LeaferUI is used to access the Leafer class.","codeLanguage":"html","codeTokens":105,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/guide/install/draw/start.md#_snippet_4","pageTitle":"leafer-draw Installation and Usage Guide","codeList":[{"language":"html","code":"\n"}],"relevance":0.012048192,"generationDate":"2026-10-26T03:31:17.037Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Vue 3 Reactive Data Example: App.vue","codeDescription":"Vue 3 component that creates a Rect, gets its proxyData, and demonstrates synchronous updates between proxyData and rect data. The page shows the width changing from 100 to 1 to 2, and clicking the number sets it to 3.","codeLanguage":"vue","codeTokens":245,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/proxy.md#_snippet_0","pageTitle":"Unknown","codeList":[{"language":"vue","code":"\n\n\n\n"}],"relevance":0.011904762,"generationDate":"2026-09-18T10:13:13.983Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"LeaferEvent.BEFORE_READY","codeDescription":"在引擎准备就绪前触发。监听此事件可在引擎准备之前执行逻辑。","codeLanguage":"APIDOC","codeTokens":110,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/event/basic/Leafer.md#_snippet_4","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## LeaferEvent.BEFORE_READY\n\n### Description\n在引擎准备就绪前触发。\n\n### Event Name\n`LeaferEvent.BEFORE_READY`\n\n### Event String\n`leafer.before_ready`\n"}],"relevance":0.011904762,"generationDate":"2026-09-18T10:05:40.803Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"IEventMap interface and Rect event option example","codeDescription":"Defines the IEventMap interface and shows how to pass an event map to the Rect constructor's event option. The event map can only be set at initialization and cannot be exported to JSON. The example uses a tap listener and a PointerEvent.DOWN listener with the 'once' option.","codeLanguage":"ts","codeTokens":174,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/property/on.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"export interface IEventMap {\n [name: string]: IEventListener | [IEventListener, IEventOption]\n}\n\n// 示例\nnew Rect({\n fill: '#32cd79',\n event: {\n tap: function () {\n console.log('tap')\n },\n [PointerEvent.DOWN]: [\n function () {\n console.log('pointer.down')\n },\n 'once', // 同 on() 的第二个参数\n ],\n },\n})","language":"ts"}],"relevance":0.011764706,"generationDate":"2026-09-18T10:12:59.436Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Find element by innerId with Leafer and App","codeDescription":"Two TypeScript examples showing how to find a single element by its innerId using the find plugin. The first uses Leafer, the second uses App with editor and viewport plugins. Requires installing the find plugin or using leafer-game/leafer-editor which already includes it.","codeLanguage":"ts","codeTokens":406,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/UI/innerId.md#_snippet_0","pageTitle":"Unknown","codeList":[{"code":"// #查找单个元素 [通过 innerId 查找 (Leafer)]\nimport { Leafer, Rect } from 'leafer-ui'\nimport '@leafer-in/find' // 导入查找元素插件 // [!code hl] \n\nconst leafer = new Leafer({ view: window })\n\nconst rect1 = new Rect({ id: 'block', fill: '#32cd79' })\nconst rect2 = new Rect({ fill: '#32cd79' })\n\nleafer.add(rect1)\nleafer.add(rect2)\nconsole.log(\n leafer.findOne(rect2.innerId) // [!code hl] // rect2\n)","language":"ts"},{"code":"// #查找单个元素 [通过 innerId 查找 (App)]\nimport { App, Rect } from 'leafer-ui'\nimport '@leafer-in/editor' // 导入图形编辑器插件\nimport '@leafer-in/viewport' // 导入视口插件 (可选)\n\nimport '@leafer-in/find' // 导入查找元素插件 // [!code hl] \n\nconst app = new App({ view: window, editor: {} })\n\nconst rect1 = new Rect({ id: 'block', fill: '#32cd79' })\nconst rect2 = new Rect({ fill: '#32cd79' })\n\napp.tree.add(rect1)\napp.tree.add(rect2)\nconsole.log(\n app.findOne(rect2.innerId) // [!code hl] // rect2\n)","language":"ts"}],"relevance":0.011764706,"generationDate":"2026-09-18T09:54:30.739Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"get","codeDescription":"获取边界数据对象 {x,y,width,height}。","codeLanguage":"APIDOC","codeTokens":85,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/reference/math/Bounds.md#_snippet_2","pageTitle":"Unknown","codeList":[{"language":"APIDOC","code":"## get\n\n### Description\n获取边界数据对象 {x,y,width,height}。\n\n### Method\nget\n\n### Signature\nget ( ): IBoundsData\n\n### Returns\n- **IBoundsData** - 包含 x、y、width、height 的对象。"}],"relevance":0.011627907,"generationDate":"2026-09-18T10:10:06.340Z","model":"deepseek/deepseek-v4-flash-0731"},{"codeTitle":"Create a draggable rectangle with Leafer UI","codeDescription":"Initializes a Leafer instance attached to the window and adds a draggable rectangle with rounded corners and a green fill. The cornerRadius array applies different radii to each corner. Use this as a starting point for Leafer UI canvas interactions.","codeLanguage":"javascript","codeTokens":151,"codeId":"https://github.com/leaferjs/ai-docs/blob/main/examples/start/create.html#_snippet_0","pageTitle":"Leafer UI Create Example","codeList":[{"language":"javascript","code":"var leafer = new LeaferUI.Leafer({ view: window })\nvar rect = new LeaferUI.Rect({ x: 100, y: 100, width: 200, height: 200, fill: '#32cd79', cornerRadius: [50, 80, 0, 80], draggable: true, })\nleafer.add(rect)"}],"relevance":0.011627907,"generationDate":"2026-10-26T03:30:57.436Z","model":"deepseek/deepseek-v4-flash-0731"}]}

Leafer AI