Fabric.js知多少(三)

763

上一期我们将了fabric.js是如何渲染的,这一期我们讲讲在fabric.js渲染时进行自定义的修改

fabric.js渲染修改

首先回到上一期的路径 我们可以知道,这里有三个关键方法renderAlldrawObject_render都是和渲染相关,所以我们想自定义渲染时,也要通过这里入手。

实战

目标

这里我们以一个遮罩效果举例

How

step1

目标有了,下一步我们应该如何实现呢? 首先我们想想如何在canvas中实现这个效果。如果熟悉canvas的同学,应该会知道这个属性:GlobalCompositeOperation

step2

GlobalCompositeOperation属性如下: 很明显可以看出,Destination-in应该是我们要寻找的点

step3

使用globalCompositeOperation属性,编写剩下的代码,完成遮罩的逻辑

step4

加入到object.class.js渲染函数中

step5

至此,完成,效果如下:

好了,这一期就到这里,咱们下一期再见