How to restrict image drag using kineticjs?

by muriel.schmidt , in category: Javascript , 3 months ago

How to restrict image drag using kineticjs?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , 3 months ago

@muriel.schmidt 

To restrict image drag using KineticJS, you can disable the draggable property of the image object. Here is an example code snippet to demonstrate how to do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});

var layer = new Kinetic.Layer();

var image = new Kinetic.Image({
    x: 100,
    y: 100,
    image: imageObj,
    width: 200,
    height: 200,
    draggable: true
});

// Disable dragging of the image
image.setDraggable(false);

layer.add(image);
stage.add(layer);


In this example, we create a new Kinetic.Image object with the draggable property set to true. We then use the setDraggable(false) method to disable the dragging functionality of the image. This will prevent the user from dragging the image around the stage.