v1.0.8

src/contest/guide.md

@@ -54,12 +54,6 @@ LeaferJS 是一款好用的 Canvas 渲染引擎，提供革新的体验。可用
 <<< @/code/contest/dragon/dragon.ts
 :::
 
-进行绘制：
-
-::: code-group
-<<< @/code/contest/dragon/step2.ts
-:::
-
 3. 点睛的交互功能，点击龙头加上龙眼，然后龙就活过来，开始按运动路径循环飞行。
 
 ::: code-group

src/contribute/index.md

@@ -30,6 +30,8 @@
 
 ## Demo
 
+[Leafer + vue3 实现的画板](https://github.com/WHSnhcZDYRZC/drawingBoard) [@WHSnhcZDYRZC](https://github.com/WHSnhcZDYRZC)
+
 [扫雷小游戏](https://github.com/yh4922/leaferjs-minesweeper) [@xjq7](https://github.com/xjq7)
 
 [Minesweeper](https://github.com/yh4922/leaferjs-minesweeper) <badge>扫雷小游戏</badge> @杨 🐑🐑

src/create/leafer.md

@@ -63,8 +63,8 @@ npm create leafer@latest update
     <span style="color:#5e9177;font-weight: 600;">Fetching Leafer version...</span>
     <span style="color:var(--vt-c-green);">✔</span> <span style="color:#888;font-weight: 600;">The following Leafer dependencies can be updated:</span>
     <span style="color:#89DDFF;">{
-      "leafer-editor": "^1.0.7",
-      "@leafer-in/animate": "^1.0.7"
+      "leafer-editor": "^1.0.8",
+      "@leafer-in/animate": "^1.0.8"
     }</span>
     <span style="color:#888;font-weight: 600;">Do you want to update them? <span style="color:#888;">… <span style="color:#89DDFF;text-decoration:underline;">yes</span></span></span>
     <span style="color:var(--vt-c-green);">✔</span> <span style="color:#888;font-weight: 600;">Dependencies updated successfully! Please run <span style="color:#5e9177;font-weight: 600;">npm install</span> to install the latest versions.</span>

src/guide/index.md

@@ -34,11 +34,13 @@
 
 🚀 想马上在产品中使用，请安装 [leafer-ui](/guide/install/ui/start.md)，开始你的探索之旅。
 
-## 场景版
+## 场景包
 
-编辑图形的场景，推荐安装更省心的 [leafer-editor](/guide/install/editor/start.md)，已集成了图形编辑器相关插件。
+高效绘图场景，推荐安装更轻量的 [leafer-draw](/guide/install/draw/start.md) （49KB min+gzip）。
 
-单纯绘图的场景，推荐安装更轻量的 [leafer-draw](/guide/install/draw/start.md) （49KB min+gzip）。
+游戏开发场景，推荐安装更省心的 [leafer-game](/guide/install/game/start.md)，已集成了游戏相关插件。
+
+图形编辑场景，推荐安装更省心的 [leafer-editor](/guide/install/editor/start.md)，已集成了图形编辑器相关插件。
 
 ## 互动交流
 

src/guide/install/draw/miniapp/start.md

@@ -32,9 +32,9 @@ bun add @leafer-draw/miniapp
 
 ```sh
 
-https://unpkg.com/@leafer-draw/[email protected].7/dist/miniapp.module.js
+https://unpkg.com/@leafer-draw/[email protected].8/dist/miniapp.module.js
 
-https://unpkg.com/@leafer-draw/[email protected].7/dist/miniapp.module.min.js
+https://unpkg.com/@leafer-draw/[email protected].8/dist/miniapp.module.min.js
 
 
 ```

src/guide/install/draw/start.md

@@ -32,15 +32,15 @@ bun add leafer-draw
 ::: code-group
 
 ```html [web.min]
-<script src="https://unpkg.com/[email protected].7/dist/web.min.js"></script>
+<script src="https://unpkg.com/[email protected].8/dist/web.min.js"></script>
 <script>
   const { Leafer } = LeaferUI
   // ...
 </script>
 ```
 
 ```html [web]
-<script src="https://unpkg.com/[email protected].7/dist/web.js"></script>
+<script src="https://unpkg.com/[email protected].8/dist/web.js"></script>
 <script>
   const { Leafer } = LeaferUI
   // ...
@@ -49,14 +49,14 @@ bun add leafer-draw
 
 ```html [module.min]
 <script type="module">
-  import { Leafer } from 'https://unpkg.com/[email protected].7/dist/web.module.min.js'
+  import { Leafer } from 'https://unpkg.com/[email protected].8/dist/web.module.min.js'
   // ...
 </script>
 ```
 
 ```html [module]
 <script type="module">
-  import { Leafer } from 'https://unpkg.com/[email protected].7/dist/web.module.js'
+  import { Leafer } from 'https://unpkg.com/[email protected].8/dist/web.module.js'
   // ...
 </script>
 ```

src/guide/install/draw/worker/start.md

@@ -33,11 +33,11 @@ bun add @leafer-draw/worker
 ::: code-group
 
 ```js [worker.min.js]
-importScripts('https://unpkg.com/@leafer-draw/[email protected].7/dist/worker.min.js')
+importScripts('https://unpkg.com/@leafer-draw/[email protected].8/dist/worker.min.js')
 ```
 
 ```js [worker.js]
-importScripts('https://unpkg.com/@leafer-draw/[email protected].7/dist/worker.js')
+importScripts('https://unpkg.com/@leafer-draw/[email protected].8/dist/worker.js')
 ```
 
 :::

src/guide/install/editor/miniapp/start.md

@@ -32,9 +32,9 @@ bun add @leafer-editor/miniapp
 
 ```sh
 
-https://unpkg.com/@leafer-editor/[email protected].7/dist/miniapp.module.js
+https://unpkg.com/@leafer-editor/[email protected].8/dist/miniapp.module.js
 
-https://unpkg.com/@leafer-editor/[email protected].7/dist/miniapp.module.min.js
+https://unpkg.com/@leafer-editor/[email protected].8/dist/miniapp.module.min.js
 
 
 ```

src/guide/install/editor/start.md

@@ -37,15 +37,15 @@ bun add leafer-editor
 ::: code-group
 
 ```html [web.min]
-<script src="https://unpkg.com/[email protected].7/dist/web.min.js"></script>
+<script src="https://unpkg.com/[email protected].8/dist/web.min.js"></script>
 <script>
   const { Leafer, Editor, Arrow } = LeaferUI
   // ...
 </script>
 ```
 
 ```html [web]
-<script src="https://unpkg.com/[email protected].7/dist/web.js"></script>
+<script src="https://unpkg.com/[email protected].8/dist/web.js"></script>
 <script>
   const { Leafer, Editor, Arrow } = LeaferUI
   // ...
@@ -58,7 +58,7 @@ bun add leafer-editor
     Leafer,
     Editor,
     Arrow,
-  } from 'https://unpkg.com/[email protected].7/dist/web.module.min.js'
+  } from 'https://unpkg.com/[email protected].8/dist/web.module.min.js'
   // ...
 </script>
 ```
@@ -69,7 +69,7 @@ bun add leafer-editor
     Leafer,
     Editor,
     Arrow,
-  } from 'https://unpkg.com/[email protected].7/dist/web.module.js'
+  } from 'https://unpkg.com/[email protected].8/dist/web.module.js'
   // ...
 </script>
 ```

src/guide/install/editor/worker/start.md

@@ -34,12 +34,12 @@ bun add @leafer-editor/worker
 
 ```js [worker.min.js]
 importScripts(
-  'https://unpkg.com/@leafer-editor/[email protected].7/dist/worker.min.js'
+  'https://unpkg.com/@leafer-editor/[email protected].8/dist/worker.min.js'
 )
 ```
 
 ```js [worker.js]
-importScripts('https://unpkg.com/@leafer-editor/[email protected].7/dist/worker.js')
+importScripts('https://unpkg.com/@leafer-editor/[email protected].8/dist/worker.js')
 ```
 
 :::

src/guide/install/game/miniapp/start.md

@@ -0,0 +1,90 @@
+# @leafer-game/miniapp
+
+在小程序环境中运行，[了解小程序使用 npm 包的注意事项](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。
+
+基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。
+
+## 安装
+
+::: code-group
+
+```sh[npm]
+npm install @leafer-game/miniapp
+```
+
+```sh[pnpm]
+pnpm add @leafer-game/miniapp
+```
+
+```sh[yarn]
+yarn add @leafer-game/miniapp
+```
+
+```sh[bun]
+bun add @leafer-game/miniapp
+```
+
+:::
+
+## 下载 CDN 版本
+
+你也可以将库文件直接下载到本地 import 引入。
+
+```sh
+
+https://unpkg.com/@leafer-game/[email protected]/dist/miniapp.module.js
+
+https://unpkg.com/@leafer-game/[email protected]/dist/miniapp.module.min.js
+
+
+```
+
+## 注意
+
+微信小程序自身加载 svg 图片有问题。
+
+阴影、遮罩等正在适配兼容性。
+
+::: warning 温馨提示
+微信小程序 iOS 端 3.0.0 之后 view 中的 canvas drawImage 无法绘制离屏画布，已找到办法绕过此限制，但仍有部分功能用不了（如图层混合模式，擦除，后续会继续适配）。
+
+等待小程序官方[修复 bug](https://developers.weixin.qq.com/community/develop/doc/000264fc838f08be4d6002d9166c00), 大家可以一起去催一催。复杂应用建议先采用小程序的 [web-view](https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html) 方式开发。
+:::
+
+## 生成海报
+
+创建一个矩形, 然后导出为图片（离屏画布模式可用）。
+
+::: code-group
+
+```ts [index.ts]
+import { Leafer, Rect } from '@leafer-game/miniapp'
+
+Page({
+  onReady() {
+    // 自动创建一个 350*800 的离屏画布
+    const leafer = new Leafer({ width: 350, height: 800 })
+
+    const rect = new Rect({
+      x: 100,
+      y: 100,
+      width: 100,
+      height: 100,
+      fill: '#32cd79',
+    })
+
+    leafer.add(rect)
+
+    // 自动保存到相册
+    leafer.export('album.png', { screenshot: true }).then(() => {
+      // 提示保存到相册成功逻辑
+    })
+  },
+})
+```
+
+:::
+
+## 使用
+
+使用方式、全局变量和 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md) 一致, 只需改下包名，即可运行官网示例代码。

src/guide/install/game/node/napi.md

@@ -0,0 +1,63 @@
+# @leafer-game/node
+
+在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。
+
+基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。
+
+## 安装
+
+在服务端环境中运行。
+
+::: code-group
+
+```sh[npm]
+npm install @leafer-game/node
+```
+
+```sh[pnpm]
+pnpm add @leafer-game/node
+```
+
+```sh[yarn]
+yarn add @leafer-game/node
+```
+
+```sh[bun]
+bun add @leafer-game/node
+```
+
+:::
+
+如果你需要交互功能，请使用 [leafer-ui](/guide/install/ui/node/napi.md)。
+
+## [skia](./start.md#skia-napi)  ｜  napi
+
+[@napi-rs/canvas](https://www.npmjs.com/package/@napi-rs/canvas) 用于在服务端环境中替代 Canvas 的功能， 底层也是基于 skia，不同的是使用 Rust 语言封装，高性能、零系统依赖，需单独安装。
+
+:::tip
+[NAPI-RS](https://napi.rs) 是一个在 Rust 下编写高性能 Node.js 扩展的框架。
+:::
+
+::: code-group
+
+```sh[npm]
+npm install @napi-rs/canvas
+```
+
+```sh[pnpm]
+pnpm add @napi-rs/canvas
+```
+
+```sh[yarn]
+yarn add @napi-rs/canvas
+```
+
+```sh[bun]
+bun add @napi-rs/canvas
+```
+
+:::
+
+## 使用
+
+使用方式、全局变量和 [@leafer-ui/node](/guide/install/ui/node/napi.md)一致, 只需改下包名，即可运行官网示例代码。

src/guide/install/game/node/start.md

@@ -0,0 +1,55 @@
+# @leafer-game/node
+
+在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。
+
+基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/) 插件，适用于小游戏场景。
+
+## 安装
+
+::: code-group
+
+```sh[npm]
+npm install @leafer-game/node
+```
+
+```sh[pnpm]
+pnpm add @leafer-game/node
+```
+
+```sh[yarn]
+yarn add @leafer-game/node
+```
+
+```sh[bun]
+bun add @leafer-game/node
+```
+
+:::
+
+## skia  ｜  [napi](./napi.md#skia-napi)
+
+[skia-canvas](https://www.npmjs.com/package/skia-canvas) 用于在服务端环境中替代 Canvas 的功能， 底层基于 skia，需单独安装，安装编译时间会比较长，请耐心等待。
+
+::: code-group
+
+```sh[npm]
+npm install skia-canvas
+```
+
+```sh[pnpm]
+pnpm add skia-canvas
+```
+
+```sh[yarn]
+yarn add skia-canvas
+```
+
+```sh[bun]
+bun add skia-canvas
+```
+
+:::
+
+## 使用
+
+使用方式、全局变量和 [@leafer-ui/node](/guide/install/ui/node/start.md)一致, 只需改下包名，即可运行官网示例代码。