ファブリックjsパーセントオブジェクトの位置を設定する方法

Question

私はFabric.jsと私は動的にキャンバスのサイズを変更しているので、適切なオブジェクトインデント（キャンバスのサイズに応じてパーセントで）のすべてのキャンバスオブジェクトをスケーリングする必要があります。左上のオブジェクトの位置をパーセントで設定する方法は？ CSSのような

：

トップ：32％ 左：あなたはリサイズ比率を計算するために2つの値を持つ必要があり、私の意見では

// set canvas size dynamically by resize event 
 
this.canvas.setWidth(size.width); 
 
this.canvas.setHeight(size.height);

Answer 1

10％。

initialCanvasWidthとfinalCanvasWidth。

ページの読み込みにinitialCanvasWidthの値があると仮定します。あなたは、すべてこのように機能してサイズを変更するにリサイズ比率を計算することができます。

  window.onresize = utility.debounce(() => { 
      const finalCanvasWidth = canvasWrapper.clientWidth 
      const resizeRatio = (finalCanvasWidth/initialCanvasWidth).toFixed(3) 

      setCanvasSizeAndPosition() 
      scaleObjectsOnCanvas(resizeRatio) 
     }, 250) 

のdivとし、リサイズ後の新しい幅を使用してキャンバスをラップすることにより、あなたはsetCanvasSizeAndPosition機能に（新しいキャンバスの幅と高さを設定することができます）

this.canvas.setWidth(newWidth).setHeight(newHeight) 

私はあなたにも、あなたはスケーリングやポジショニングのオブジェクトを継続することができ、あなたの新しいキャンバスサイズを設定した後newHeight値

を計算するために、最初にあなたのキャンバスのあなたの縦横比を保存する必要があるだろうと思いオンc anvas（scaleObjectsOnCanvas関数）

scaleObjectsOnCanvas(resizeRatio) { 
     const objects = canvas.getObjects() 
     for (let i = 0; i < objects.length; i++) { 
      objects[i].left = objects[i].left * resizeRatio 
      objects[i].top = objects[i].top * resizeRatio 
      objects[i].scaleX = objects[i].scaleX * resizeRatio 
      objects[i].scaleY = objects[i].scaleY * resizeRatio 
     } 
     this.canvas.renderAll() 
    } 

希望するものがあります。

レスポンシブキャンバス/ fabric.jsの使用方法real world working example