Fabricjsで描画矩形の座標をパーセンテージで保存する方法

Question

私のプロジェクトでは、特定の建物の床に動的にゾーンの作成と削除を行っています。それを行うにはRaphealjsを使用し、ラシェルを使用して私は床上にゾーンを作成することができます。私はデータベースに高さ、幅、startxとstaryを格納しています。

しかし、問題は、座標をピクセル単位で格納することです。私の画面を小さくすると、ゾーンは私のフロアから出て行きます。これのための解決策座標をパーセンテージで保存する必要があります。

これを行う方法はありますか？出てきてください。

以下は鮮明な画像を表示している私の画像です。

すると小画面：

Answer 1

あなたがあなたの画面が小さくなっている時はいつでもあなたの生地のオブジェクトをダウン/スケールアップしてみました..私に事前に感謝し解決策を教えてください？私の推薦は論理的な点を保存することです。たとえば、キャンバスのサイズは500x600ピクセル、位置はx = 100、y = 100、width = 50、height = 50の四角形です。論理座標は実際の座標をピクセル単位でキャンバスの寸法で割ったものになります。つまり、あなたのアプリケーションを以前のセッションとは異なるキャンバスサイズで読み込んだとしても、この場合は動的な座標になります。常に、キャンバスのサイズを変更するたびに、物理的な点を再計算して、すべてのキャンバスを再度レンダリングする必要があります。あなたは論理座標があなたのfabricjsに反対割り当てることができるオブジェクト：

var rect1 = new fabric.Rect({ 
    left: 100, 
    top: 100, 
    fill: 'green', 
    width: 50, 
    height: 50, 
    id : someid, 
    logicalCoords: {x: 0.2, 
        y: 0.16666666666666, 
        width: 0.1, 
        height: 0.833333} 
    }); 

再計算物理ポイントが簡単になり、あなたのすべきすべてのfabricjsオブジェクトをループと論理ポイントキャンバスの大きさを掛け：

canvas.forEachObject(function(o){ 
    o.x = logicalCoords.x * canvas.width; 
    o.x = logicalCoords.y * canvas.height; 
    o.x = logicalCoords.width * canvas.width; 
    o.x = logicalCoords.height * canvas.height; 
}); 
canvas.renderAll(); 

WARNING：それはあなたの問題を解決する方法だけのアイデアです。

更新1： Fabricjsには、図形を描画するためのピクセルデータが必要です。

var rect1 = new fabric.Rect({ 
     left: toPixels(percentValueLeftFromDB), 
     top: toPixels(percentValueTopFromDB), 
     fill: 'green', 
     width: toPixels(percentValueWidthFromDB), 
     height: toPixels(percentValueHeightFromDB), 
     }); 
function toPixels(value){ 
//do conversion here.. 
//you should take care of left and top coordinates 
pixelValue = canvas.width * value/100; //calculates only width and top 
return pixelValue; 

割合のような自動化はありません。自分でコンバージョンを行う必要があります。物理的なポイントへのLogical Points、物理的なポイントへのパーセントポイントの2つのバリエーションを示しました。フィジカルポイントをFabricjに渡す必要があるときはいつも。私の意見では、論理ポイントはパーセンテージより正確です。

UPDATE 2：それはすべての時間ビューアのサイズが必要になりますので、

なぜ論理的なポイントは、応答します。たとえば、物理的な画面サイズ（インチ単位）ごとにコメントで述べたように、画面の解像度は異なります。理想的には、解像度ごとに動的なキャンバスサイズを設定することができます。これは、その場で計算することも、CSSでパーセントとして設定することもできます。キャンバスの幅= 75％と高さ= 60％を設定したとしましょう。このキャンバスを別の画面やデバイスに開くと、キャンバスの物理的な幅と高さがピクセル単位で異なります。この場合、論理ポイントはキャンバスディメンションを使用してphysicalPointに変換する必要があるため、各デバイスの同じ場所に配置されます。 キャンバスのサイズが1000x500pxで、長方形が論理座標（0.5,0.5）、幅= 0.5、高さ= 0.5であるとします。物理的な結果は、幅= 500、高さ= 250の位置（500,250）で矩形になります。同じ論理座標を小さなキャンバスに表示しようとすると、矩形の同じ位置になります。

2つのキャンバスについて論理的に調整されていることを示すfiddleを確認してください。

注意：このロジックを使用すると、同じアスペクト比であなたキャンバスサイズを維持する場合にのみ動作します。キャンバスの幅を50％に変更する場合は、高さを50％に変更する必要があります。

また、フィドルコードはここにある：

HTML：

<canvas id="canvas1" width="200" height="150" style="border:1px solid #ccc"></canvas> 
<canvas id="canvas2" width="400" height="350" style="border:1px solid #ccc"></canvas> 

はJavaScript：

(function() { 
    var canvas1 = this.__canvas = new fabric.Canvas('canvas1'); 
    var canvas2 = this.__canvas = new fabric.Canvas('canvas2'); 

    var rect = new fabric.Rect({ 
     left: logicalToPhysical(0.5, canvas1.width), 
     top: logicalToPhysical(0.5, canvas1.height), 
     width: logicalToPhysical(0.5, canvas1.width), 
     height: logicalToPhysical(0.5, canvas1.height), 
     fill: 'rgba(255,127,39,1)' 
    }); 
    canvas1.add(rect); 
    canvas1.renderAll(); 

    var rect = new fabric.Rect({ 
     left: logicalToPhysical(0.5, canvas2.width), 
     top: logicalToPhysical(0.5, canvas2.height), 
     width: logicalToPhysical(0.5, canvas2.width), 
     height: logicalToPhysical(0.5, canvas2.height), 
     fill: 'rgba(255,127,39,1)' 
    }); 
    canvas2.add(rect); 
    canvas2.renderAll(); 
})(); 

function logicalToPhysical(value, dimension){ 
    return value * dimension; 
}