我将fabricjs换为了leaferjs

作者：雾恋

序言

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

背景

前段时间学习了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);

总结

以上是一些简单的示例代码，感谢关注。