Skip to content

更新

TIP

平台包、核心包、官方插件包的版本号为了方便大家记忆,均保持统一更新。

2024 / 02 / 10

v1.0.0-rc.17

🌱 新增 🎉🎉🎉

- 🌸 箭头插件 发布,自带 12 种常用的箭头样式,并支持自定义

- 🌸 自定义元素 基础教程 完善, 包含 ts / js 示例

- 🌸 元素支持 path 模式,同 Path 属性一致,优先级最高

- 元素增加 registerUI() / registerData() 静态方法 用于 js 自定义元素

- 元素销毁事件 ChildEvent.DESTROY

- 元素可以通过 get(name) 获取输入属性值

- 🌸 图片支持像素比 pixelRatio(适配高清屏)、懒加载 lazy 属性

- 🌸 导出图片支持 onCanvas() 选项方法,可以用于叠加绘制自定义内容。

🪲 修复

- forceRender() 不设置 bounds 不生效的问题

- strokeCap 会影响其他元素的问题

- 导出图片 scale 位置不正确的问题

- 导出 Leafer、Frame 受画布缩放影响

- Box 单独设置宽度进行自适应,add 元素之后局部更新有问题

🍃 API 变化

ui.__.__autoBounds 改为 ui.__.__autoSize

🌷 感谢反馈

@毛豆花生、 @开始学习开始 @普通人 @葫芦娃是条狗 @轩辕二狗

2024 / 01 / 31

v1.0.0-rc.12

🌱 新增 🎉🎉🎉

- 🌸 leafer-draw 轻量包,仅提供绘图功能,减少 1/5 的代码量。

- 🌸 export() 导出单个元素,并支持丰富的导出配置

- 支持组透明效果(同 HTML、Figma、Sketch 一致)

- 🌸 增加 page 坐标系 及转换方法 getPagePoint() / getPage() / getPageMove()

- 🌸 遮罩增加 maskType,可支持路径遮罩、PS 剪贴蒙版效果

- 🌸 元素添加 strokeWidthFixed 固定线宽属性,当元素放大时,线宽不会跟随放大

- Group 支持 pick() 方法,可通过坐标点拾取元素

- Leafer 支持 forceRender() 方法,可指定一个 bounds 进行局部重渲染

- Leafer 支持手动更新光标样式 updateCursor()

- 🌸 Leafer、Pen、Group 支持通过 clear() 方法清空所有子元素

- Point 支持 scale(), scaleOf() 方法

- Image 全局跨域配置 crossOrigin

- 只监听 Leafer 自身属性变化的 PropertyEvent.LEAFER_CHANGE 事件

- nextRender() 可通过 removeNextRender() 方法移除监听

- 开启阻止默认右键事件 config.pointer.preventDefaultMenu

- 右键移动画布功能 config.move.holdRightKey

- 右键 tap 弹出菜单事件 PointerEvent.MENU_TAP,开启右键移动画布功能后需要用到

- 鼠标拖拽画面结束时增加物理缓动。

- 元素添加 renderBounds 属性

- Matrix 添加 withScale() 方法, 用来支持临时叠加 matrix 选项 渲染元素

🌿 性能

- 快速渲染复用相同的图片,减少内存、渲染开销

- 渲染外描边、遮罩、橡皮擦、内外阴影、混合模式的性能优化

🪲 修复

- 🌸 滚轮速度控制 不生效

- 当存在遮罩、混合模式时,组透明度导致子元素透明度叠加

- pointer.up 无法区分左键与右键

- 没有路径时 getPath() 返回数据不正确

- blob 图片地址访问不了的问题

🪴 图形编辑器

- group() 支持传入 json 或实例

- 🌸 支持自定义可旋转角度的 resize、rotate、skew 光标,默认内置了一套。

- 修复父元素存在镜像时旋转错位问题

- 修复旋转 90 度与 270 度的显示问题

- 修复锁定后还可以移动的问题

- 控制点改为居中描边

🍃 API 变化

元素 isMask 属性 改为 mask, 之前的快速设置遮罩方式另提供了自定义函数

元素 isEraser 属性 改为 eraser

Leafer 导出画面截图需添加 screenshot 参数

ImageManager.isPixel() 改为 hasOpacityPixel()

AnswerType 改为 Answer(需从 leafer-ui 中引入)

移除老版插件注册机制 @leafer/plugin

移除之前的 user 应用类型,改用 draw 类型

移除 LeaferCanvas.setCursor,改用 updateCursor()

移除 Matrix.multiplyParentLayout() 方法

forceFullRender 即将移除,请改用 forceRender() 方法代替

removeAll() 方法即将移除,请改用 clear()

🌷 感谢反馈

@毛豆花生@霜序廿@mhrmsg@3400442579@ieleg@zhixiaotong@hmwl@HeeChung@rojer95@wermdany @黄某人 @do @南 @表单开发 @Moom🎶 @X @Knight @即兴 @普通人 @鲸要我保护海 @&荷@逸… @星星小夜曲 @dust @Lauginwing

2023 / 12 / 22

v1.0.0-rc.9

新增

- 元素支持 getPath() / getPathString()

- 填充图案的 clip / repeat 模式支持拉伸图片 size

- Image 与 HTMLText 导出数据时,移除重复的 fill 字段

修复

- HTMLText 修改响应式文本数据不生效

- 鼠标移动值为整数时,导致图形编辑器突然消失

- Canvas 作为 eraser,放大会出现锯齿

作品分享

开源海报设计器 @毛豆花生

leafer-x-ruler 标尺线插件 @毛豆花生

不做简历 @霜序廿

感谢反馈

@毛豆花生@霜序廿@mhrmsg@xinglufan 、@do、@..、@南、@YOLO、@&荷@逸…、@Ein

2023 / 12 / 07

v1.0.0-rc.8

新增

- 通过 github 提交 issuse,在【感谢反馈】中开始增加个人主页链接。

- around 属性支持 9 个方向的语义化设置

- 填充图案的 fit / repeat 模式支持 repeat 详细参数

- 图形编辑器 group() 支持传入一个自定义的容器

- 图形编辑器 选择事件 传入旧值,方便业务判断

修复

- 彻底解决同时导出多个图片偶尔会卡住的问题

- 自动宽高的图片 proxyData.width 初次未更新

- 底部有大图,选中不了 Group 编组元素

- 没有宽高的文本增加 padding,内容的位置没改变

- 拖拽元素到画布外,会选择画布外的文本

变化

ts
text.padding // 没有宽高的文本增加padding, 内容的位置会改变(更符合使用逻辑)

作品分享

拼图小游戏 @zhk

感谢反馈

@xiaou66@毛豆花生@kooriookami、@zhk、@霜序廿、@YOLO、@YILS、@do、@..、@刘江、@Jerson Suen、@胡萝北、@南、@葫芦娃是条狗、@白月光

2023 / 11 / 30

v1.0.0-rc.7

新增 🎉🎉🎉

- Anime.js 动画,支持关键帧

- HTMLText 富文本渲染

- Point / Bounds / Matrix 数学类

- LeafList 高性能元素列表

- Box 不设置宽高时,支持自适应内容,如自适应背景的文本

- Group、Path 支持 around 属性

- setTransform() / transform() / skewOf / dropTo() / updateLayout() 元素操作方法

- getLayoutBounds() / getLayoutPoints 用于获取 OBB 包围盒

- 元素通过 app 属性快速访问根应用

- changeAttr() / addAttr() 自定义元素属性(支持收集变化、导出 JSON)

- App、Leafer 支持 lockLayout() / unlockLayout 手动控制布局优化

- 预览/移动模式,拖拽时直接平移视图

- 文档目录更新为三层结构

图形编辑器新增 🎉🎉🎉

- hover / 选中描边效果

- 多选 / 框选 编辑功能

- 打组 / 解组功能

- 移到顶层 / 移到底层功能

- skew 变形操作

- 固定方位的按钮组

- 丰富的样式配置

修复

- 多边形圆角 cornerRadius 较大时表现出奇怪的形状或者毛刺

- 图片不再限制最大尺寸

- 图片导出功能完善

- App 结构下修改 config.zoom 不生效的问题

- 响应式数据不会同步自动宽高的图片

- canvas 遮罩在画布放大后产生锯齿

变化

ts
leaf.find((child) => (child.fill ? 1 : 0)) //  传入的函数由之前返回布尔值变为数字。
leaf.__layout.checkUpdate() // 变更为leaf.__layout.update()

Matrix // decompose() 改为 getLayout()
Bounds // setByList()改为 setList()
Point / Matrix / Bounds // 移除copy() ,直接set(data)
// 移除resizeable, 改用 editSize

proxyData // 变化较大,简化了使用方式,建议重新阅读

感谢反馈

@毛豆花生 @表单开发 @kooriookami @南 @ieleg @无我 @!^0^丶 @Moom🎶 @do

2023 / 10 / 21

v1.0.0-rc.6

新增

- Node 版 支持 NAPI-RS 高性能画布

- find()findOne(),可通过 id、innerId、className、tag、函数查找元素

- 元素支持 响应式数据(Vue / React 等前端框架)

- textWrap 属性,文本支持设置是否换行及 break 换行。

- hitBox 属性,使元素的 boxBounds 区域可以响应交互事件。

- LinePolygonStar 支持 cornerRadius 圆角属性

- wheel.zoomMode 支持设置 'mouse' 进行缩放

- 自定义线条/图形 案例

修复

- 遮罩透明度会受顶部子元素影响问题

- 单独描边文本的拾取不精准问题

- 没有宽高的文本设置 textOverflow 报错

变化

ts
leafer.selector.find() // 该方法已移除,改用元素方法 find() / findOne()

感谢反馈

@表单开发 @ahdg6 @毛豆花生 @南 @kooriookami @晓荷

2023 / 10 / 12

v1.0.0-rc.5

新增

- 右键菜单 事件

- reset 方法,可重置元素样式状态

- cursorPoint,获取当前光标位置

- Node 版使用 自定义字体说明

修复

- 图片投影问题

- Node 版画圆环/圆角矩形的问题

- 缩放画布后不能立即导出图片的问题

- around 动画定位不更新的问题

感谢反馈

@南 @毛豆花生 @ieleg @evenle

2023 / 09 / 29

v1.0.0-rc.4

新增

- 全新的插件开发方式

- 插件开发模版

- cursor.stop 应用配置,可停用光标功能。

修复

- 文本描边与阴影属性结合显示偏移的问题。

感谢反馈

@OldGong @ieleg

2023 / 09 / 25

v1.0.0-rc.3

新增

- 使用 leaf.emit(PointEvent.DOWN) 支持自动生成 UI 事件对象。

修复

- 文本修改后导致自动换行问题

- letterSpacing 为负百分比时计算 bounds 不准确问题

- Polygon存在 curve 属性时计算 bounds 不准确问题

其他

- 微信小程序 iOS 端 drawImage 无法绘制离屏画布 导致白屏, 等待小程序官方修复

感谢反馈

@kooriookami @毛豆花生 @Puppy @葫芦娃是条狗

2023 / 09 / 23

v1.0.0-rc.2

主要新增

- 图形编辑器插件 🎉🎉🎉

- 导入导出 JSON

- LeaferJS 运行、测试、打包环境开放

- 官方插件中心代码库

其他新增

- 文档搜索功能

- clone() 方法,用于克隆元素

- 键盘事件,增加长按键盘只触发一次的 key.hold 事件

- addMany() 方法,可一次添加多个元素

- points 绘制属性 (LinePolygon), 并支持转为平滑曲线

- around 属性,围绕中心点绘制、旋转、缩放

- scale 属性快速设置 scaleX, scaleY

- cursor 属性设置光标,支持自定义系统光标

- hitRadius 属性,单独设置元素与光标的碰撞半径

- 简易坐标转换 方法

- getInnerTotal() 方法 - DragEvent

- nextRender() 方法,等待下一次渲染执行方法 - UI

- waitReady()waitViewReady()waitViewCompleted() - Leafer

- 微信小程序版 支持 App 模式 与 图形编辑器

- Node 版 支持 require 和 import 两种引入方式

- 核心代码包分离, 方便跨平台 插件开发、打包

- 模拟交互文档更新

修复

- 微信小程序更新 导致无法生成海报的问题

- 微信小程序 绘制内描边报错问题

- Node 版 多次刷新页面后,Image 不显示的问题

- Vue3 打包时报 TS 类型错误,导致打包失败

- 元素 width、height 为负数时,将使用 镜像代替

- 文本 letterSpacing 为负数渲染异常的情况

- DragEvent 事件中引用 draggable 元素的 x,y 不跟手的情况

- Firefox 离屏画布与 Dom 中画布默认字体不一致的问题

通过 url 无法识别出 svg 的情况下,可以通过 图案填充 指定 format 为 svg。

修复 forceUpdate() 更新的问题

变化

ts
1. Pen, PathCreator 工具

moveToEllipse() 变为 drawEllipse()
moveToArc() 变为 drawArc()
增加 drawPoints() 方法

2. Star 元素

points 属性变为 corners

3. 移除 layout.decomposeTransform() 方法

4. Plugin

为了实现按需引入代码,插件机制已改变,并提供了一种新的方式
之前的插件需要给 PluginManager.pow 赋值 LeaferUI 对象

感谢反馈

@Yohann @毛豆花生 @vikkyjain2013 @Lauginwing @南 @葫芦娃是条狗 @hhzzcc_lm

2023 / 08 / 30

v1.0.0-beta.12

新增

- Worker 版发布 🎉🎉🎉

修复

- 图片 loading 中更新导致的问题

感谢反馈

@kooriookami @hhzzcc_lm

2023 / 08 / 28

v1.0.0-beta.11

修复

- 旋转图片导致模糊或消失

- 自动回收图片时报错

感谢反馈

@kooriookami

2023 / 08 / 25

v1.0.0-beta.10

新增

- 小程序版发布 🎉🎉🎉

重构图片模块

- 图片渲染性能极大提升

- SVG 格式的图片支持高清缩放

- LOAD 事件

- 超过 4096 x 4096 的图片会优化显示

- 自动回收未被引用的原始图片

修复

- Node.js 版 DOMMatrix 报错问题

- 大量图片循环导出时会卡住

- zIndex 不生效的问题

- 文字没有宽度时,使用居中对齐渲染有问题

- rotation 后,再 scaleOf 单独 X 或 Y 轴定位不准确

- 画布的页面位置产生变化导致拾取坐标不准确

- 从外部拖拽内容进画布,没有产生 pointer.up 事件

- 先触发 pointer.leave, 再触发 pointer.enter 事件

- 完善应用与元素的 destroy 机制

变更

- 插件只支持 usePlugin() 一次

- Leafer 移除 ImageManager 实例, ImageManager 变为静态类,全局共享图片资源

感谢反馈

@kooriookami @hhzzcc_lm @Puppy @俊 @penguin0731 @ousiri

2023 / 08 / 05

v1.0.0-beta.8

新增

- 小程序版初步开发完成

- 添加事件坐标转换方法 PointerEvent / DragEvent / MoveEvent

- 自由宽高的文本也支持对齐功能

- 插件增加 获取 leafer 实例的方法

修复

- 当 Image 的 url 修改后,图片尺寸没有自动调节

- Text 中空格宽度为 0

- leafer.export 调用有时不触发

- Window 环境下多层结构闪烁

- 创建元素时未设置坐标导致显示错位

- Canvas 元素 draw 带有混合模式的 Group 定位不准确

- 当 stroke 有值时,strokeWidth 为 0 不生效

事件坐标转换示例

- 画笔工具(按下鼠标拖动开始画线, 可以缩放平移画面)

ts
import { Leafer, DragEvent, Pen } from 'leafer-ui'

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

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

leafer.on(DragEvent.START, (e: DragEvent) => {
    const inner = e.getInner(pen)
    pen.setStyle({ stroke: 'black', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(inner.x, inner.y)
})

leafer.on(DragEvent.DRAG, (e: DragEvent) => {
    const inner = e.getInner(pen)
    pen.lineTo(inner.x, inner.y)
    pen.paint()
})

2023 / 07 / 27

v1.0.0-beta.7

官网

- 用户参与

新增

- Group 新增 removeAll() 方法,用来移除子元素

- 插件支持传入 配置对象

修复

- Windows 环境下 zoomMode 不生效的问题

- remove 与 add 连用出错

- 多张图片加载的问题

- watcher 监听添加 Group,没有收集子元素的问题

- watcher 对已经移除的元素没有从更新列表中剔除

2023 / 07 / 21

v1.0.0-beta.6

- Node.js 版发布🎉🎉🎉

- 模拟用户交互

- 围绕中心点缩放与旋转

- 基础动画支持

- 擦除功能

- 导出图片

静态方法名变更:

ts
LeafHelper.moveWorld() // =  LeafHelper.move() 已移除
LeafHelper.zoomOfWorld() // = LeafHelper.zoomOf() 已移除
LeafHelper.rotateOfWorld() // = LeafHelper.rotateOf() 已移除

2023 / 07 / 03

v1.0.0-beta.2

- 开放 插件功能

- 建立技术交流群

官网

- 我们的博客

2023 / 06 / 26

官网

- 测试性能用例

- 功能示例展示

- 致谢开源技术

2023 / 06 / 17

v1.0.0-beta

- 基础 UI 组件

- 渐变、图案填充、阴影、遮罩、裁剪

- 自动化测试

- 开发文档、API 文档

Released under the MIT License.