canvas js 绘图插件_Fabric.js介绍

这个算是一个冷门的Fabric.js工具，实际中用到的估计很少，是由国外printio.ru者开发，作者Fabric是为了解决w3c规范中canvas画布提供的API少，实现复杂功能相对困难，因此这个插件诞生了。

Fabric中封装了的绘图方法如矩形、原型、线、路径、文字等，支持图片、svg等资源导入，支持元素属性动画，支持事件。

例一、绘制直线
描述：直线的起始坐标点(0, 10)，终止坐标点(100, 10)，这是一条水平直线，颜色是红色，禁止选择

let line = new fabric.Line([0, 10, 100, 10], {
stroke: '#f00',
selectable: false
});
canvas.add(line);

例二、绘制圆形
描述：圆形的坐标点(100,100)，半径是14，填充颜色是红色，描边是8颜色是灰色

let circle = new fabric.Circle({
left: 100,
top: 100,
radius: 14,
fill: '#f00',
strokeWidth: 8,
stroke: '#666'
});
canvas.add(circle);

例三、绘制文字
描述：设置字体颜色红色，大小16，右对齐

let txt = 'friends
welcome
to
qianduanka';
let text = new fabric.Text(txt, {
stroke: '#f00',
fontSize: 16,
textAlign: 'right'
});

例四、绘制路径
描述：以坐标点(65,0)，按照二次方贝塞尔曲线起点(100,100)，终点(200,0)绘制

let path = new fabric.Path('M 65 0 Q 100, 100, 200, 0', {
stroke: 'black'
});

Path介绍
M = moveto // 新位置的坐标点
L = lineto // 绘制直线的终点坐标位置
H = horizontal lineto // 绘制水平坐标位置
V = vertical lineto // 绘制垂直坐标位置
C = curveto // 绘制曲线，控制点1坐标位置，控制点2坐标位置，结束坐标位置
S = smooth curveto // 绘制光滑曲线，控制点1坐标位置，控制点2坐标位置，控制点1与控制点2是对称点，结束坐标位置
Q = quadratic Bézier curve // 二次方贝塞尔曲线，控制点坐标位置，结束点坐标位置
T = smooth quadratic Bézier curveto // 二次方贝塞尔曲线，控制点相对于当前点的反射，结束点坐标位置
A = elliptical Arc // 椭圆弧线
Z = closepath // 是否闭合路径

例五、组
描述：将绘制的图形添加到一组中，将直线和圆组成一个图形组，图形组的坐标点(150,100)，角度逆时针负10度

let group = new fabric.Group([line, circle], {
left: 150,
top: 100,
angle: -10
});

例六、动画
描述：把圆水平移动到500的位置，用时1秒，运动效果缓和反弹

circle.animate('left', 500, {
onChange: canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutBounce
});

例七、事件
描述：当前元素被选中、移动、取消选择

canvas.on('object:selected', function(opt) {

});

canvas.on('object:moving', function(opt) {

});

canvas.on('before:selection:cleared', function(opt) {

});

或者

canvas.on({
'object:selected': function(e){
    },
'object:moving': function(e){

    },
'before:selection:cleared': function(e){

    }
});

Fabric的基础知识介绍到这里，在此基础上实现工具，仍然是任重道远。如果用Fabric实现图标插件，如何做？

前端咖，值得关注，在看哦