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

2023年3月19日 286次阅读 来源: songofhawk

运用一段时间了，总得来说，是一款异常壮大的矢量图东西，官方文档也算雄厚，但文档组织情势不太好，而且少部分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。

它们的示意图以下：
《FabricJS 前端绘图库运用总结(一)》
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);
}
    原文作者：songofhawk
    原文地址: https://segmentfault.com/a/1190000016043450
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞