Question

我在KonvaJS中发现了潜在的错误。或者我不确定能力......

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

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

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

结果：图片未显示。

但是，如果您将图像添加到组中，然后将该组添加到图层，则会显示图像。如果我想将图像附加到动态组中，如果它刚刚消失，这将导致问题。

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

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

＆＃34;我想我误解了最长时间定位如何与群体一起工作。阅读评论：jsfiddle.net/jusatx6s"

LL：确保您正在检查正在渲染的节点的位置以及它们是否出现在屏幕上。

Answer 1

我创建了一个plunkr并按照你提到的步骤进行操作。一切都很好。这是我的代码。

<table id="countryList">
  <tr>
    <td>Europe</td>
    <td>France</td>
    <td>Sweden</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Asia</td>
    <td>Singapore</td>
    <td>Thailand</td>
    <td>Japan</td>
  </tr>
</table>

在这里玩plnkr。如果我错过了什么，请告诉我。

Answer 2

根据OP的编辑重新混淆坐标编辑。

原则：

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

以下是使用图层和组的示例。金色矩形仅在图层上。该组由绿色矩形表示，并已设置为位置（60,50）。红色矩形是除了颜色之外的金色矩形的副本。它有相同的x＆amp; 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>

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

2 个答案: