Search code examples
javascriptcanvaskineticjs

Change coordinates of an image after added to the stage

if I have an image on stage:

var stage = new Kinetic.Stage({
    container : "cantainer",
    width : 400,
    height : 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var img = new Image();
img.src ="https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg"
img.onload = function(){
   pic = new Kinetic.Image({ x: 0, y: 0, width: 251, height: 231,image: img});
   layer.add(pic);
   layer.draw();
}

how do I change the x/y values from "pic" afterwards...?

THX!

Solution

  • Give Kinetic Image also an id to make it easier to trace out:

    pic = new Kinetic.Image({
    x: 0,
    y: 0,
    width: 251,
    height: 231,
    image: img,
    id: 'img1'
});

    After image is added to layer, you can use:

    var x = [your x];
var y = [your y];

layer.get('#img1')[0].setPosition(x,y);
layer.draw();