初识fabricjs

杨之之
697 阅读2分钟

初识fabricjs

Fabric.js —一个功能强大的Javascript库，使使用HTML5 canvas的工作变得轻而易举。 Fabric提供了画布缺少的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。
在发现使用原生canvas API的烦恼之后，Fabric于2010年左右开始。最初的作者正在为printio.ru创建一个交互式设计编辑器-他的创业公司允许用户设计自己的服装。他们想要的那种交互性仅在那时存在于Flash应用程序中。即使是现在，也很少有人能接近Fabric所能提供的功能。
以上便是fabricjs库的简介，从fabricjs的简介大家就能知道，fabricjs是基于canvas开发的库，且便于用户交互，下面我就来简单的来演示一下如何引用和基本的操作。

fabricjs的安装

通过脚本标签从 CDN 使用

<script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/index.min.js"></script>

从 npm 安装

npm i --save fabric

fabricjs的引用

import { StaticCanvas,  Canvas } from "fabric";

这里有俩种创建画布的api，下面是俩种方式创建画布的区别：

StaticCanvasc创建画布

首先定义画布元素：

      <canvas id="canvas" :width="300" :height="600"></canvas>

然后使用StaticCanvasc方法创建画布并且创建几个元素：

const canvas = new StaticCanvas("canvas");
const helloWorld = new FabricText("Hello world!");
  const redCircle = new Circle({
    radius: 20,
    fill: "red",
    left: 100,
    top: 100,
  });
  canvas.add(helloWorld);
  canvas.add(redCircle);
  canvas.centerObject(helloWorld);

运行上面的代码可以得到下面的结果

image.png
点击页面上的元素没有任何反应，就是一个静态的画布。

Canvas创建画布

 const canvas = new Canvas("canvas");
  const helloWorld = new FabricText("Hello world!");
  const redCircle = new Circle({
    radius: 20,
    fill: "red",
    left: 100,
    top: 100,
  });
  canvas.add(helloWorld);
  canvas.add(redCircle);
  canvas.centerObject(helloWorld);

运行代码后得到的效果和StaticCanvasc创建画布得到的结果是一样的，但是当你点击画布上的元素时却可以对画布上的元素进行操作

image.png
这就是fabricjs帮我们封装的操作控制器，可以进行基础的平移、旋转、缩放等等，后续会详细说明控制器的，这里暂不赘述。

使用Canvas方法创建画布时的注意事项

当你使用vue项目引用fabricjs，并且使用ref来创建变量接收创建画布的实例时会导致控制器旋转、缩放等功能失效，只能使用平移功能

const canvas = ref();
canvas.value = new Canvas("canvas");
  const helloWorld = new FabricText("Hello world!");
  const redCircle = new Circle({
    radius: 20,
    fill: "red",
    left: 100,
    top: 100,
  });
  canvas.value.add(helloWorld);
  canvas.value.add(redCircle);
  canvas.value.centerObject(helloWorld);

所以建议避免使用 Vue ref 存储 canvas 实例， 具体解释请参考下面链接：Fabric.js 项目中元素无法缩放和旋转的问题分析与解决方案 - GitCode博客

最后

感谢你观看本文章到最后，希望能对你有帮助

avatar
文章
阅读
粉丝