Question

这是图形：

大矩形是canvas元素，小矩形是画布中的图像对象。我想找到左边的真实距离。

值来自我在控制台中看到的内容：

regX: 564.256
regY: 41.4
scaleX: 0.4491319444444445
scaleY: 0.4491319444444445
x: 363.3333333333333
y: 409.77777777777777

因为我看到x不是真的。它与regX和scaleX有某种关系。但我不知道它是如何相关的。从图像我认为x应该是大约100 - 150 px。 x越大 - 右边越多。但是更大的regX - 它使得矩形越向左移动。

所以，如果我只是采取差异564.256 - 363.333 = ~200 - 矩形的左角应该在画布中间，因为画布是400px widh。但事实并非如此，因此减法并没有帮助。 那么如何从左侧获得实际的像素数量？

Answer 1

您可以使用localToGlobal方法执行此操作（请参阅here）。

这取决于给定属性属于哪个对象。

如果它们属于形状，并且图像/形状内的矩形从（0,0）开始：

var point = shape.localToGlobal(0, 0);
// this will calculate the global point of the shape's local point (0,0)

如果他们属于舞台：

var point = stage.localToGlobal(yourRectObject.x, yourRectObject.y);
// point.x should contain the position on the canvas

您通常应该使用这些方法，因为您的方法可能适用于当前情况，但是一旦缩放阶段本身或将形状放在缩放/定位容器中，它可能会中断。

Answer 2

我想通过试验价值找到了什么：

distanceFromLeft = x - scaleX * regX;

所以得到109.90793888888885 px

如果有人在这个图书馆工作得更多，他们可以确认这不是偶然的。