Skip to content

Commit

Permalink
v1.3.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@leaferjs
leaferjs committed Jan 9, 2025
1 parent 6ff97e2 commit 1a25292
Show file tree
Hide file tree
Showing 50 changed files with 484 additions and 113 deletions.
93 changes: 93 additions & 0 deletions contest/bloom/guide.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<script setup>
import Case from '/component/Case.vue'
</script>

# LeaferJS ”心花怒放“ 小游戏开发指南

## 简介

LeaferJS 是一款好用的 Canvas 渲染引擎，提供革新的体验。可用于高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。

📗 [图文并茂、由浅入深的了解 LeaferJS](/blog/2024-07-09.md)

## 一、准备代码运行环境

**Playground 环境：** https://www.leaferjs.com/ui/guide/runtime.html

可通过 **Cloud Studio** 模版创建一个 **LeaferJS 项目**，用于运行、练习后续的示例代码。

## 二、学习 LeaferJS 入门教程

**入门教程：** https://www.leaferjs.com/ui/guide/basic/leafer.html

跟随官网教程步骤（文档底部有下一步引导按钮）从浅到深的一步步学习。

建议将教程中的示例代码复制到 **LeaferJS 项目** 的 index.ts 文件中运行、调试效果。

## 三、如何开发一个【心花怒放】的小游戏 （参考示例）

体验游戏： https://cloudstudio.net/a/24001340290174976?channel=share&sharetype=URL

<!-- <case name="Dragon" editor=false height=500></case> -->

<!-- ### 主要步骤 -->

<!-- **视频讲解（约 10 分钟）：** https://www.bilibili.com/video/BV1VmyXYoE5d -->
<!--
1. 准备龙的飞行路径，可通过鼠标绘制或自动生成（需要自定义）。
::: code-group
<<< @/code/contest/dragon/step1.ts
:::
2. 绘制龙，包括龙头（无眼睛）、龙身、龙爪、龙尾，并放到飞行路径上。
绘制龙的所需物料：
::: code-group
<<< @/code/contest/dragon/dragon.ts
:::
3. 点睛的交互功能，点击龙头加上龙眼，然后龙就活过来，开始按运动路径循环飞行。 -->

::: code-group
<<< @/code/contest/bloom/wish.ts
:::

<!-- ### 增强功能
1. 可添加背景天空、云朵（支持编辑大小、进行动画），增强页面的氛围感。
2. 可通过点击不同的【色块按钮】进行换色（龙头、龙身、龙尾）。
3. 尽情发挥你的想象，创造出与众不同的游戏效果。 -->

## 四、详细了解 LeaferJS

LeaferJS 提供了丰富的功能，可通过官网教程示例进一步学习。

官网教程主要分为六个主要部分：

1. 入门教程：基础、进阶、常用插件、构成，方便快速入门。

2. 元素组件：应用、组、图形、路径、图像、文字、自定义元素。

3. 元素样式与功能： 布局、外观、交互、动画、数据、高级功能。

4. 事件类型：交互、元素、平台事件。

5. 类库： 数学、列表。

6. 插件： 官网、社区插件。

为了聚焦主要知识，每篇文档只展示了关键属性方法，可通过点击 [继承](/reference/display/Rect.md#继承) 或 [归属](/reference/property/fill.md#归属) 文档溯源。

## 重点关注功能

### 动画功能

可以通过文章了解 LeaferJS 能实现哪些动画、游戏效果。

📙 [全新动画、状态、过渡、游戏功能](/blog/2024-09-20.md)

功能入口： https://www.leaferjs.com/ui/guide/plugin/animate.html
14 changes: 14 additions & 0 deletions contribute/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@

## 教程

[不一样的动态时钟 React+Leafer 实现火车动态时钟](https://juejin.cn/post/7454109404122562597) @火树银花

[我将 fabricjs 换为了 leaferjs](https://juejin.cn/post/7440830008123310132) @前端雾恋

[leaferjs 元素的基本使用](https://juejin.cn/post/7440830008123310132) @前端雾恋
Expand All @@ -48,6 +50,12 @@

## Demo

[音乐律动的背光键盘](https://canvas.xjq.icu/marching-music) [@xjq7](https://github.com/xjq7)

[模拟丰富多样的雪花效果](https://canvas.xjq.icu/snowflake) [@xjq7](https://github.com/xjq7)

[TO NORTH 在线标注工具](https://tonorth.netlify.app/) @tonorth.netlify.app

[点阵背景效果](https://github.com/tuntun0609/leafer-x-dot-matrix) [@tuntun](https://github.com/tuntun0609)

[Leafer + vue3 实现的画板](https://github.com/WHSnhcZDYRZC/drawingBoard) [@WHSnhcZDYRZC](https://github.com/WHSnhcZDYRZC)
Expand Down Expand Up @@ -80,6 +88,12 @@

## 产品

[fig2leafer](https://fig2leafer.netlify.app) <badge>leafer 渲染 figma 文件</badge> [@jianghanyue](https://github.com/jianghanyue)

[趣设计](https://www.leaferjs.com/ui/guide/install/ui/miniapp/start.html#%E9%87%87%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F-web-view-%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E7%9A%84%E6%A1%88%E4%BE%8B) <badge>PS 海报头像拼图 LOGO</badge> @BO

[创意表情](https://www.leaferjs.com/ui/guide/install/ui/miniapp/start.html#%E9%87%87%E7%94%A8-uniapp-%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8E%9F%E7%94%9F%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A1%88%E4%BE%8B) <badge>DIY 有趣的微信表情</badge> @goosen

[Lazyva 懒画](https://canvas.lazykit.cn) <badge>在线设计工具（支持移动端）</badge> @ozar

[简单设计](https://jiandan.link) <badge>免费在线设计、图片处理工具</badge> @Ove🚀
Expand Down
4 changes: 2 additions & 2 deletions create/leafer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.2.2",
"@leafer-in/animate": "^1.2.2"
"leafer-editor": "^1.3.2",
"@leafer-in/animate": "^1.3.2"
}</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>
Expand Down
6 changes: 2 additions & 4 deletions guide/advanced/partRender.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,10 @@
<<< @/code/app/config/partRender.ts [Leafer]
:::

## 恭喜 🎉

你已完成进阶知识的学习，接下来将带你了解几个重要的 **生命周期**，就算完成入门的学习了。

## 下一步

接下来将带你了解几个重要的 **生命周期**，就算完成入门的学习了。

### [生命周期](/guide/life/ui.md)

<br/>
Expand Down
6 changes: 6 additions & 0 deletions guide/basic/leafer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ view 参数支持 window 、div、canvas 标签对象，注意 view 为 id 字

<<< @/code/basic/app/auto.ts

## 创建自动生长的 Leafer

画布大小会生长，自动贴合实际内容。

<<< @/code/basic/app/grow.ts

## 配置 Leafer

### [基础](/reference/config/app/base.md) &nbsp; &nbsp; [视口类型](/reference/config/app/type.md) &nbsp; &nbsp; [画布](/reference/config/app/canvas.md) &nbsp; &nbsp; [点按](/reference/config/app/pointer.md) &nbsp; &nbsp;[触屏](/reference/config/app/touch.md) &nbsp; &nbsp; [滚轮](/reference/config/app/wheel.md)
Expand Down
4 changes: 2 additions & 2 deletions guide/install/draw/miniapp/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ bun add @leafer-draw/miniapp

```sh

https://unpkg.com/@leafer-draw/miniapp@1.2.2/dist/miniapp.module.js
https://unpkg.com/@leafer-draw/miniapp@1.3.2/dist/miniapp.module.js

https://unpkg.com/@leafer-draw/miniapp@1.2.2/dist/miniapp.module.min.js
https://unpkg.com/@leafer-draw/miniapp@1.3.2/dist/miniapp.module.min.js


```
Expand Down
8 changes: 4 additions & 4 deletions guide/install/draw/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,15 @@ bun add leafer-draw
::: code-group

```html [web.min]
<script src="https://unpkg.com/leafer-draw@1.2.2/dist/web.min.js"></script>
<script src="https://unpkg.com/leafer-draw@1.3.2/dist/web.min.js"></script>
<script>
const { Leafer } = LeaferUI
// ...
</script>
```

```html [web]
<script src="https://unpkg.com/leafer-draw@1.2.2/dist/web.js"></script>
<script src="https://unpkg.com/leafer-draw@1.3.2/dist/web.js"></script>
<script>
const { Leafer } = LeaferUI
// ...
Expand All @@ -49,14 +49,14 @@ bun add leafer-draw

```html [module.min]
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-draw@1.2.2/dist/web.module.min.js'
import { Leafer } from 'https://unpkg.com/leafer-draw@1.3.2/dist/web.module.min.js'
// ...
</script>
```

```html [module]
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-draw@1.2.2/dist/web.module.js'
import { Leafer } from 'https://unpkg.com/leafer-draw@1.3.2/dist/web.module.js'
// ...
</script>
```
Expand Down
4 changes: 2 additions & 2 deletions guide/install/draw/worker/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ bun add @leafer-draw/worker
::: code-group

```js [worker.min.js]
importScripts('https://unpkg.com/@leafer-draw/worker@1.2.2/dist/worker.min.js')
importScripts('https://unpkg.com/@leafer-draw/worker@1.3.2/dist/worker.min.js')
```

```js [worker.js]
importScripts('https://unpkg.com/@leafer-draw/worker@1.2.2/dist/worker.js')
importScripts('https://unpkg.com/@leafer-draw/worker@1.3.2/dist/worker.js')
```

:::
Expand Down
6 changes: 3 additions & 3 deletions guide/install/editor/miniapp/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在小程序环境中运行，[了解小程序使用 npm 包的注意事项](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。

基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/) 插件，适用于在线图形编辑的场景。
基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。

## 安装

Expand Down Expand Up @@ -32,9 +32,9 @@ bun add @leafer-editor/miniapp

```sh

https://unpkg.com/@leafer-editor/miniapp@1.2.2/dist/miniapp.module.js
https://unpkg.com/@leafer-editor/miniapp@1.3.2/dist/miniapp.module.js

https://unpkg.com/@leafer-editor/miniapp@1.2.2/dist/miniapp.module.min.js
https://unpkg.com/@leafer-editor/miniapp@1.3.2/dist/miniapp.module.min.js


```
Expand Down
2 changes: 1 addition & 1 deletion guide/install/editor/node/napi.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。

基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/) 插件，适用于在线图形编辑的场景。
基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。

## 安装

Expand Down
2 changes: 1 addition & 1 deletion guide/install/editor/node/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在服务端 node 环境中运行，可用于后台绘图、生成图片、自动化测试，能够 [模拟用户交互](/reference/event/simulation.md)。

基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/) 插件，适用于在线图形编辑的场景。
基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。

## 安装

Expand Down
10 changes: 5 additions & 5 deletions guide/install/editor/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Case from '/component/Case.vue'

在 Web 环境中运行。

基于 [leafer-ui](/guide/install/ui/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/) 插件，适用于在线图形编辑的场景。
基于 [leafer-ui](/guide/install/ui/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。

## 安装

Expand Down Expand Up @@ -37,15 +37,15 @@ bun add leafer-editor
::: code-group

```html [web.min]
<script src="https://unpkg.com/leafer-editor@1.2.2/dist/web.min.js"></script>
<script src="https://unpkg.com/leafer-editor@1.3.2/dist/web.min.js"></script>
<script>
const { Leafer, Editor, Arrow } = LeaferUI
// ...
</script>
```

```html [web]
<script src="https://unpkg.com/leafer-editor@1.2.2/dist/web.js"></script>
<script src="https://unpkg.com/leafer-editor@1.3.2/dist/web.js"></script>
<script>
const { Leafer, Editor, Arrow } = LeaferUI
// ...
Expand All @@ -58,7 +58,7 @@ bun add leafer-editor
Leafer,
Editor,
Arrow,
} from 'https://unpkg.com/leafer-editor@1.2.2/dist/web.module.min.js'
} from 'https://unpkg.com/leafer-editor@1.3.2/dist/web.module.min.js'
// ...
</script>
```
Expand All @@ -69,7 +69,7 @@ bun add leafer-editor
Leafer,
Editor,
Arrow,
} from 'https://unpkg.com/leafer-editor@1.2.2/dist/web.module.js'
} from 'https://unpkg.com/leafer-editor@1.3.2/dist/web.module.js'
// ...
</script>
```
Expand Down
6 changes: 3 additions & 3 deletions guide/install/editor/worker/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在 WebWorker 环境中运行。

基于 [@leafer-ui/worker](/guide/install/ui/worker/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/view/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/) 插件，适用于在线图形编辑的场景。
基于 [@leafer-ui/worker](/guide/install/ui/worker/start.md)，集成了 [图形编辑器](/plugin/in/editor/)、[文本编辑](/plugin/in/text-editor/)、[视口](/plugin/in/viewport/)、[视图控制](/plugin/in/view/) 、[滚动条](/plugin/in/scroll/)、[箭头](/plugin/in/arrow/)、[HTML](/plugin/in/html/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于在线图形编辑的场景。

## 安装

Expand Down Expand Up @@ -34,12 +34,12 @@ bun add @leafer-editor/worker

```js [worker.min.js]
importScripts(
'https://unpkg.com/@leafer-editor/worker@1.2.2/dist/worker.min.js'
'https://unpkg.com/@leafer-editor/worker@1.3.2/dist/worker.min.js'
)
```

```js [worker.js]
importScripts('https://unpkg.com/@leafer-editor/worker@1.2.2/dist/worker.js')
importScripts('https://unpkg.com/@leafer-editor/worker@1.3.2/dist/worker.js')
```

:::
Expand Down
6 changes: 3 additions & 3 deletions guide/install/game/miniapp/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在小程序环境中运行，[了解小程序使用 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/) 插件，适用于小游戏场景。
基于 [@leafer-ui/miniapp](/guide/install/ui/miniapp/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md) 插件，适用于小游戏场景。

## 安装

Expand Down Expand Up @@ -32,9 +32,9 @@ bun add @leafer-game/miniapp

```sh

https://unpkg.com/@leafer-game/miniapp@1.2.2/dist/miniapp.module.js
https://unpkg.com/@leafer-game/miniapp@1.3.2/dist/miniapp.module.js

https://unpkg.com/@leafer-game/miniapp@1.2.2/dist/miniapp.module.min.js
https://unpkg.com/@leafer-game/miniapp@1.3.2/dist/miniapp.module.min.js


```
Expand Down
2 changes: 1 addition & 1 deletion guide/install/game/node/napi.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在服务端 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/) 插件，适用于小游戏场景。
基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于小游戏场景。

## 安装

Expand Down
2 changes: 1 addition & 1 deletion guide/install/game/node/start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

在服务端 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/) 插件，适用于小游戏场景。
基于 [@leafer-ui/node](/guide/install/ui/node/start.md)，集成了 [Robot](/plugin/in/robot/) 、[交互状态](/plugin/in/state/) 、 [动画](/plugin/in/animate/)、[运动路径](/plugin/in/motion-path/)、[查找元素](/plugin/in/find/index.md)、[导出元素](/plugin/in/export/index.md) 插件，适用于小游戏场景。

## 安装

Expand Down
Loading

0 comments on commit 1a25292

Please sign in to comment.