1

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

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

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

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

结果：图像未出现。

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

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

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

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

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

4

2 回答 2

2

我创建了一个 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。如果我错过了什么，请告诉我。

于 2017-05-21T04:27:31.583 回答
0

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

原则：

  1. 图层使用与舞台相同的坐标系。因此，将形状位置设置为 {X: 10, y: 20} 是相对于舞台左上角的 10,20。

  2. 将形状添加到组中是不同的，但如果您不设置组 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>

于 2017-05-23T11:33:25.913 回答