阅读 671

Fabric.js知多少(一)

fabric.js是什么

Fabric.js是一个封装了canvas api的库,与市面上大多数canvas库一样,fabric.js支持众多效果

Why

首先我们来看看目前各大库的对比 当然,three.js以绝对的优势占据star榜第一位,three.js相信绝大部分前端人都用过。

但是他们的侧重点不同。

fabric.js为canvas元素提供了交互式对象模型,Fabric还具有SVG到画布(和画布到SVG)解析器。使用Fabric.js,您可以在画布上创建和填充对象。简单的几何形状之类的对象。
而three.js更侧重于3D、纹理等相关。

如果你在寻找一个支持node-canvas,或者支持交互式对象模型的canas库的话,那么恭喜你,找到了!

How

对比

fabric.js很简单,你可以轻松入门
假如你需要在canvas中画一个正方形:

const canvas = document.queryselector('#canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
//画矩形
ctx.fillRect(100, 100, 20, 20);
复制代码

而使用fabric.js

const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
});
canvas.add(rect);
复制代码

这里可以很明显的看出,fabric.js基于一个对象去画出了一个红色填充的矩形。
这里可能会有人问:为什么我觉得这两种方案差不多呢? 大家别着急,这只是最基本的比较,我们此时想画一个更复杂的矩形,这个矩形带有border,有角度,并且可以被拖动:

const canvas = new fabric.Canvas('canvas');
const rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle:20,
    lockMovementX:false,
    lockMovementY:false,
    evented:true,
    stroke: "rgba(255, 255, 255, 1)",
    strokeWidth: 2
});
canvas.add(rect);
复制代码

怎么样,只需要在new fabric.Rect时,在其对象属性中年增加对应的值,那么画布就一定能过会渲染出来,并且可以随意拖动、缩放、旋转。

fabric.js 对象类型

  • image: 图片类型
  • textbox: 文字类型
  • rect: 矩形
  • circle: 圆形
  • group: 组
  • path: svg
  • polygon: 多边形
  • line: 线条
  • ……

fabric.js支持多种类型,具体的可以去查阅官方文档

结语

好了,今天就先到这里,咱们下期再讲

文章分类
前端
文章标签