在将组添加到图层之前必须将图像添加到组吗？

Question

我在 KonvaJS 中发现了一个潜在的错误。或者我不确定这些功能...

1) 创建图层并将其添加到舞台

2) 创建一个组并将其添加到图层

3) 创建一个图像节点并将其添加到组中（注意我的图像是使用 Konva.Image.fromURL 加载的，它等待图像加载然后将其添加到组中。）

结果：图像没有出现。

但是，如果您将图像添加到组中，然后将组添加到图层中，图像就会出现。如果我想将图像附加到动态组（如果它刚刚消失），这将导致问题。

我正在尝试创建托盘或盘子的概念。用户可以将物品放在盘子上的地方。如果用户拖动板，它会创建一个包含所有相交节点的组并将它们一起移动。在拖动结束时，它会将所有对象释放回用户。

编辑：正如我在下面的评论中提到的，我遇到的问题与组坐标有关。

"I think I misunderstood, for the longest time how positioning works with groups. Read the comments: jsfiddle.net/jusatx6s"

LL：确保您正在检查正在渲染的节点的位置，并且它们确实出现在屏幕上。

Answer 1

我创建了一个 plunkr 并按照您提到的步骤进行操作。一切正常。这是我的代码。

var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});
// 1. created layer added it to stage.
var layer = new Konva.Layer();
stage.add(layer);
// 2. created group added it to layer
var group = new Konva.Group({
        x: 120,
        y: 40,
        rotation: 20
});

layer.add(group);
var src = 'https://konvajs.github.io/assets/yoda.jpg';
// 3. Create an Image node and add it to group
Konva.Image.fromURL(src, function(yoda) {
  console.log(yoda);
  yoda.setAttrs({
    x: 50,
    y: 50,
    width: 106,
    height: 118
  });
  // 4. Add it to group.
  group.add(yoda);
  layer.batchDraw(); // It's required to draw changes.
});

这里是 plnkr 可以玩的地方。如果我遗漏了什么，请告诉我。

Answer 2

根据 OP 对坐标的编辑重新混淆进行了编辑。

原则：

图层使用与舞台相同的坐标系。因此，将形状位置设置为 {X: 10, y: 20} 是相对于舞台左上角的 10,20。
向组中添加形状是不同的，但如果不设置组的 x 和 y 位置，您将不会注意到这一点。对于添加到组中的形状，形状位置添加到父组位置。

这是一个使用层和组的示例。黄金矩形仅在图层上。该组由绿色矩形表示，并已设置为位置 (60, 50)。除了颜色之外，红色矩形是金色矩形的副本。它与红色具有相同的 x 和 y 位置，但它被添加到组中。因此它的位置 (5, 5) 被添加到组位置 (60, 50) 以给出它在舞台上的绝对位置 (65, 55)。

// add a stage
var s = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 400
});

// add a layer        
var l = new Konva.Layer();
s.add(l);

// Add a gold rect to the LAYER
var gold = new Konva.Rect({stroke: 'gold', width: 40, height: 50, x: 5, y: 5});
l.add(gold);

// add a group
var g = new Konva.Group({x:60, y:50});
l.add(g);

// Add a green rect to the LAYER then add to the group
var green = new Konva.Rect({stroke: 'lime', width:100, height: 100, x: 0, y: 0});
g.add(green);

// Add a red rect, same apparent co-ords as red, but this time to the group
var red = new Konva.Rect({stroke: 'red', width: 40, height: 50, x: 5, y: 5});
g.add(red);

var abspos = red.getAbsolutePosition();
var pos = red.position();
console.log('Abs position of red is (' + abspos.x + ', ' + abspos.y + ') but its co-ords are ' + '(' + pos.x + ', ' + pos.y + ')'); 
  l.draw(); // redraw the layer it all sits on.

#container {
  border: 1px solid #ccc;
}

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.2/konva.min.js"></script>


<body>
  <div id="container"></div>
</body>

在将组添加到图层之前必须将图像添加到组吗？

Image must be added to group before group added to layer?

konvajs