本文介绍: 最近想做一个轻巧的在线画册和海报设计工具,最近发布的 LeaferUI 特别适合这样的场景

LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas  2D 图形 UI 绘图框架,用于 web 端在线图形设计、图表、白板、数据可视化等场景

最近想做一个轻巧的在线画册和海报设计工具,最近发布的 LeaferUI 特别适合这样的场景

LeaferUI 是什么

Leafer UI 是基于 LeaferJS 开发一套绚丽多彩的 UI 绘图框架,帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎,在 web绘图性能非常出众,和同类图形引擎相比,渲染耗时少、占用内存超低。

LeaferUI 官网

作为一款国产的绘图引擎,LeaferJS 的愿景不小:

我们致力于通过 LeaferJS 实现一套简洁开放、现代化的 UI 绘图语言标准,为数字化产品开发提供跨平台轻量化高性能运行时。我们希望不同的软件之间能够沟通、协作共享绘图数据数字界面通过不断革新的图形技术和配套支持, 吸引更多的开发者加入使用,建立起一个开放生态环境,沟通有无,以推动行业的快速发展,并诞生出更多有创意技术产品
— LeaferJS 的使命和愿景
Leafer UI 提供了常用的 UI 绘图组件和开箱即用的功能,使得我们可以很方便地与 FigmaSketch产品行数交换,并为跨平台开发提供了统一、丰富的交互事件,如拖拽旋转缩放手势等。

LeaferUI 组件预览

Leafer UI 的技术特性

我用 LeaferUI 来做什么

最近有一个需求,是要做一个在线设计海报画册的小程序用户可以通过一些预先做好设计模板,只需要替换图片文案,就可以快速做出审美在线、风格大气的画册和海报。前期技术评估时,调研了解相关的技术,期间发现了 LeaferJS 这个 2D 绘图引擎,刚好能满足需求

LeaferUI 组件预览

开发上手

安装 Leafer UI

也可以直接在引入

简单使用示例

这样就能跑起来了。LeaferUI 很像游戏引擎内置了一些绘图的 api 可以很方便地调用比如绘制各种矩形、圆形、扇形,以及各种常见多边形,当然基本图片文字,也都能渲染。另外还有容器渐变、线条等api,有了这些 api,我就可以很容易构建一个简约的用户设计操作界面,根据设计模板实现合成画册或者海报的功能了。

LeaferUI 组件预览

除了构建界面,用户操作也是必不可少的,LeaferUI 提供了用户点击拖拽滑动放大缩小等事件处理起来很省事。目前 LeaferUI 很多 api 已经很完善了,很值得去尝试

完善的文档

LeaferUI 提供很容易上手学习使用文档每个重要功能都有详细的代码示例示例效果感兴趣开发者可以前往官网阅读

免费开源说明

Leafer UI 是一个免费开源JavaScript 项目采用 MIT 许可,我们可以免费下载使用,也可以放心用于商业项目

原文链接https://www.thosefree.com/leaferui

原文地址:https://blog.csdn.net/weixin_45583710/article/details/132205768

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_23478.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注