本篇文章给大家带来的内容是关于fabricjs是什么?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); }
相关推荐:
VML绘图板④简化的服务器端--server.php、server.asp
以上就是fabricjs是什么?fabricjs前端绘图库用法整理(附代码)的详细内容,更多请关注php中文网其它相关文章!
已抢67190个
抢已抢40345个
抢已抢22570个
抢已抢2888个
抢已抢4319个
抢已抢19597个
抢