CODEWITHSUNDEEP
javascripthtml5-canvaskineticjs
Mohebifar
Mohebifar

Reputation: 3411

How to get position of clicking on a shape (KineticJS)

I have a draggable layer and a large transparent background in this layer. I want to add a text exactly on position where user clicked. When i didn't drag layer everything is ok but when I drag it texts will added on a place i don't want. because event.x and event.y are not x and y of clicking area for shape. coordinates must be transformed. but I don't know how can I get Transformation vector.

    plot = {};
    plot.stage = new Kinetic.Stage({width: 500, height:500,
      container: 'abc',
      'draggable': true});
    plot.layer = new Kinetic.Layer();
    plot.stage.add(plot.layer);
    plot.background = new Kinetic.Rect({
          x: -1000,
          y: -1000,
          width: 2000,
          height: 2000,
          fill: "#000000",
          opacity: 0.05,
          type: 'blank'
    });
    plot.layer.add(plot.background);

    plot.background.on('click', function(e) {
       e.x;
       e.y;
       // e.x and e.y are not true after dragging stage
    });

Upvotes: 0

Views: 921

Answers (2)

Eric Rowell
Eric Rowell

Reputation: 5219

you need to set the position of the element absolutely. Use this:

plot.setAbsolutePosition(stage.getUserPosition());

Upvotes: 0

SoluableNonagon
SoluableNonagon

Reputation: 11755

When using KineticJS you want to avoid event.x and event.y as KineticJS already has methods for getting position.

   var position = stage.getUserPosition();  // this returns an object like {x: 100, y: 140}

Also, examine where you are adding the text, to what layer. Also, do show some code.

Upvotes: 1

Related Questions