javascript - 为什么 konvas [object].position() 对于形状和舞台的工作方式不同？

Question

当尝试在 Konva 中定位形状时，您可以使用 .position() 函数，并且像大多数 2d 图形中一样使用坐标填充倒置的 y 网格，因此 100、100 就是正确的 100px 和下降 100 像素。

但是!当在舞台对象上使用 .position() 时，你似乎会得到非常奇怪的效果，你(与我遇到过的任何网格不同)得到一个倒置的 x 网格，这样 100, 100 将剩下 100px及以上 100 像素

我对 2d 图形的工作不多，所以我可能会遗漏一些明显的东西，但 stage.position() 的文档说获取/设置相对于父级的节点位置 code> 并且它继承自 Konva.Node#position 与 shape.position() 文档中所述完全相同。是不是那个阶段没有父级，所以它的行为有所不同？还是我还漏掉了其他东西？

示例展示了舞台上的定位与形状上的定位效果 https://jsfiddle.net/uvp3k6wy/

Answer 1

它们的工作原理完全相同。

node.position()将定义“我们需要在哪里绘制节点”。

stage.position({x: 50, y: 50});意味着该阶段拥有的所有节点都将从 {x: 50, y: 50} 中抽取 Canvas 上的位置。所以整个舞台被移动了50, 50 px 到右下方向。

如果{x: 0, y: 0}中有一个红色圆圈，它将有一个绝对位置 {x: 50, y: 50}因为它移动了我的舞台位置。