FabricJS – 查找转换为 HTMLCanvasElement 的 Polygon 对象的绘图上下文？

什么是FabricJS

FabricJS是一个用于处理HTML5 Canvas的JavaScript库，它允许开发者通过一组简单的API来控制Canvas元素。它提供了许多现成的图形对象和交互式控件，如矩形、圆形、文本和图像等，可以轻松地实现基本的绘图功能。同时，FabricJS也支持自定义对象和事件处理等高级功能，可以满足复杂的应用需求。

FabricJS的Polygon对象

FabricJS的Polygon对象是一种多边形形状的图形对象，通过给定一组点坐标，可以绘制出任意形状的多边形。Polygon对象继承自Path对象，因此可以使用一系列路径操作（如moveTo、lineTo和curveTo等）来构建多边形形状。

Polygon对象的定义

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

其中，points为点坐标数组（格式为[x1, y1, x2, y2, ...]），options为可选参数，用于配置多边形对象的外观属性，如填充颜色、边框宽度和边框颜色等。

转换为HTMLCanvasElement

在FabricJS中，可以使用toCanvasElement方法将多边形对象转换为HTMLCanvasElement对象，进而进行其他操作，如保存为图片或插入到文档中。具体实现方法如下：

var canvasWrapper = document.createElement('div');
canvasWrapper.appendChild(polygon.toCanvasElement({backgroundColor: '#ffffff'}));
var canvas = canvasWrapper.childNodes[0];

其中，canvasWrapper是一个临时的DOM元素，用于容纳转换后的Canvas对象，backgroundColor参数指定了Canvas的背景色。

获取绘图上下文

获得Canvas对象后，可以用getContext方法获取其绘图上下文并进行绘制操作。getContext有一个参数，该参数用于指定上下文类型，通常为"2d"，表示2D绘图上下文。获取绘图上下文的方法如下：

var context = canvas.getContext('2d');

获取到绘图上下文后，就可以使用Canvas API中提供的一系列方法，如fillRect、strokeRect和drawImage等，进行自定义绘制。

查找Polygn对象的绘图上下文

在实际应用中，有时候需要在程序中查找特定的对象，并获取其关联的绘图上下文。下面是一个查找Polygon对象绘图上下文的示例：

function findPolygonContext(canvas, polygon) {
    var context = null;
    var objects = canvas.getObjects();
    objects.forEach(function(object) {
        if (object.type === 'polygon' && object === polygon) {
            context = canvas.getContext('2d');
        }
    });
    return context;
}

该函数接受两个参数，分别是Canvas对象和Polygon对象。函数首先使用getObjects方法获取Canvas上所有的对象，然后遍历对象数组，查找与给定的Polygon对象匹配的对象。如果找到了匹配的对象，就可以通过Canvas对象的getContext方法获取其绘图上下文并返回。

调用示例

var polygon = new fabric.Polygon([
    {x: 0, y: 0},
    {x: 100, y: 0},
    {x: 100, y: 100},
    {x: 0, y: 100}
]);
var canvas = new fabric.Canvas('canvas');
canvas.add(polygon);
var context = findPolygonContext(canvas, polygon);
if (context) {
    context.fillRect(10, 10, 80, 80);
}

在上述示例中，首先创建一个四边形的Polygon对象，然后将其添加到Canvas对象中。接着调用findPolygonContext函数查找该Polygon对象的绘图上下文，并使用fillRect方法在Canvas上绘制了一个矩形。

总结

FabricJS是一款功能强大的Canvas库，可以帮助开发者快速实现各种绘图需求。Polygon对象是其中一种常用的图形对象，可以绘制任意形状的多边形。在使用FabricJS绘图时，需要获取对Canvas的绘图上下文，以进行自定义绘制。可以使用findPolygonContext等函数查找指定对象的绘图上下文，以方便操作。