canvas 调整大小后无法选择对象

Question

我在模态 window 中有一个 Fabric canvas，用户可以调整其大小。要调整 canvas 的大小，我使用 canvas.setDimensions({width:w, height:h}); 从模态大小中获取 w 和 h。

当 canvas 调整大小时，对于 canvas 中的每个对象，我按比例更改它们的大小和位置。我使用原始和新的 canvas 大小计算了一个应用于每个对象 top/left/width/height 的系数。每次调整 canvas 大小时运行此代码：

        canvas.getObjects().map(function(o) {

            // calculate factors
            var factorW = (newCanvasDim.width/o.data.canvasW);
            var factorH = (newCanvasDim.height/o.data.canvasH)

            // calculate new position
            var left = o.data.origL * factorW;
            var top = o.data.origT * factorH;
            o.setLeft(left);
            o.setTop(top);

            // calculate new size
            var width = o.data.origW * factorW;
            var height = o.data.origH * factorH;
            o.setWidth(width);
            o.setHeight(height);

            canvas.renderAll();
            canvas.calcOffset();

        });

调整大小效果很好，所有对象都改变了它们的尺寸correctly.The问题是 在 canvas 调整大小后无法选择大多数对象。此外，单击 canvas 的空白区域有时会选择对象。

我在更改每个对象属性（参见上面的代码）后尝试使用 canvas.calcOffset();，但没有帮助。有什么解决办法吗？

Answer 1

在调整每个对象的大小后，尝试在每个对象（而不是 canvas）上使用 setCoords() 而不是 calcOffset() - 在调整后的 canvas :-) .

https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords.

canvas 调整大小后无法选择对象

Objects cannot be selected after canvas is resized

fabricjs