上一期我们将了fabric.js是如何渲染的,这一期我们讲讲在fabric.js渲染时进行自定义的修改
fabric.js渲染修改
首先回到上一期的路径
我们可以知道,这里有三个关键方法renderAll
、drawObject
、_render
都是和渲染相关,所以我们想自定义渲染时,也要通过这里入手。
实战
目标
这里我们以一个遮罩效果举例
How
step1
目标有了,下一步我们应该如何实现呢?
首先我们想想如何在canvas中实现这个效果。如果熟悉canvas的同学,应该会知道这个属性:GlobalCompositeOperation
step2
GlobalCompositeOperation属性如下:
很明显可以看出,Destination-in
应该是我们要寻找的点
step3
使用globalCompositeOperation
属性,编写剩下的代码,完成遮罩的逻辑
step4
加入到object.class.js
渲染函数中
step5
至此,完成,效果如下:
好了,这一期就到这里,咱们下一期再见