百念成诗

Fabric.js Object caching(Fabric.js对象缓存)How does it work?(它是如何工作的？)当fabric对象缓存处于活动状态时，在画布上绘制的对象实际上是在另一个较小的屏幕外画布上预先绘制的，与对象像素维度本身一样大。在“render”方法中，通过“drawImage”操作将预绘制的画布复制到主画布上。这意味着在drag-rotate-skew-scale操作期间，对象不会在画布上重新绘制，而只是将其复制的缓存图像绘制在画布上。How can I tweak

Introduction to Fabric.js/ Part 8 - Clipping with clipPathsClipPaths basicsThe new clipPath property(新的clipPath属性)在2.4.0中，我们为所有对象引入了clipPath属性。 ClipPath将替换clipTo:funcion(){}，以实现相同的灵活性，但具有更好的兼容性。ClipPath需要对象缓存。How to use it(如何使用)将您自己的clipPath创建为普通的Fab

Subclassing Text class to make a bitmap text(子类话文本类以生成位图) - unfinished本教程是针对stackoveflow问题而创建的，在该问题中，用户需要在fabricJS中使用位图而不是字体的文本对象。该代码示例包含启动子类所需了解的所有内容。当您无法通过其他api（事件，自定义控件）获得所需的功能时，请考虑子类化是一种最后的资源。demo...

Using transformations, Introduction to Fabric.js Part 6理解transformations如何在fabricJS上工作是尽可能顺利地编写应用程序的一个关键方面。Methods and properties related to transformations(与转换有关的方法和属性)如果您计划了解和使用带有自定义代码的fabricJS转换，那么这些是您应该学会使用最多的方法。 一般而言，在此页面中，我们将矩阵称为6个数字的数组，这些数组表示平面上的

Zoom and pan, introduction to FabricJS part 5在上一个系列中，我们讨论了很多主题。从基本的对象操作到动画，事件，过滤器，组和子类。但是仍然有一些非常有趣和有用的事情要讨论！Zoom and panning(缩放和平移)让我们看看如何通过鼠标交互来实现缩放和平移的基本系统。我们将使用鼠标滚轮在画布上放大20倍（2000％），并使用alt +单击动作进行拖动。我们开始连接基本控件：canvas.on('mouse:wheel', function(opt)

Introduction to Fabric.js. Part 4.在上一个系列中，我们讨论了很多主题。从基本的对象操作到动画，事件，过滤器，组和子类。但是仍然有一些非常有趣和有用的事情要讨论！Free drawing如果说有什么功能能让<canvas>在眼前一亮，那一定是它能够很好的支持自由绘图！由于画布只是一个2D位图， Fabric为我们提供了一张纸：可以自由绘画，而且非常自然。只需将Fabric画布的isDrawingMode属性设置为true即可启用免费绘图模式。这立即使在画布

Introduction to Fabric.js. Part 3我们已经覆盖了大多数的基本知识在第一和第二这一系列的组成部分。让我们继续使用更高级的stuf！Groups(组合)我们首先要谈论的是groups。Groups是Fabric最强大的功能之一。它们的确像是听起来的样子—一种将任何Fabric对象分组为单个实体的简单方法。我们为什么要这样做？当然是要将这些对象作为一个单元来使用！还记得如何用鼠标将画布上任意数量的Fabric对象组合在一起，形成一个选择吗？分组后，所有对象都可以一起移动甚至

Introduction to Fabric.js. Part 2在本系列的第一部分中，我们只是开始熟悉Fabric.js。我们研究了使用Fabric的原因，对象模型和对象层次结构，Fabric中可用的不同种类的实体-简单的形状，图像和复杂的路径。我们还学习了如何对画布上的Fabric对象执行简单的操作。既然大多数基本知识都结束了，那么让我们开始一些有趣的事情吧！Animation没有动画工具的canvas库是不会受人尊重的。而且Fabric也不例外。由于具有如此强大的对象模型和图形功能，因此如果没

Introduction to Fabric.js: Part 1Introduction to Fabric.js. Part 1.(介绍Fabric.js第一部分)今天，我想向您介绍Fabric.js —一个功能强大的Javascript库，使使用HTML5 canvas的工作变得轻而易举。 Fabric提供了画布缺少的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。这是一个完全开放源代码的项目，已获得麻省理工学院（MIT）的许可，多年来有许多贡献。在发现使用原生canvas AP

FabricJS gotchas这个页面包含了第一次接触fabricJS的人打开的最常见问题的列表。这些缺陷的产生，既有解释不清的原因，也有文档不完善的原因。在这里，我们试图解决共同的问题。Objects are no more selectable - setCoords(对象不再是可选择的-setCoords)Fabric包含两组坐标以快速知道物体在画布上的位置。它们链接到两个对象属性：oCoords和aCoords。当用户与对象交互或结束变换（例如拖动）时，fabricJS会自动更新这些坐标。

Fabric.js中文文档导航说明：1、本系列如果有两个超链接，则第一个是官方文档链接，第二个是中文文档链接，用/分隔，若不存在第二个链接或第二个链接无法跳转则代表没有或还未完成。2、本系列大部分代码demo都是参考官方文档自己实践而成，有些地方与官方文档不一样会有说明，也有少部分没有亲自实现直接使用了官网文档的代码。3、本系列代码使用vue语法，每篇文章的第一个代码片段会有标签和样式部分，其他代码无特殊情况只放部分mounted(){}中的代码或与上文没有重复的核心代码。Vue中使用fabric