Fabric.js Polyline fillRule 属性

在 Fabric.js 中，Polyline 是绘制多条线段的对象。在绘制多条线段时，可能会存在遮盖情况，此时填充规则就非常重要了。本文将介绍 Fabric.js 中 Polyline 对象的 fillRule 属性及其作用。

fillRule 属性

在 Fabric.js 中，Polyline 对象的 fillRule 属性用于设置填充规则。该属性有两个可选值：

• nonzero：非零环绕数规则
• evenodd：奇偶规则

默认值为 nonzero。

非零环绕数规则

非零环绕数规则是计算从任意一点射线穿过路径时，这条射线能到达图形内部的次数与穿过路径时离开图形内部的次数之差不为零时，就会对路径产生填充。

具体来说就是，从一个点开始，向一方向（可以是任意方向）画一条射线，计算该射线与路径相交的次数，分别记为 N1 和 N2。如果 N1 - N2 的值不为零则认为该点在路径内部。反之，如果 N1 - N2 的值为零，则认为该点在路径外部。

奇偶规则

奇偶规则是指从任意一点射线穿过路径时，从该点射出一条射线，计算该射线与路径相交的次数，如果交点的个数是奇数个，则该点在路径内部，反之则在路径外部。奇偶规则比非零环绕数规则简单，但对于复杂路径的情况可能会失效。

使用方法

使用 fillRule 属性可以很方便地对 Polyline 对象进行填充。直接在创建 Polyline 对象时设置 fillRule 属性即可：

var polyline = new fabric.Polyline(points, {
  fill: 'red',
  fillRule: 'evenodd'
});

可以看到，这里将 fillRule 属性设置为 evenodd，表示使用奇偶规则进行填充。

总结

Polyline 对象的 fillRule 属性是决定填充规则的重要属性。不同的填充规则适用于不同的场景，需要根据具体情况进行选择。在使用 Polyline 对象进行图形绘制时，需要注意填充规则的设置，以确保获得正确的填充效果。