如何在FabricJs中設置相對位置（oCoords）？

我在fabricJs中有一個文本。我置頂並離開。這將aCoords正確設置爲這些值。但oCoords不匹配。文本不顯示在正確的位置。如何在FabricJs中設置相對位置（oCoords）？

我懷疑我需要以某種方式設置oCoords。以便文本顯示在畫布上的右側像素座標（頂部&左側）。

2017-08-21 Leo123

我想實現的是通過fabricJs將文本設置在畫布上的像素座標處。 – Leo123

它不清楚，你在問什麼，你能解釋你的問題嗎？ – Durga

'var fabricText = new fabric.Text（{「Hello」，top：100，left：300}）; fabricCanvas.add（fabricText）; fabricCanvas.renderAll（）;'縮放畫布上的文本不顯示在pixel（x，y）-position（300,100）處。但在別的地方。如何實現文本顯示在畫布上的精確像素座標？ – Leo123

aCoords和oCoords是兩個不同的東西，不應該同步。

在你的評論中，你會談論縮放畫布。

Top和Left是2個絕對值，表示對象在畫布上的位置。當畫布具有標識轉換矩陣時，此位置與畫布像素匹配。

如果應用縮放，則此座標偏差。

要獲得縮放畫布的像素300,100在未縮放的畫布上的位置，您需要應用一些基本的數學運算。

1）獲得的變換施加到帆布

canvas.viewportTransform

2）通過該基質

var point = new fabric.Point(myX, myY); 
var transformedPoint = fabric.util.transformPoint(point, iM)

4）組倒轉

var iM = fabric.util.invertTransform(canvas.viewportTransform)

3）乘以所需點該點的對象。

來源

2017-08-22 08:02:36 AndreaBogazzi

非常感謝。它似乎工作。 :)幫了我很多。所以這個計算將把oCoords（顯示的座標）轉換爲aCoords。 – Leo123

你如何認識fabricJs如此順利。我覺得這個教程不是很全面。不知道在fabricJs中如何使用內部矩陣。 – Leo123

內部矩陣用於在變換階段之間進行切換，這對於2D圖形來說是正常的事情，並且有時是做事情的唯一方式，因爲應用不同的變換（縮放，旋轉，平移，傾斜）是不可能實現簡單邏輯給他們（例如左* scaleX）。 – AndreaBogazzi

如何在FabricJs中設置相對位置（oCoords）？

回答

相關問題