Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/478.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/74.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用fabric.js从矩形区域获取对象并将该区域绘制到画布_Javascript_Html_Canvas_Fabricjs - Fatal编程技术网

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

Javascript 使用fabric.js从矩形区域获取对象并将该区域绘制到画布,javascript,html,canvas,fabricjs,Javascript,Html,Canvas,Fabricjs,如何从特定的矩形区域获取fabric.js对象(与选择框的行为相同,但手动),然后将对象的“选定”像素区域绘制到标准画布上 注意:在我的例子中,直接获取像素数据是不可能的,因为画布用作视口,对象可以离开视口(即:平移).通过查看函数\u collectObjects解决了这个问题,并使用函数drawObjsTo扩展fabric.js,该函数从矩形中收集对象,并在作为参数传递的画布上下文中呈现它们,该解决方案有点脏,但它可以解决我在fabric.js画布上使用简单的getImageData时遇到的

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


注意:在我的例子中,直接获取像素数据是不可能的,因为画布用作视口,对象可以离开视口(即:平移).

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