简介
Fabric.js - 一个强大的 Javascript 库，它让使用 HTML5 画布变得轻而易举。Fabric 为画布提供了一个缺失的对象模型，以及一个 SVG 解析器、交互层和一整套其他不可或缺的工具。它是一个完全开源的项目。
如今， Canvas使我们能够在网络上创建一些绝对 令人惊叹的 图形。但它提供的 API令人失望地低级。如果我们只是想在画布上绘制一些基本形状而忘记它们，那是一回事。但是，一旦需要进行任何类型的交互、随时更改图片或绘制更复杂的形状，情况就会发生巨大变化。
Fabric旨在解决这个问题。
官网 Fabric.js
安装
npm安装
npm install fabric --save
npm方式引入
import { fabric } from 'fabric'
CDN引入
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
cdn方式引入全局就有了fabric对象
Fabric的对象
- fabric.Circle //圆形
- fabric.Ellipse //椭圆
- fabric.Line //线
- fabric.Polygon //多边形
- fabric.Polyline //交叉线 折线
- fabric.Rect //矩形
- fabric.Triangle//三角形
- mouse:down 鼠标按下
- mouse:move 鼠标移动
- mouse:dblclick 鼠标双击
- object:added 添加图层
- object:modified 编辑图层
- object:removed 移除图层
- selection:created 初次选中图层
- selection:updated 图层选择变化
- selection:cleared 清空图层选中
使用
1、给定一个 带有 id 的 canvas 标签，相当于一个画布容器
<canvas id="canvas" width="400" height="400"></canvas>
// 样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
}
#canvas {
border: 1px solid red;
}
</style>
2、初始化 fabric.Canvas
// 实例化
let fabricObj = new fabric.Canvas('canvas')
// 设置画布宽高 可以动态设置画布宽高，如果在标签上也设置了宽高，则会将其覆盖掉
fabricObj.setWidth(650)
fabricObj.setHeight(650)
3、设置画布背景
// 设置背景图
// 读取图片地址，设置画布背景
fabric.Image.fromURL('./image/4.jpg', (img) => {
img.set({
// 通过scale来设置图片大小，这里设置和画布一样大
scaleX: fabricObj.width / img.width, // 这里也可以写0 - 1
scaleY: fabricObj.height / img.height, // 这里也可以写0 - 1
});
// 设置背景
fabricObj.setBackgroundImage(img, fabricObj.renderAll.bind(fabricObj));
fabricObj.renderAll();
})
4. 画矩形
// 画个矩形
let rect = new fabric.Rect({
left: 100,
top: 50,
fill: '#ccc',
width: 30,
height: 30,
strokeWidth: 5,//笔触宽度
hasControls: true, //选中时是否可以放大缩小
hasRotatingPoint: true,//选中时是否可以旋转
hasBorders:true,//选中时是否有边框
transparentCorners:true,
perPixelTargetFind:true,//默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
selectable:true,//是否可被选中
lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
})
fabricObj.add(rect)
5、画圆
// 画个圆
let circle = new fabric.Circle({
left: 100,
top: 100,
fill: '#007acc',
radius: 50 // 半径
})
fabricObj.add(circle)
6、画三角形
// 画个三角形
let triangle = new fabric.Triangle({
left: 100,
top: 250,
fill: '#ffcd43',
width: 100,
height: 50
})
fabricObj.add(triangle)
7、画线
// 画线
let line = new fabric.Line([200, 300, 200, 150], {//终止位置，线长，起始位置，top，这里是从项目中截下来的我用了变量代替，你要用的话lineheight和lineleft用自己的变量或者数字代替。如果两个终止位置和起始位置的数值一样那么这个线条会垂直，这个应该很好理解。
fill: '#5E2300',//填充颜色
stroke: '#5E2300',//笔触颜色
strokeWidth: 5,//笔触宽度
hasControls: false, //选中时是否可以放大缩小
hasRotatingPoint: false,//选中时是否可以旋转
hasBorders:false,//选中时是否有边框
transparentCorners:true,
perPixelTargetFind:true,//默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
selectable:true,//是否可被选中
lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
});
fabricObj.add(line)
8、 画椭圆
// 画个椭圆
let ellipse = new fabric.Ellipse({
rx: 80, // 定义水平半径
ry: 40, // 定义垂直半径
fill: 'blue',
borderDashArray: [10] //定义边框的虚线图案
});
fabricObj.add(ellipse)
用鼠标绘制多边形可以 参考下面这位园友的一篇博客
Fabric.js在vue页面中鼠标绘画多边形 Polyline
