1
ユーザーがサイズ変更できるモーダルウィンドウ内にファブリックキャンバスがあります。キャンバスのサイズを変更するには、canvas.setDimensions({width:w, height:h});をwとhとしてください。キャンバスのサイズを変更した後にオブジェクトを選択することはできません
キャンバスのサイズを変更すると、キャンバス内のオブジェクトごとにサイズと位置が比例して変更されます。元のキャンバスと新しいキャンバスのサイズを使って、各オブジェクトのtop/left/width/heightに適用する要素を計算します。サイズ変更が正常に動作します
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.calcOffset();を使ってみましたが、役に立たないです。任意のアイデアをどのようにこれを修正するには？