如何在FabricJs中设置相对位置(oCoords)? [英] How to set relative position (oCoords) in FabricJs?

问题描述

我在fabricJs中有一个Text.我上下左右.这会将aCoords正确设置为这些值.但是，oCoords不匹配.并且文本"未显示在正确的位置.

I have a Text in fabricJs. I set top and left. This sets the aCoords properly to those values. However the oCoords dont match. And the Text is not displayed at the right position.

我怀疑我需要以某种方式设置为oCoords.以便在画布上的右侧像素坐标处(顶部和左侧)显示文本.

I suspect that I need to set to oCoords somehow. So that the Text is displayed at the right pixel coordinates (top & left) on the canvas.

推荐答案

aCoords和oCoords是两个不同的东西，不应同步.

aCoords and oCoords are two different things and should not be in sync.

在您的评论中，您谈论的是缩放画布.

In your comment you speak about scaled canvas.

顶部和左侧是2个绝对值，代表对象在画布上的位置.当画布具有身份转换矩阵时，此位置与画布像素匹配.

Top and Left are 2 absolute values that represent the position of the object on the canvas. This position match with the canvas pixels when the canvas has a identity transform matrix.

如果应用缩放，则此坐标会发散.

If you apply a zoom, this coordinates diverge.

要获取缩放画布上未缩放画布上像素300,100的位置，您需要应用一些基本数学.

To get the position of pixel 300,100 of the scaled canvas on the unscaled canvas, you need to apply some basic math.

1)将转换应用于画布

1) get the transform applied to the canvas

canvas.viewportTransform

2)反转

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

3)将所需点与此矩阵相乘

3) multiply the wanted point by this matrix

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

4)将对象设置在该点.

4) set the object at that point.

这篇关于如何在FabricJs中设置相对位置(oCoords)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！