fabric.js的部分使用

为什么用到了？

项目中需要在video便签上叠加一个检测区域，自然要用canvas绘制，那有什么简便的方法吗?
从某大佬那第一次听到 fabric.js

fabric.js

官网链接

使用说明(react)

1. 安装 fabric.js

• npm install fabric --save

2. 使用

• 将其引入你所需要的文件中

import { fabric } from 'fabric'

之后便可以做你想做的事情了~

绘制规则图形

1.在html中声明画布

<canvas id="canvas"></canvas>

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.其他规则图形

• 绘制方形 var rect = new fabric.Rect
• 绘制圆形 var circle = new fabric.Circle
• 绘制三角形 var triangle = new fabric.Triangle

绘制不规则图形

使用路径绘图：用点和线的移动方式进行绘图

<!--M:代表移动命令，L:代表线，Z:代表让图形闭合形成路径-->
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中

<canvas id="canvas" width='400' height='400'></canvas>
<img src="***.png" id="img">

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中

<canvas id="canvas"></canvas>

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 (
        <div className='platform-content'>
            <canvas id="canvas"></canvas>
            <!--else...-->
        </div> 
    )
}

}

export default Video;

---

写在最后：当时写需求的时候因为官网是纯英文的，理解起来比较吃力，网上资料也比较少，所以还是抽空写了这篇文章，虽然比较乱，但希望能帮到大家~（其实官网的demo还是很多的。）