CODEWITHSUNDEEP
konvajs
visc
visc

Reputation: 4959

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

I'm finding a potential bug in KonvaJS. Or I'm not sure about the capabilities...

1) Create a layer and add it to stage

2) Create a group and add it to layer

3) Create an Image node and add it to group (Note my images are loaded using Konva.Image.fromURL which waits for the image to load then adds it to the group.)

Result: Image does not appear.

But if you add the image to the group then add the group to the layer, the image appears. This is going to cause problems if I want to attach an image to a group dynamical if it just disappears.

I'm trying to create the concept of a tray or plate. Where the user can place items onto the plate. If the user drags the plate it creates a group with all the intersecting nodes and moves them all together. At drag end it releases all the objects back to the user.

EDIT: The problem I was experiencing had to do with group coordinates as I mentioned in my comment bellow.

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

LL: Make sure you're checking the position of the nodes your are rendering and that they do appear on screen.

Upvotes: 1

Views: 2251

Answers (2)

Hitesh Kumar
Hitesh Kumar

Reputation: 3698

I have created a plunkr and followed steps which you have mentioned. Everything is working fine. Here's my code. 

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.
});

Here's the plnkr to play around. Please let me know if I have missed anything.

Upvotes: 2

Vanquished Wombat
Vanquished Wombat

Reputation: 9535

Edited in light of OP's edit re confusion over co-ordinates.

Principles:

  1. layers use the same co-ordinate system as the stage. So setting a shape position to {X: 10, y: 20} is at 10,20 in relation to the top left of the stage.

  2. Adding a shape to a group is different, but you will not notice this if you do not set the group x & y position. For shapes that are added to the group, the shape positions are ADDED to the parent group positions.

Here is an example using a layer and a group. The gold rect is on the layer only. The group is illustrated by the green rect and has been set to position (60, 50). The red rect is a copy of the gold rect except the color. It has the same x & y position as red, BUT it is added to the group. And so its position (5, 5) is added to the group position (60, 50) to give its absolute position on the stage as (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>

Upvotes: 0

Related Questions