How to resize the line using kineticjs?
How to resize the line using kineticjs?
1 answer
by
muriel.schmidt ,
3 months ago
@denis
To resize a line in KineticJS, you can update the points of the line to change its length and position. Here's an example of how you can resize a line 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 |
// Create a stage
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
// Create a layer
var layer = new Kinetic.Layer();
// Create a line
var line = new Kinetic.Line({
points: [50, 50, 200, 200],
stroke: 'black',
strokeWidth: 2
});
// Add the line to the layer
layer.add(line);
// Add the layer to the stage
stage.add(layer);
// Resize the line
line.points([50, 50, 300, 300]);
// Redraw the layer
layer.draw();
|
In this example, we first create a line with initial points and add it to a layer. Then, we use the points() method to update the points of the line to resize it. Finally, we redraw the layer to see the updated line on the stage.