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

paney129 发布于2019-08-26 12:14 / 823人阅读

摘要：使用一段时间了，总得来说，是一款非常强大的矢量图工具，官方文档也算丰富，但文档组织形式不太好，而且少部分设计不太一致，还是需要整理一下。是最基础的对象，针对标签做的封装，可以管理内部绘制的所有对象。

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

Canvas

canvas是最基础的对象，针对

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);
}

GPU云服务器云服务器使用matplotlib绘图使用方法总结 fabricjs 前端库cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108281.html

fabricjs上手指南

摘要：可以对每一个对象使用动画，克隆，修改属性，事件监听，碰撞检测等。修改属性需及时渲染才能展示出效果。每次更改了对象的位置，大小时比如，，若要感知该对象的具体位置用于对象间碰撞边缘检测，或事件响应，需要使用方法重设对象的四个角坐标。 fabricjs是一个canvas的库，原本canvas的操作主要基于上下文，需要使用者自己从0开始去实现一些基本功能。而canvas库文件封装好了许多便利的...

张迁 2019-08-22 16:39 评论0 收藏0
Canvas实用库Fabric.js使用手册

摘要：为提供所缺少的对象模型交互和一整套其他不可或缺的工具。为什么要使用提供一个好的画布能力但是不够友好。就是为此而开发，它主要就是用对象的方式去编写代码。代表线，的意思是使用钢笔画一条线，从坐标画到坐标。代表让图形闭合路径。简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg pars...

XGBCCC 2019-08-23 14:28 评论0 收藏0
turnjs fabricjs canvas 翻书

摘要：最近做了一个翻书效果的项目来总结一下实现过程和遇到的一些问题供自己以后快速解决问题希望也能帮到同样遇到此类问题的同学如果有更好的方法希望你能分享给我地址插件问题都是些自己觉的比较难解决的比较片面如有其他疑问可以留言交流或者当你从官网下载最近做了一个翻书效果的项目, 来总结一下实现过程和遇到的一些问题, 供自己以后快速解决问题, 希望也能帮到同样遇到此类问题的同学, 如果有更好的方法,...

mylxsw 2019-08-20 13:49 评论0 收藏0