项目中需要在video便签上叠加一个检测区域,自然要用canvas绘制,那有什么简便的方法吗?
从某大佬那第一次听到 fabric.js
官网链接
import { fabric } from 'fabric'
之后便可以做你想做的事情了~
1.在html中声明画布
2.js中进行相关操作
let canvas = new fabric.Canvas('canvas');
let rect = new fabric.Rect({
left:100, //距离画布左侧的距离,单位是像素
top:100, //距离画布上边的距离
fill:'red', //填充的颜色
width:30, //方形的宽度
height:30 //方形的高度
});
canvas.add(rect); // 将图形添加至画布
3.其他规则图形
使用路径绘图:用点和线的移动方式进行绘图
let path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
left: 120,
top: 120,
fill:'red' //填充颜色
});
canvas.add(path);
1.在HTML中
2.在js中
let canvas = new fabric.Canvas('canvas'); //声明画布
let imgElement = document.getElementById('img'); //声明我们的图片
let imgInstance = new fabric.Image(imgElement,{ //设置图片位置和样子
left:100,
top:100,
width:200,
height:100,
angle:30//设置图形顺时针旋转角度
});
canvas.add(imgInstance); //加入到canvas中
1.在HTML中
2.在js中
canvas.on('mouse:down',function(e){
console.log(e); //e中有很多信息,可以打印看一下
})
mouse:down //鼠标在画布上按下事件
mouse:up //鼠标在画布上抬起事件
mouse:move //鼠标在移动中的事件
object:move //绘制的对象在画布上移动的事件
canvas.clear() //清空画布
canvas.renderAll() //重置画布
这里以上边出现的path为例
path.set({
fill: '#fc9500', //填充的颜色
opacity: 0.5, //透明度
hasRotatingPoint: false, //禁止旋转
lockMovementX: true, //不能上下移动
lockMovementY: true, //不能左右移动
selectable:false //不能被选中
)}
path.defaultCursor = 'crosshair'; //默认光标改成十字
更多可以参考官网的例子
下边给一个一笔绘制图形的例子(类似于画笔)
/*
* @Author: liulian
* @Date: 2019-11-07 10:34:26
* @LastEditTime: 2019-11-29 11:38:16
* @Description: 自由绘制图
*/
import React from 'react';
import { fabric } from 'fabric'
class Video extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount() {
let mouseFormX;
let mouseFormY;
let mouseToX;
let mouseToY;
var canvas =new fabric.Canvas('canvas',{
isDrawingMode:true,
selectable: false, //设置是否可以选中拖动 fabric提供的
selection: false
});
canvas.on({
'mouse:down': (e) => {
mouseFormX = e.pointer.x;
mouseFormY = e.pointer.y
},
'mouse:up':(e)=>{
mouseToX = e.pointer.x;
mouseToY = e.pointer.y;
}
})
canvas.add(new fabric.Line([mouseFormX, mouseFormY, mouseToX, mouseToY],{ stroke: 'red'}))
}
render() {
return (
)
}
}
export default Video;