How to move image in KineticJS?

Member

by rollin , in category: Javascript , 3 months ago

How to move image in KineticJS?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by denis , 3 months ago

@rollin 

To move an image in KineticJS, you can use the setPosition method to set the new position of the image. Here is an example of how to move an image in KineticJS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Create a stage
var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});

// Create a layer
var layer = new Kinetic.Layer();

// Create an image
var imageObj = new Image();
imageObj.onload = function() {
  var image = new Kinetic.Image({
    x: 100,
    y: 100,
    image: imageObj,
    width: 200,
    height: 200
  });

  // Add the image to the layer
  layer.add(image);

  // Add the layer to the stage
  stage.add(layer);

  // Move the image to a new position
  image.setPosition(200, 200);

  // Redraw the stage
  layer.draw();
};

imageObj.src = 'path/to/image.jpg';


In this example, we first create a Kinetic.Stage and a Kinetic.Layer. Then, we load an image and create a Kinetic.Image object with the image. We add the image to the layer and the layer to the stage. Finally, we use the setPosition method to move the image to a new position (200, 200) and redraw the stage.