FabricJS 前端绘图库使用总结(一)

使用一段时间了，总得来讲，是一款很是强大的矢量图工具，官方文档也算丰富，但文档组织形式不太好，并且少部分api设计不太一致，仍是须要整理一下。

Canvas

canvas是最基础的对象，针对<canvas>标签作的封装，能够管理内部绘制的全部对象。
这个canvas对象，并非DOM里的元素，若是须要控制dom，或者对应的context，仍是须要本身获取的。

canvasElement = document.getElementById(canvasEle);
ctx = canvasElement.getContext("2d");

新建canvas对象的时候，能够指定宽高：

canvas = new fabric.Canvas(canvasElement, { 
            selection: false,
            width: 800,
            height:600
});

这里指定的宽高会覆盖css中设置的。注意这种建立对象的形式，Fabric.js里基本上都是相似的，类名表示要建立的对象类型，第一个参数是必要的数据，第二个参数是各类选项。

全部对canvas的修改，包括在其中添加删除对象，以及对象参数的修改，都须要调用渲染方法才能显示出来：

canvas.renderAll();

基本形状

线条-Line, 圆-Circle, 矩形-Rectangel等几何图形，都属于基本形状。

全部基本形状，都有对应的类，这样就能够经过类实例的属性和方法来控制它们的位置、颜色、大小等样式。全部类都继承自Object类，有一些公共的属性和方法。

建立

下面是画线的例子(给出两个顶点坐标)：

var line =  new fabric.Line([x1, y1, x2, y2], {
            strokeWidth: 2, //线宽
            stroke: rgba(255,0,0,0.8), //线的颜色
            selectable: false
        });
        canvas.add(line);

画圆的例子(顶点和半径是在选项里的),这里left和top其实就是(x,y)，应该是借用了css里的命名。

var circle =  new fabric.Circle({
            radius: 2,
            left: left,
            top: top,
            originX: 'center',
            originY: 'center',
            fill: rgba(0,200,0,0.8), 
            strokeWidth: 1,
            stroke: rgba(255,0,0,0.8),
            selectable: false
        };
        canvas.add(circle);

从这里能够看出，和建立canvas相似，第一个参数是这个类专用的（好比画直线的时候传的起止点坐标），第二个参数是通用选项，若是没有专用参数，那么第一个参数就直接是通用选项。全部建立完的形状，只有经过canvas的add方法加入创景，才能显示出来。

控制

left和top是每种Object都有的属性，至于它到底指图形中哪个点的坐标，由originX和originY这组参数决定，它们至关于文本编辑软件里的对齐方式，originX有三种可选值：left,center, right；originY也有三种可选值：top, center, bottom。

它们的示意图以下：

http://fabricjs.com/test/misc...

若是但愿每种对象缺省原点都在中心，能够这样设置：

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'

width和height也是能够直接存取的属性，顾名思义，表示长和宽（全部形状都是有外接矩形的，因此能够用长和宽来控制大小）。

除了上面那几个能够直接存取的属性，大部分属性须要使用get/set方法读写，好比：

line.left = pointer.x;
line.top = pointer.y;
line.set('stroke', startColor);
line.set('height', 20);

网上有些文章会写成line.stroke=color，或者line.setProperty('stroke',color)这样的形式，都是不能生效的，多是早期版本的表达方式。

Image

Image跟其余形状相似，都是Object的子类，最大的区别在于，图像文件的加载是异步的，因此对Image的后续操做，都要在回调中完成。

var bkImage = fabric.Image.fromURL(imgUrl,function(img) {
    canvas.add(img);
}