Fabric

Hello Fabric

安装

bash
1pnpm install fabric

或者通过 cdn 引入

html
1<script src="https://cdn.jsdelivr.net/npm/fabric"></script>

创建 canvas 元素。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Parcel Sandbox</title>
5    <meta charset="UTF-8" />
6    <style>
7      #c {
8        border: 1px solid black;
9      }
10    </style>
11    <script src="https://cdn.jsdelivr.net/npm/fabric"></script>
12  </head>
13
14  <body>
15    <div id="app">
16      <canvas id="c" width="300" height="300"></canvas>
17    </div>
18  </body>
19</html>

画矩形

js
1// 这里捕获 canvas 元素，注意直接写 id 而不是#id
2const canvas = new fabric.Canvas('c')
3// 定义矩形的初始坐标、颜色和初始大小
4const rect = new fabric.Rect({
5  left: 100,
6  top: 100,
7  fill: 'red',
8  width: 50,
9  height: 50,
10})
11//添加到画板上
12canvas.add(rect)

画圆形

js
1// 画圆
2const circle = new fabric.Circle({
3  radius: 25,
4  left: 0,
5  top: 0,
6  fill: 'blue',
7})
8canvas.add(circle)

跟矩形类似，圆形需要定义 radius（半径）。

画三角形

js
1//画三角形
2const triangle = new fabric.Triangle({
3  width: 80,
4  height: 80,
5  fill: 'grren',
6  left: 0,
7  top: 150,
8})
9
10canvas.add(triangle)

小结

从上面的案例可以看出来，画 canvas 的图形需要几个基本要素：

• 画板元素<canvas>
• 坐标 coordinate
• 颜色
• 矩形的大小元素（例如 width、height、radius）
• 添加到 canvas 中

利用这些元素，极大地简化了 canvas 的操作，并且所有元素默认都是可拖拽、移动、伸缩的。

插入图片

fabric 提供 Image.fromURL方法，可以动态加载图片，并且塞到 canvas 元素中。

js
1// 插入图片
2fabric.Image.fromURL('https://cdn.wallpapersafari.com/62/31/NA3nl0.jpg', function (oImage) {
3  oImage.scale(0.2)
4  canvas.add(oImage)
5})

其中，第二个参数是 handler 函数，我们在该函数中对加载过来的图片进行一些操作，操作方式很多，例子中是将其缩小到原来的 1/5 大小。

canvas.add 也是在 handler 中处理的。

不规则图形

不规则图形本质上是通过点或者线等基本的绘制元素，将坐标按照绘制元素给串联起来组合而成的。

比如，我们手动绘制不规则图形时，就是将画笔在画布上所走过的路径（path）给描出来。

现在我们就是用代码的方式，将生成不规则图形的过程给写出来。

下面我们利用fabric.Path方法来生成不规则图形，所有不规则图形都有事先的坐标，这些坐标则作为该方法的参数，然后通过线、点等串联起来即可。

js
1const path = new fabric.Path('M 0 0 L 200 200 L 160 200 z')
2path.set({
3  left: 200,
4  top: 200,
5  fill: 'black',
6})
7canvas.add(path)

Path 方法的入参，这里重点解释一下：

• M 0 0 表示开始移动，最开始的坐标为 0 0
• L 200 200表示用Line画一条到 （200,200）的线
• L 160 200从上次所在的坐标点（200,200），画一条到（160,200）的线
• z 表示不规则图形闭合（即从160,200回归到原点）

整个过程用画笔画下来类似这样的效果：

接着就是对该路径的设置：

js
1path.set({
2  left: 200,
3  top: 200,
4  fill: 'black',
5})

这个路径我们将其放置在画布的 200 200 位置，最后将其填充为黑色。

由于这种路径方式可阅读性不高，并且坐标的参数容易出错，所以当遇到比较难的图形时，一般我们会用 svg 替代它。