作者：雾恋 序言 别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。 背景 前段时间学习了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 <顺便插播一句，如果你在看新的机会 →前、后端 or 测试 ，技术大厂核心岗，base 武汉、深圳、苏州等多地；语言：Java、Js、测试、python、ios、安卓、C++ 等> 标尺 fabricjs 是没有对应的插件，有一些插件可以使用，但是没有很好的适配不友好；而leaferjs有对应的插件leafer-x-ruler 直接可以使用，对于画布也很适配流畅度拉满。以下是示例代码： 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如果要创建画布的话需要通过矩形创建一个剪切板，然后超出画板就不展示；如以下代码： 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即可。 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); 总结 以上是一些简单的示例代码，感谢关注。
悬赏已过期
后悬赏过期
