Fabric js如何設置百分比對象的位置

我正在使用Fabric.js，並且動態地更改了畫布大小，因此我需要使用適當的對象縮進（以百分比取決於畫布大小）頂部和左側縮放所有畫布對象。我可以如何設置頂部和左側物體位置的百分比？Fabric js如何設置百分比對象的位置

像CSS：

頂部：32％左：10％

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

來源

2017-04-14 Lemmy

在我看來，你應該有以計算調整大小比兩個值。

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() 
    }

希望有所幫助。

這裏是一個real world working example響應帆布/ fabric.js的用法

來源

2017-04-18 11:17:33

Fabric js如何設置百分比對象的位置

回答

相關問題