使用fabric.js从矩形区域获取对象，并将该区域绘制到画布上

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

本文关键字：区域 绘制 取对象 js fabric 使用 获取      更新时间：2023-09-26

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

注意：在我的情况下，直接获取像素数据是不可能的，因为画布被用作视口，对象可能在视口之外（即：平移）。

通过查看函数_collectObjects并使用函数drawObjsTo扩展fabric.js来解决这个问题，该函数从矩形中收集对象并在作为参数传递的画布上下文中渲染它们，这个解决方案有点脏，但它可以解决我在fabric.jss画布上使用简单的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中实现这一点。

相关文章：