使用 fabric.js 从矩形区域获取对象并将该区域绘制为 canvas

Question

如何从特定矩形区域获取 fabric.js 对象（与选择框行为相同，但手动操作）然后将对象的 "selected" 像素区域绘制到标准 canvas?

注意：在我的例子中，直接获取像素数据是不可能的，因为 canvas 被用作视口并且对象可以在视口之外（即：平移）。

Answer 1

通过查看函数 _collectObjects 并使用函数 drawObjsTo 扩展 fabric.js 来解决它，该函数从矩形并将它们渲染在作为参数传递的 canvas 上下文中，解决方案有点脏，但它可以解决我在 fabric.js canvas 上使用简单的 getImageData 时遇到的另一个问题，结果数据包含了选择框，因此该函数也可以用来只获取物体的像素数据。

fabric.Canvas.prototype.drawObjsTo = function (ctx, x1, y1, x2, y2) {
    var currentObject,
        selectionX1Y1 = new fabric.Point(Math.min(x1, x2), Math.min(y1, y2)),
        selectionX2Y2 = new fabric.Point(Math.max(x1, x2), Math.max(y1, y2));

    for (var i = this._objects.length; i--; ) {
        currentObject = this._objects[i];

        if (!currentObject || !currentObject.visible) {
            continue;
        }

        if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
            currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2) ||
            currentObject.containsPoint(selectionX1Y1) ||
            currentObject.containsPoint(selectionX2Y2)
        ) {
            currentObject.render(ctx);
        }
    }
};

也许 fabric.js 中应该有一种方法可以做到这一点。

使用 fabric.js 从矩形区域获取对象并将该区域绘制为 canvas

Getting objects from a rectangular area with fabric.js and draw the area to a canvas

html

javascript

canvas

fabricjs