首页 最新 热门 推荐

  • 首页
  • 最新
  • 热门
  • 推荐

  • 24-11-26 09:05
  • 4134
  • 65492
juejin.cn

序言

别因今天的懒惰,让明天的您后悔。输出文章的本意并不是为了得到赞美,而是为了让自己能够学会总结思考;当然,如果有幸能够给到你一点点灵感或者思考,那么我这篇文章的意义将无限放大。

背景

前段时间学习了fabric也写了几篇文章,最近在学习和了解fabric的时候发现另一个图形化插件leaferjs,在经过两天的调研以后我觉得学习leaferjs是一个不错的选择,理由如下:

  • 国产,不得不说国产必须支持
  • 他的渲染速度以及流畅度确实很高(至少在我目前做的这些功能来看)
  • 因为是国产化所以文档都是中文,学习成本相对较低
  • leaferjs有点像quill拓展性比较强,很多东西都是插件化
  • leaferjs很多api都是封装好了的,使用起来更加的方便快捷

leaferjs简介

LeaferJS 是一款好用的 Canvas 引擎,革新的开发体验,可用于高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑。

提供了丰富的 UI 绘图元素,和开箱即用的功能,如自动布局、图形编辑、SVG 导出等,方便与 PS、 Figma、Sketch 等产品进行对接。并为跨平台开发提供了统一的交互事件,如拖拽、旋转、缩放手势等。

主要场景有:

  • leafer-draw 绘图场景
  • leafer-game 游戏开发
  • leafer-editor 图形编辑器

主要版本是:

  • web 版本
  • woker 版本
  • node 版本
  • 小程序版本

综上所述:leaferjs适用场景很大,大部分场景都是可以实现的,但是现在市面上商业化较少,大家学习以及做一些自己的项目是没问题的。

说了这么多可能大家没有直观的感受,先去看看性能测试吧!,然后我们进行对比查看。

源码@ 设计工作室 design-workshop

标尺

fabricjs 是没有对应的插件,有一些插件可以使用,但是没有很好的适配不友好;而leaferjs有对应的插件leafer-x-ruler 直接可以使用,对于画布也很适配流畅度拉满。以下是示例代码:

javascript
代码解读
复制代码
import { App } from 'leafer-ui'; import '@leafer-in/editor'; import { Ruler } from 'leafer-x-ruler'; this.app = new App({ view: canvas || 'canvas', ground: { type: 'draw' }, tree: {}, editor: { lockRatio: 'corner', // stroke: '#6f4593', // skewable: false, hover: true, // 选中框中间点 middlePoint: { cornerRadius: 10, width: 10, height: 10, }, // 选中框样式 rotatePoint: { width: 10, height: 10, fill: '#fff', }, }, sky: { type: 'draw', usePartRender: false }, }); this.ruler = new Ruler(this.app, { enabled: true, theme: 'dark', });

自定义画布

我们很多时候都是想自定义画布大小的,比如:手机大小、pc大小等等。

fabric画布

fabric如果要创建画布的话需要通过矩形创建一个剪切板,然后超出画板就不展示;如以下代码:

javascript
代码解读
复制代码
const initWorkspace = (item?: IOption) => { const { width, height } = item || option.value; fabric.Object.prototype.objectCaching = false; const workspaceData = new fabric.Rect({ fill: 'rgba(255,255,255, 0.1)', width, height, id: 'workspace', death: true, selectable: false, left: 0, top: 0, // 设置边框 // strokeDashArray: [5, 5], // stroke: '#ff0000', strokeWidth: 0, rx: 5, // 圆角 ry: 5, // 圆角 }); // 超出画布不展示 workspaceData.clone((cloned: any) => { canvas.value.clipPath = cloned; }); canvas.value.add(workspaceData); canvas.value.renderAll(); // 保存对象 workspace.value = workspaceData; };

leaferjs

官方元素: Frame: 创建画板。继承自 Box,默认白色背景、会裁剪掉超出宽高的内容,类似于 HTML5 中的页面。

我们从一下代码中可以看出来:leaferjs创建一个画布真的超级简单,直接调用api即可。

javascript
代码解读
复制代码
workspace.value = new Frame({ width: 1920, height: 1080, // overflow: 'hide', editable: false, lockRatio: true, x: 0, y: 0, resizeChildren: true, }); // 添加画布到app app.tree.add(workspace.value);

总结

以上是一些简单的示例代码,问我自己在学习的时候也将代码更新到了GitHub上面,如果想学习的朋友可以star一下 设计工作室 design-workshop

注:本文转载自juejin.cn的雾恋的文章"https://juejin.cn/post/7440830008123310132"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。
复制链接
复制链接
相关推荐
发表评论
登录后才能发表评论和回复 注册

/ 登录

评论记录:

未查询到任何数据!
回复评论:

分类栏目

后端 (14832) 前端 (14280) 移动开发 (3760) 编程语言 (3851) Java (3904) Python (3298) 人工智能 (10119) AIGC (2810) 大数据 (3499) 数据库 (3945) 数据结构与算法 (3757) 音视频 (2669) 云原生 (3145) 云平台 (2965) 前沿技术 (2993) 开源 (2160) 小程序 (2860) 运维 (2533) 服务器 (2698) 操作系统 (2325) 硬件开发 (2491) 嵌入式 (2955) 微软技术 (2769) 软件工程 (2056) 测试 (2865) 网络空间安全 (2948) 网络与通信 (2797) 用户体验设计 (2592) 学习和成长 (2593) 搜索 (2744) 开发工具 (7108) 游戏 (2829) HarmonyOS (2935) 区块链 (2782) 数学 (3112) 3C硬件 (2759) 资讯 (2909) Android (4709) iOS (1850) 代码人生 (3043) 阅读 (2841)

热门文章

104
前端
关于我们 隐私政策 免责声明 联系我们
Copyright © 2020-2025 蚁人论坛 (iYenn.com) All Rights Reserved.
Scroll to Top