一，fabric对象的理解
原生的canvas画图操作太过繁琐，fabric.js在原生canvas方法之上封装了一层，提供更为简单但功能强大的对象模型。它负责画布的状态和渲染，并让我们直接使用“对象”。
使用abric需要先理解它对象的概念。画布是一个对象，上面的各个图案也是对象。而原生的canvas则没有这么多对象。可以看下文对比，理解一下。
1，使用原生canvas和fabric创建图形对比
当我们使用canvas画图的操作：
<template>
<div class="app">
<canvas id="canvas" width="300" height="200"></canvas>
</div>
</template>
<script>
export default {
mounted() {
var canvasEl = document.getElementById("canvas");
canvasEl.style.background = 'grey'
var ctx = canvasEl.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(100,100,20,20);
},
};
</script>看起来和原生js差不多，繁琐低效。再看fabric:
<template>
<div class="app">
<canvas id="canvas" width="300" height="200"></canvas>
</div>
</template>
<script>
import {fabric} from "fabric"
export default {
mounted(){
var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
var rect = new fabric.Rect({
left:100,
top:100,
fill:"red",
width:20,
height:20,
});
canvas.add(rect);
}
}
</script>使用原生方法，我们可以在上下文ctx(一个表示整个画布位图的对象)上操作。在Fabric中，我们对对象进行操作——实例化它们，更改其属性并将其添加到画布。这些对象是Fabric土地上的一等公民。
2，使用原生canvas和fabric修改图形对比
按照1中的说法，原生canvas中我们只能获取到表示整个画布位图的ctx对象。那如果要移动画布中的图案呢？
原生canvas需要先清除画布上的内容，然后再在目标位置画出新内容。
mounted() {
var canvasEl = document.getElementById("canvas");
canvasEl.style.background = 'grey'
var ctx = canvasEl.getContext("2d");
ctx.fillStyle = 'red';
ctx.fillRect(100,100,20,20);
//位移
ctx.clearRect(0,0,canvasEl.width,canvasEl.height);//整个画布内容擦除
ctx.fillRect(20,50,20,20);//新位置绘图
},而使用fabric呢？
mounted(){
var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
var rect = new fabric.Rect({
left:100,
top:100,
fill:"red",
width:20,
height:20,
});
canvas.add(rect);//在画布对象上添加这个矩形
// 位移
rect.set({left:20,top:50});//修改举行对象的位置属性
canvas.renderAll()//修改完之后重新渲染
}画布上创建的矩形rect本身是一个对象，我们只要修改它的位置属性，就可以实现位置的移动了。理解了fabric的对象的概念，就可以开始使用了。
二，安装
npm i fabric --save三，画布对象
<canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>import { fabric } from 'fabric'
const canvas=new fabric.Canvas("canvas", {
backgroundColor: "pink",
selectionColor: "blue",
selectionLineWidth: 2,
// ...
}); // 这里传入的是canvas的id：c,第二个参数是对象，里面可以设置画布的一些属性
//获取canvas上的所有对象
canvas.getObjects();
//在画布上添加指定的对象
canvas.add(rect);
//删除指定的对象
canvas.remove(rect);
}参数的设置可以查看官网对应的api:JSDoc: Class: Canvas (fabricjs.com)
四，创建基础对象
1，Fabric.js 基础对象
在 Fabric.js 中有以下七种预定义的基础对象。
fabric.Rect 矩形
fabric.Circle 圆形
fabric.Triangle 三角形
fabric.Ellipse 椭圆
fabric.Line 线型
fabric.Polyline 折线
fabric.Polygon 多边形为了方便起见，我把这七种都写出来了：
//新建画布对象
const canvas = new fabric.Canvas("canvas", {
backgroundColor: "pink",
selectionColor: "blue",
selectionLineWidth: 2,
});
//矩形
const rect = new fabric.Rect({
left: 10,
top: 10,
width: 30,
height: 30,
fill: "yellow",
});
//圆形
const circle = new fabric.Circle({
left: 50,
top: 10,
radius: 15,
fill: "green",
});
//三角形
const triangle = new fabric.Triangle({
left: 90,
top: 10,
width: 30,
height: 30,
fill: "blue",
});
//椭圆
const ellipse = new fabric.Ellipse({
left: 130,
top: 10,
rx: 10, //短轴
ry: 15, //长轴
fill: "red", //填充颜色
stroke: "rgba(0, 0, 0, 1)", //边框颜色
});
//直线
const line = new fabric.Line([170, 25, 200, 25], {
//该数组四个值【起点x,起点y,终点x,终点y】
fill: "#5E2300", //填充颜色
stroke: "#5E2300", //笔触颜色
});
//折线
const polyline = new fabric.Polyline(
[
{
x: 200,
y: 10,
},
{
x: 250,
y: 50,
},
{
x: 250,
y: 180,
},
],
{
fill: "transparent",
stroke: "red", //笔触颜色
strokeWidth: 2,
}
);
// 多边形
const polygon = new fabric.Polygon(
[
{
x: 200,
y: 10,
},
{
x: 250,
y: 50,
},
{
x: 250,
y: 180,
},
],
{
left: 100,
top: 50,
fill: "red",
strokeWidth: 4,
stroke: "green",
}
);
canvas.add(rect, circle, triangle, ellipse, line, polyline, polygon); //它可以添加一个，也可以一次性添加多个实现的效果：
2，基础对象的常见属性
上文创建了其中基础对象，他们有一些属性参数，如下所示：
fill: "#5E2300", //填充颜色
stroke: "#5E2300", //笔触颜色
scaleX: 4,//x轴放大倍数
scaleY: 4,//y轴放大倍速
strokeWidth: 4, //笔触宽度
selectable: true, //是否可被选中
transparentCorners: false, //选中后的控制手柄的是否透明
cornerColor: "blue", //选中后的控制手柄颜色
hasControls: true, //选中时是否可以放大缩小
hasRotatingPoint: true, //选中时是否可以旋转
hasBorders: true, //选中时是否有边框
lockMovementX: true, //X轴是否可被移动(true为不可，因为前缀是lock)
lockMovementY: true, //Y轴是否可被移动(true为不可，因为前缀是lock)更多的属性，可以查看对应文档：JSDoc: Home (fabricjs.com)
五，操作对象
上文我们只是创建了对象，在某个时候，我们可能会想要修改那些对象。
也许某些动作将需要触发状态改变，或者播放某种形式的动画。或者，我们可能想更改某些鼠标交互时的对象属性（颜色，不透明度，大小，位置）。
Fabric和vue一样，数据驱动视图，我们只要变更对应对象的属性值，就可以驱动视图发生相应的变化。
而这些可供修改的属性，都与定位有关——left、top；尺寸——width、height；渲染——fill、opacity、stroke、strokeWidth；缩放和旋转——scaleX、scaleY、angle；甚至与翻转相关的内容——flipX、flipY和倾斜的skewX、skewY。
1，读取对象属性
obj.get('属性名')例如，获取距离左侧的宽度：
//新建画布对象
const canvas = new fabric.Canvas("canvas", {
backgroundColor: "pink",
selectionColor: "blue",
selectionLineWidth: 2,
});
// 多边形
const polygon = new fabric.Polygon(
[
{
x: 100,
y: 10,
},
{
x: 250,
y: 10,
},
{
x: 250,
y: 180,
},
{
x: 150,
y: 180,
},
],
{
left: 100,
top: 50,
fill: "red",
strokeWidth: 4,
stroke: "green",
perPixelTargetFind: true,
}
);
canvas.add(polygon);
console.log("获取距离左侧距离", polygon.get("left"));2，设置对象属性
obj.set("属性名",新的属性值)这个set还支持链式调用，并且，在canvas.add(polygon);之前或者之后调用，都是可以的：
polygon.set("fill", "blue").set("stroke", "red");//将上文的多边形填充和边框颜色变更或者obj.set传入属性对象也是可以的
obj.set({属性名：属性值})3，自定义原型对象属性方法
在fabric中的大多数对象都从根fabric.Object继承。 fabric.Object几乎代表一个二维形状，位于二维画布平面中。它是一个具有left / top和width / height属性以及一系列其他图形特征的实体。我们在对象上看到的那些属性（fill、stroke、angle、opacity、flip *等）对于所有从fabric.Object继承的Fabric对象都是共有的。 这种继承使我们可以在fabric.Object上定义方法，并在所有子“类”之间共享它们。例如，如果要在所有对象上都具有getWidth方法，则只需在fabric.Object.prototype上创建它：
fabric.Object.prototype.getWidth = function () {
return this.get("width");
};
//新建画布对象
const canvas = new fabric.Canvas("canvas", {
backgroundColor: "pink",
selectionColor: "blue",
selectionLineWidth: 2,
});
// 多边形
const polygon = new fabric.Polygon(
[
{
x: 100,
y: 10,
},
{
x: 250,
y: 10,
},
{
x: 250,
y: 180,
},
{
x: 150,
y: 180,
},
],
{
left: 100,
top: 50,
fill: "red",
strokeWidth: 4,
stroke: "green",
perPixelTargetFind: true,
}
);
canvas.add(polygon);
console.log("获取宽度", polygon.getWidth());六，Image对象
图像对象和基础对象又有所不同，因为它需要开发者额外导入图像资源。
这里需要区分两种情况。
1，document上有已经渲染的图像
这种写法需要等图像已经渲染出来了，才能创建fabric对象。所以我把创建canvas放在image的load方法内部了。
<template>
<div id="app">
<!-- 1、创建 canvas 元素 -->
<canvas
width="400"
height="400"
id="canvas"
style="border: 1px solid #ccc"
></canvas>
<img
src="./hq-wmyd.png"
alt="picture"
id="img"
width="100"
height="auto"
@load="imageLoad"
/>
</div>
</template>
<script>
//引入fabric
import { fabric } from "fabric";
export default {
name: "App",
components: {},
mounted() {},
data() {
return {};
},
methods: {
imageLoad() {
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
const imgElement = document.getElementById("img");
const imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 45,
opacity: 0.6,
});
console.log(imgInstance);
canvas.add(imgInstance);
},
},
};
</script>
<style scoped lang="scss"></style>2，采用图片地址的方式
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
fabric.Image.fromURL(
"https://i.niupic.com/images/2022/10/15/a9pJ.png",
(oImg) => {
canvas.add(oImg);
}
);实现的效果均是如下：
七，路径对象path
上文我们已经能够绘制基本的图案了。
如果想要画出更复杂的图案，则需要引入path。
Fabric中的路径非常类似于SVG <path>元素。它们使用相同的命令集。Fabric中的路径代表可以用其他方式填充，描边和修改的形状轮廓。路径由一系列命令组成，这些命令实际上模仿了笔从一个点到另一个点的过程。借助“移动”，“线”，“曲线”或“弧”等命令，路径可以形成难以置信的复杂形状。
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
const path = new fabric.Path(
`M8870 5431 c-20 -11 -46 -38 -60 -63 l-25 -43 -5 -1985 c-5 -1969 -5
-1985 15 -2029 36 -80 41 -81 412 -81 l323 0 29 57 c98 194 293 384 499 487
81 41 217 83 326 102 147 25 406 16 538 -19 301 -79 541 -276 674 -553 l45
-94 421 0 421 0 63 31 c88 43 186 135 221 207 l28 57 3 728 3 728 -35 104
c-45 134 -88 218 -199 390 -191 296 -1019 1641 -1061 1723 -76 150 -232 238
-466 262 -64 6 -479 10 -1119 10 -970 -1 -1018 -2 -1051 -19z m1991 -291 c171
-17 279 -58 309 -117 8 -15 62 -107 119 -203 281 -475 476 -823 537 -961 26
-58 39 -103 42 -146 4 -58 2 -64 -25 -92 -16 -16 -47 -34 -69 -40 -55 -15
-2238 -15 -2299 0 -52 13 -119 67 -144 118 -40 79 -43 122 -39 731 3 577 3
586 25 632 13 29 35 55 55 68 32 19 48 20 709 20 393 0 720 -4 780 -10z m1605
-3111 c49 -45 54 -72 54 -294 0 -236 -7 -266 -64 -290 -71 -30 -157 -13 -206
39 -24 26 -25 34 -28 173 -7 312 33 409 166 400 38 -3 59 -10 78 -28z`
);
let commonObj = {
left: 10,
top: 10,
fill: "#5E2300",
scaleX: 0.01,
scaleY: 0.01,
};
canvas.add(path.set(commonObj));创建路径的流程是：实例化fabric.Path对象，并向其传递一串路径指令。虽然看起来很神秘，但实际上很容易理解。 “ M”表示“移动”命令，并指示隐形笔移动到第一点。 “ L”代表“线”，使笔画一条线到下一点。然后，另一个“ c”创建一条到另一点的贝塞尔曲线。最后，“ z”告诉强制绘图笔关闭路径并最终确定形状。
由于fabric.Path就像Fabric中的任何其他对象一样，我们也能够更改其某些属性。
可以看到，路径是很多的点数据，所以通常我们很少会手动创建Path实例，而是使用Fabric的内置SVG解析器来获取路径。
上面代码实现的效果：
八，文本对象
fabric提供的文本对象支持多行输入、文字对齐方式选择、文字背景设置、文本修饰、文本行高、设置字间距、修改样式、富文本（支持标签）、在 canvas 进行输入编辑。 常用的创建文本的方法如下，第一个参数是文本内容,第二个则是文本的属性对象：
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
const txt = new fabric.Text('test', {
left: 140, // 位置
top: 140,
shadow: 'rgba(0,0,0,0.3) 15px 15px 15px', // 阴影
fontFamily: 'Hoefler Text', // 字体
stroke: '#ff1318', // 画笔颜色
strokeWidth: 2, // 画笔粗度
fill: '#0f0', //填充颜色
fontSize: 60, // 字体大小
});
canvas.add(txt);实现的效果：
九，组的概念
上文讲的都是单个元素的创建和操作，除此之外，fabric也提供了将创建的对象进行组合的方法 group ，将几个对象进行组合成为一个新的对象之后进行操作：
const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
const rect = new fabric.Rect({
//自己对象的属性可以单独设置
width: 30,
height: 30,
fill: "yellow",
});
const ellipse = new fabric.Ellipse({
rx: 10, //短轴
ry: 15, //长轴
fill: "red", //填充颜色
stroke: "rgba(0, 0, 0, 1)", //边框颜色
});
const group = new fabric.Group([ rect, ellipse ], {
//公用的属性可以设置到这里来
left: 0,
top: 0,
});
canvas.add(group);实现的效果如下图：
而如果需要设置对象在组合中的位置，可以在创建对象的时候设置位置：
const rect = new fabric.Rect({
+ left: 15,
+ top: 10,//这里设置位置，是以groups的左上角为基准的相对坐标值
width: 30,
height: 30,
fill: "yellow",
});
