必须先将图像添加到组中，然后再将组添加到图层？答案

【问题标题】：Image must be added to group before group added to layer?必须先将图像添加到组中，然后再将组添加到图层？
【发布时间】：2017-05-17 20:03:32
【问题描述】：

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

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

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

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

结果：图像未出现。

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

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

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

“我想我误解了，很长时间以来，定位如何与组一起工作。阅读 cmets：jsfiddle.net/jusatx6s”

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

【问题讨论】：

嗨。你能创建一个演示吗？
我想我误解了，很长一段时间以来，定位如何与组一起工作。阅读 cmets：jsfiddle.net/jusatx6s
我自己没有遇到这个问题，所以想知道，根据@jefhai，如果您在图像上设置 (x, y)。分组元素中的坐标可能会令人困惑，因为组原点是组中最左上角元素的顶部和左侧。尝试将 (x,y) 设置为零，看看会得到什么。
我在下面做了一个最小的可行示例，可以满足您的描述。请您看看是否可以根据您的情况对其进行编辑并使其失败？

标签： konvajs

【解决方案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 玩。如果我遗漏了什么，请告诉我。

【讨论】：

batchDraw(); 是做什么的？我在 Layer 下的 API 文档中找不到它。
谢谢，这对我真的很有用。

【解决方案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>

【讨论】：

感谢您添加的示例。我的问题最终与组坐标的工作方式有关。我想通了并对原始问题进行了编辑。
@jefhai 抱歉看到该评论，但未将其与您联系。我对团体也有一些初步的误解。我最终向组添加了一个不可见的背景矩形，它是舞台的大小，从而为我提供了与页面匹配的组坐标。