Fabric.js 简介。第2部分。

在本系列的第一部分，我们才刚刚开始熟悉 Fabric.js。我们研究了使用 Fabric 的原因，它的对象模型和对象层次结构，以及 Fabric 中可用的不同类型的实体——简单的形状、图像和复杂的路径。我们还学习了如何在画布上使用 Fabric 对象执行简单的操作。

既然大部分基础知识都已经过去了，让我们开始做一些有趣的事情吧！

动画

没有一个受人尊敬的画布库没有动画设施。Fabric 也不例外。由于有如此强大的对象模型和图形功能，如果没有内置动画助手将是一种耻辱。

还记得改变任何对象的属性是多么容易吗？我们只是调用了set方法，传递了相应的值：

rect.set('angle', 45);

好吧，动画对象同样容易。每个 Fabric 对象都有animate方法……为该对象设置动画。

rect.animate('angle', 45, {
  onChange: canvas.renderAll.bind(canvas)
});

第一个参数是动画的属性。第二个参数是动画的结束值。如果矩形有 -15° 角，并且我们传递 45，它将从 -15° 动画到 45°。第三个参数是一个可选对象，指定动画的更精细细节——持续时间、回调、缓动等。

一个方便的特性animate是它还支持相对值。例如，如果你想将对象的 left 属性设置为 100px，你可以这样做：

rect.animate('left', '+=100', { onChange: canvas.renderAll.bind(canvas) });

类似地，将物体逆时针旋转 5 度，可以这样完成：

rect.animate('angle', '-=5', { onChange: canvas.renderAll.bind(canvas) });

你可能想知道为什么我们总是在那里指定“onChange”回调。第三个参数不是可选的吗？是的，但是调用canvas.renderAll每个动画帧是让我们看到实际动画的原因！你看，当我们调用animate方法时，它只会随着时间的推移动画属性值，遵循特定的算法（即缓动）。所以rect.animate('angle', 45)会改变对象的角度，但不会在每次改变角度后重新渲染画布屏幕。我们显然需要重新渲染才能看到实际的动画。

请记住，在该画布表面下方有整个对象模型。对象有自己的属性和关系，canvas只负责将它们的存在投射到外界。

animate每次更改后不会自动重新渲染画布的原因是由于性能。毕竟，我们在画布上可以有成百上千的动画对象，如果每个人都尝试重新渲染屏幕，那就不好了。在许多对象的情况下，您可以使用类似requestAnimationFrame（或其他基于计时器的）循环来自行连续渲染画布，而无需调用renderAll每个对象。但大多数时候，您可能需要明确指定canvas.renderAll为“onChange”回调。

那么我们可以传递哪些其他选项来制作动画呢？

• from：允许指定动画属性的起始值（如果我们不希望使用当前值）。

• 持续时间：默认为 500（毫秒）。可用于更改动画的持续时间。

• onComplete：在动画结束时调用的回调。

• easing：缓动函数。

所有这些选项都应该是不言自明的，除了可能放宽一个。让我们仔细看看。

默认情况下，animate动画使用“easeInSine”函数。如果这不是您所需要的，那么在fabric.util.ease. 例如，如果我们想以有弹性的方式将对象向右移动：

rect.animate('left', 500, { 
  onChange: canvas.renderAll.bind(canvas), 
  duration: 1000, 
  easing: fabric.util.ease.easeOutBounce });

注意fabric.util.ease.easeOutBounce作为缓动选项。其他值得注意的包括easeInCubic、easeOutCubic、easeInElastic、easeOutElastic、easeInBounce和easeOutExpo。

所以这几乎涵盖了Fabric的动画部分。只是为了给您一些可能的想法-您可以为对象的角度设置动画以使其旋转；为左/上属性设置动画以使其移动；为宽度/高度设置动画以使其缩小/增长；动画不透明度以使其淡入/淡出；等等。

fabric.runningAnimations

如果您需要访问当前由 fabric 运行的动画，请使用fabric.runningAnimations. 它是一个对象数组，每个对象都是一个动画上下文对象。

方便的方法：

• fabric.runningAnimations.findAnimation(signature)- 返回动画上下文匹配signature，它是返回的中止函数fabric.util.animate。

• fabric.runningAnimations.findAnimationIndex(signature)- 与 相同findAnimation，返回索引。

• fabric.runningAnimations.findAnimationsByTarget(target)- 返回所有target属性等于 target 的动画。

• fabric.runningAnimations.cancelAll()- 取消所有正在运行的动画。

• fabric.runningAnimations.cancelByTarget(target)- 取消target属性等于目标的动画。

• object.dispose()- 对象 ( ) 创建的所有动画object.animate(...)都被取消。如果您想使用 fabric.util.animate而不是添加动画，object.animate(...)可以通过传递 target属性将它们附加到对象。这样，一旦对象被释放，动画就会取消。

  let cancel = fabric.util.animate({...});
  let i = fabric.runningAnimations.findAnimationIndex(cancel);
  let context = fabric.runningAnimations.findAnimation(cancel);
  let cancelled = fabric.runningAnimations.cancelAll();
  
  //  the following statements are true
  cancelled[i] === context;
  cancelled[i].cancel === cancel;
  fabric.runningAnimations.length === 0;

图像过滤器

在本系列的第一部分，我们学习了如何在 Fabric 中处理图像。有fabric.Image构造函数，它接受图像元素。还有fabric.Image.fromURL一种方法，可以创建 URL 字符串的图像实例。并且任何这些图像都可以像任何其他对象一样在画布上抛出和渲染。

但是，尽管处理图像很有趣，但对它们应用图像过滤器会更酷！

默认情况下，Fabric 提供了很少的过滤器，无论是针对启用 WEBGL 的浏览器还是不支持的浏览器。它还可以轻松定义自己的。一些您可能非常熟悉的内置过滤器 - 过滤器以去除白色背景、灰度过滤器、反转或亮度过滤器。其他的可能不太受欢迎——彩色矩阵、棕褐色或噪声。

那么我们如何对 Fabric 中的图像应用过滤器呢？好吧，每个实例fabric.Image都有“过滤器”属性，这是一个简单的过滤器数组。该数组中的每个过滤器都是 Fabric 过滤器之一的实例。或者您自己的自定义过滤器的一个实例。

所以让我们创建一个灰度图像。

fabric.Image.fromURL('pug.jpg', function(img) { 
  // 添加滤镜
  img.filters.push(new fabric.Image.filters.Grayscale()); 
  // 应用滤镜并在完成后重新渲染画布
  img.applyFilters(); 
  // 将图像添加到画布上（它也会重新渲染画布）
  canvas.add(img); });

棕褐色版本的图像怎么样？

fabric.Image.fromURL('pug.jpg', function(img) { 
  img.filters.push(new fabric.Image.filters.Sepia()); 
  img.applyFilters(); 
  // 将图像添加到画布上（它也重新渲染画布) 
  canvas.add(img); });

由于“filters”属性是一个简单的数组，我们可以用它以通常的方式执行任何所需的操作——删除过滤器（通过pop、、splice或shift），添加过滤器（通过、、、push）splice，unshift甚至组合多个过滤器。当我们调用applyFilters. 因此，让我们尝试创建一个棕褐色和明亮的图像。

fabric.Image.fromURL('pug.jpg', function(img) { 
  img.filters.push( 
    new fabric.Image.filters.Sepia(), 
    new fabric.Image.filters.Brightness({亮度: 100 })) ; 
  img.applyFilters(); 
  canvas.add(img); });

请注意，我们还将