CODEWITHSUNDEEP
javascript2dkonvajs
Bobbzorzen
Bobbzorzen

Reputation: 101

Why does konvas [object].position() work differently for a shape and a stage?

When trying to position a shape in Konva you can use the .position() function and you use coordinates like in most 2d graphics stuff an inverted y grid so 100, 100 would be right 100px and down 100px.

BUT! when using .position() on the stage object you seem to get very strange effects where you (unlike any grid i've ever encountered) get an inverted x grid so that 100, 100 would be left 100px and up 100px

I haven't worked that much with 2d graphics so i might be missing something obvious but the documentation for stage.position() says get/set node position relative to parent and that it's inherited from Konva.Node#position Exactly the same as is said on shape.position() documentation. Is it that stage doesn't have a parent so it behaves differently? Or am i missing something else?

Example that shows how the positioning works on stage vs shape https://jsfiddle.net/uvp3k6wy/

Upvotes: 0

Views: 397

Answers (1)

lavrton
lavrton

Reputation: 20373

They work exactly the same.

The node.position() will define "where we need to draw a node".

stage.position({x: 50, y: 50}); means that all nodes that stage has will be drawn from {x: 50, y: 50} position on canvas. So whole stage is moved by 50, 50 px to right-bottom direction.

If you have a red circle in {x: 0, y: 0}, it will have an absolute position {x: 50, y: 50} because it is moved my stage position.

Upvotes: 1

Related Questions