Fabric.js 多边形填充属性

Fabric.js 是一个强大的 JavaScript 前端绘图库，它提供了丰富的绘图元素和操作方法，支持多种交互方式，以及高度的可定制性和扩展性。

多边形是 Fabric.js 中常用的绘图元素之一，填充是指将多边形内部的区域填充成指定的颜色、纹理或渐变等效果。本篇介绍 Fabric.js 多边形填充属性的用法和示例。

多边形构造函数

首先使用多边形构造函数生成一个多边形的实例，代码如下：

var polygon = new fabric.Polygon(points, options);

其中，points 参数表示多边形的顶点坐标数组，如果是闭合多边形，则最后一个点和第一个点是相连的。options 参数表示多边形的属性，可以是以下选项：

• fill: 填充颜色或纹理。
• fillRule: 填充规则，可选值为 'nonzero' 或 'evenodd'，默认值为 'nonzero'。
• stroke: 边框颜色或纹理。
• strokeWidth: 边框宽度。
• strokeLineJoin: 边框线段连接方式，可选值为 'miter'、'round' 或 'bevel'，默认值为 'miter'。
• strokeLineCap: 边框线段端点形状，可选值为 'butt'、'round' 或 'square'，默认值为 'butt'。
• strokeDashArray: 虚线边框的虚线样式，例如 [5, 10] 表示 5 个像素的实线和 10 个像素的空白区域交替出现。
• shadow: 阴影效果，可以是颜色、纹理或阴影对象。阴影对象包含以下属性：color、blur、offsetX、offsetY 和 opacity。
• visible: 是否可见，true 表示可见，false 表示不可见。
• selectable: 是否可选择，true 表示可选，false 表示不可选。
• hoverCursor: 鼠标悬停时的光标样式。
• name: 名称。

填充属性

多边形的填充属性由 fill 和 fillRule 两个选项组成，下面分别介绍。

fill

fill 选项表示填充颜色或纹理，可以是以下类型之一：

• 颜色字符串，例如 fill: 'red' 或 fill: '#f00'。
• Image 对象，例如 fill: new fabric.Image(image)。
• Pattern 对象，例如 fill: new fabric.Pattern({source: image, repeat: 'repeat'})。

颜色字符串支持 CSS 的十六进制、RGB、RGBA、HSL、HSLA 和命名颜色等格式，详情请参考 CSS Color。

Image 对象可以是 HTMLImageElement、HTMLCanvasElement 或 ImageData 等类型，例如：

var image = new Image();
image.src = 'path/to/image.png';
var polygon = new fabric.Polygon(points, {fill: new fabric.Image(image)});

Pattern 对象表示一种图案填充效果，可以是以下选项：

• source: 图案来源，可以是 Image 对象、Canvas 对象、SVG 图形元素、URL 字符串或函数。如果是函数，则函数返回值必须是 Image、Canvas 或 SVG 图形元素。
• repeat: 图案重复方式，可选值为 'repeat'、'repeat-x'、'repeat-y' 或 'no-repeat'。

例如：

var pattern = new fabric.Pattern({
  source: 'path/to/image.png',
  repeat: 'repeat'
});
var polygon = new fabric.Polygon(points, {fill: pattern});

fillRule

fillRule 选项表示多边形的填充规则，可选值为 'nonzero' 或 'evenodd'，默认值为 'nonzero'。

• 'nonzero' 表示非零环绕数规则，即从任意一点出发，向任意方向绘制射线，与多边形轮廓相交的路径段就称为该点下的射线路径（有可能是往回走），所有与多边形交点相交的路径段，都有自己的绕数（1 或 -1）。在沿任意一点的任意方向转一圈的过程中，各路径段所对应的绕数之和就是该点的总绕数。如果某点的总绕数非零，说明该点在多边形内部，否则在多边形外部。
• 'evenodd' 表示奇偶规则，即从任意一点出发，向任意方向绘制射线，与多边形轮廓交叉的路径段就称为该点下的射线路径，从该点出发，如果该路径与多边形的其他路径交叉了偶数次（0 次也算偶数次），则该点在多边形外部，否则在多边形内部。

默认情况下，大多数绘图应用使用 'nonzero' 规则填充多边形。但是，在一些应用中（如地理信息系统），使用 'evenodd' 规则可以避免填充过多的区域。

例如：

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

示例

下面是一个 Fabric.js 多边形填充属性的完整示例，代码详见以下：

var canvas = new fabric.Canvas('canvas');

var points = [
  {x: 100, y: 100},
  {x: 200, y: 100},
  {x: 200, y: 200},
  {x: 100, y: 200}
];
var polygon = new fabric.Polygon(points, {
  fill: new fabric.Pattern({
    source: 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png',
    repeat: 'repeat',
  }),
  stroke: 'blue',
  strokeWidth: 3,
  strokeLineJoin: 'round',
  visible: true,
  selectable: true,
  hoverCursor: 'pointer',
});

canvas.add(polygon).renderAll();

效果如下：