How to restrict image drag using kineticjs?

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

How to restrict image drag using kineticjs?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , 8 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.

Related Threads:

How to extract an image from an other using kineticjs?
How to drag an svg group using d3.js drag behavior?
How to restrict loading of an image in iframe?
How to restrict number of columns to be update using oracle?
How to rotate svg using d3.drag()?
How to move image in KineticJS?