前言
最近项目上要求实现让用户能够用鼠标绘制路径，区域，添加图片等需求。既然要实现绘制，一下子就想到用canvas去实现，于是在网上查找了一下有没有一些封装好的canvas库，最终决定使用fabric.js
fabric的引入以及常用绘制方法
fabric的引入
// 安装
npm install fabric -S
// 引用
<template>
<canvas id="c" width="600" height="400"></canvas>
</template>
<script>
import { fabric } from 'fabric'
let canvas = null
export default {
mounted() {
canvas = new fabric.Canvas('c')
}
}
</script>
添加canvas背景图片
// 使用本地图片
let imgUrl = require('本地图片路径')
// 使用网络图片
let imgUrl = '链接地址'
fabric.Image.fromURL(imgUrl, (img, err) => {
if(err) {
canvas.setBackgroundColor('rgba(85, 107, 198, 0.6)',
canvas.renderAll.bind(canvas))
}else {
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
crossOrigin: 'anonymous' // 使用的图片跨域时，配置此参数
});
}
})
绘制直线
let points = [x1, y1, x2, y2] // 起始坐标和终点坐标
let line = new fabric.Line(points, {
stroke: 'red', // 直线颜色
strokeWidth: 4, // 直线宽度
strokeDashArray: [3, 1], // 这是画虚线时要加的，每隔a个像素空b个像素
evented: false, // 设置为false时，对象不能成为事件的目标
hasControls: false, // 设置为false时，选中的时候不出现旋转缩放标识
hasBorders: false, // 设置为false时，选中的时候不出现边框
})
canvas.add(line) // 添加到画布
绘制矩形
let rect = new fabric.Rect({
left: 100, // 左上角位置
top: 100, // 左上角位置
width: 100,
height: 100,
fill: 'pink', // 背景颜色
stroke: 'red, // 边框颜色
strokeWidth: 4, // 边框宽度
hasControls: false, // 设置为false时，选中的时候不出现旋转缩放标识
hasBorders: false, // 设置为false时，选中的时候不出现边框
selectable: false, // 不能被选择
selection: false, // 不会出现被选中的效果
})
canvas.add(rect)
添加图片
// 使用本地图片
let imgUrl = require('本地图片路径')
// 使用网络图片
let imgUrl = '链接地址'
fabric.Image.fromURL(imgUrl, (img, err) => {
if(!err) {
img.set({
left: 100, // 左上角位置
top: 100, // 左上角位置
width: 100,
height: 100,
crossOrigin: 'anonymous' // 使用的图片跨域时，配置此参数，有时会失效
})
canvas.add(img)
}
})
绘制文字
let text = new fabric.Text('文字内容', {
left: 100, // 左上角位置
top: 100, // 左上角位置
fontSize: 20,
fill: 'pink', // 字体颜色
})
canvas.add(text)
绘制可以输入的文本框
let text = new fabric.Textbox('默认内容，可为空', {
left: 100, // 左上角位置
top: 100, // 左上角位置
fontSize: 20,
fill: 'pink', // 字体颜色
})
canvas.add(text)
text.enterEditing() // 进入编辑状态
// text.exitEditing() // 退出编辑状态，在适当的时候使用
使用笔记
常用属性
canvas.isDrawingMode = true; 可以自由绘制
canvas.selectable = false; 控件不能被选择，不会被操作
canvas.selection = true; 画板显示选中
canvas.skipTargetFind = true; 整个画板元素不能被选中
canvas.freeDrawingBrush.color = "#E34F51" 设置自由绘画笔的颜色
freeDrawingBrush.width 自由绘笔触宽度
canvas.setZoom(2); 设置画板缩放比例
方法
add(object) 添加
insertAt(object,index) 添加
remove(object) 移除
forEachObject 循环遍历
getObjects() 获取所有对象
item(int) 获取子项
isEmpty() 判断是否空画板
size() 画板元素个数
contains(object) 查询是否包含某个元素
fabric.util.cos
fabric.util.sin
fabric.util.drawDashedLine 绘制虚线
getWidth() setWidth()
getHeight()?
clear() 清空
renderAll() 重绘
requestRenderAll() 请求重新渲染
rendercanvas() 重绘画板?
getCenter().top/left 获取中心坐标
toDatalessJSON() 画板信息序列化成最小的json
toJSON() 画板信息序列化成json
moveTo(object,index) 移动?
dispose() 释放?
setCursor() 设置手势图标
getSelectionContext()获取选中的context
getSelectionElement()获取选中的元素
getActiveObject() 获取选中的对象
getActiveObjects() 获取选中的多个对象
discardActiveObject()取消当前选中对象
isType() 图片的类型?
setColor(color) = canvas.set("full","");
rotate() 设置旋转角度
setCoords() 设置坐标
canvas事件
object:added
object:removed
object:modified
object:rotating
object:scaling
object:moving
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created
mouse:down
mouse:move
mouse:up
mouse:over
mouse:out
mouse:dblclick
