Html5画布操作类库Fabric.js

最新推荐文章于 2024-09-02 22:26:11 发布

会飞的斑马

最新推荐文章于 2024-09-02 22:26:11 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/weixin_39161122/article/details/81703370

版权

（Fabric.js是一个开源的Html5画布操作类库，功能强大，可惜中文资料很少，目前公司项目正好要用，就趁这个机会翻译一下，虽然英语水平不高，但基本还是能看懂的；Fabric作者貌似俄国人，写的文档里也有一些英文拼写错误。不过头条不允许放外链地址，想去看原文的，百度搜一下Fabric.js就能找到）

Introduction to Fabric.js. Part 1.

开源Html5画布操作类库Fabric.js基础入门——第一部分（上）
今天，我给大家介绍一下Fabric.js，一个超级强大的Javascript类库，通过它可以非常轻松的使用HTML5的画布（canvas）。Fabric提供了画布缺少的对象模型、SVG解析器、交互层和一整套其他必不可少的工具。它是一个在MIT协议下的开放源码项目，多年来提供了很多贡献(Github超过10000+Star,译者注)。

在经历了使用原生画布API的各种痛苦后，我大概3年前开始开发Fabric项目。那时我在为printio.ru（我的创业网站）创建一个交互式的设计器–允许用户在线设计他们自己的衣服。我们需要的这种交互那时候只存在于Flash中。现在，使用Fabric更接近实现这种可能了。

让我们仔细看一看！

为什么是fabric?

现在画布允许我们在网页上创建神奇的图形，但是它提供的是令人失望的底层API。如果我们只想在画布上画几个基本的形状，忘记它们吧；但是如果需要任何形式的交互、图片任意点的变化或者绘制更复杂的形状–情况就戏剧性的变化了。

Fabric目标就是解决这些问题。

原生画布方法只允许我们使用简单的绘图命令，盲目的修改整个画布的位图。想画个矩形？使用fillRect(left, top, width, height)。想画条线？组合使用 moveTo(left, top) 和lineTo(x, y)。就像我们拿了把刷子在画布上刷一样，刷了一层又一层颜料，基本没做什么控制。

Fabric在原生方法上，提供了一个简单但是强大的对象模型，用来替代这种底层操作。它处理画布状态和渲染，让我们直接和对象打交道。

让我们通过一个简单的实例来演示这种差别。假如我们需要在画布上画一个红色的矩形，这是我们使用原生画布API需要做的：

// reference canvas element (with id=”c”)

var canvasEl = document.getElementById(‘c’);

// get 2d context to draw on (the “bitmap” mentioned earlier)

var ctx = canvasEl.getContext(‘2d’);

// set fill color of context

ctx.fillStyle = ‘red’;

// create rectangle at a 100,100 point, with 20x20 dimensions

ctx.fillRect(100, 100, 20, 20);

现在，看看干同样的活，用Fabric怎么做：

// create a wrapper around native canvas element (with id=”c”)

var canvas = new fabric.Canvas(‘c’);

// create a rectangle object

var rect = new fabric.Rect({

left: 100,

top: 100,

fill: ‘red’,

width: 20,

height: 20

});

// “add” rectangle onto canvas

canvas.add(rect);

开源Html5画布操作类库Fabric.js基础入门——第一部分（上）
在这一点上，它们在代码量上没什么区别–这两个例子很类似。然而，你已经发现它们在操作画布方面的区别。对于原生方法，我们操作的是上下文–一个代表整个画布位图的对象；对于Fabric，我们在对象上操作–实例化它们，改变属性，把它们加入画布。你可以看到，在Fabric世界，这些对象是一等公民。

当然，渲染简单的红色矩形太无聊了，我们可以用它干点有趣的事情！或许让它旋转一下？

让我们旋转45度。首先，使用原生画布方法：

var canvasEl = document.getElementById(‘c’);

var ctx = canvasEl.getContext(‘2d’);

ctx.fillStyle = ‘red’;

ctx.translate(100, 100);

ctx.rotate(Math.PI / 180 * 45);

ctx.fillRect(-10, -10, 20, 20);

然后，使用Fabric：

var canvas = new fabric.Canvas(‘c’);

// create a rectangle with angle=45

var rect = new fabric.Rect({

left: 100,

top: 100,

fill: ‘red’,

width: 20,

height: 20,

angle: 45

});

canvas.add(rect);

开源Html5画布操作类库Fabric.js基础入门——第一部分（上）
发生了什么？

使用Fabric，我们要做的就是改变对象的角度值为45。使用原生方法，事情变得太“有料”了，记住，我们不能操作对象，而是扭转整个画布位图的方位和角度 (ctx.translate, ctx.rotate) 来满足要求；然后我们再画矩形，但是记住适当偏移位图(-10, -10)，因此它可以在点（100，100）渲染。作为额外的工作，在旋转画布位图时，我们还必须把度转换为弧度（这一段翻译的很别扭，原文写的也不好理解，其实就是说把坐标原点移到100，100，并且转换一下角度，后续操作都是以转换后的远点为参照点，适当偏移是为了让矩形的中心点正好在100，100位置）。

我敢肯定，你应该明白Fabric存在的原因以及它隐藏了多少底层代码。

让我们看看另一个例子–画布状态跟踪。

假如在某个时刻，我们需要在画布上稍稍移动我们熟知的那个红色矩形的位置，如果不在对象上操作，我们应该怎么办？还是说只需要在画布位图上调用另一个fillRect就可以了？

调用另一个fillRect命令，实际上会在已经绘制了别的东西的画布上面画矩形。还记得我早前提到过，用刷子在画布上刷？为了“移动”它，我们首先需要擦除早前画的内容，然后在新的位置画矩形。

var canvasEl = document.getElementById(‘c’);

…

ctx.strokRect(100, 100, 20, 20);

…

// erase entire canvas area

ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);

ctx.fillRect(20, 50, 20, 20);

如果使用Fabric如何完成它呢？