How to rotate a line in kineticjs?
How to rotate a line in kineticjs?
1 answer
by
ryan.murray ,
3 months ago
@cali_green
In KineticJS, you can rotate a line by setting the rotation property of the line object. Here is an example code snippet that shows how to rotate a line by 45 degrees:
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: [100, 100, 200, 200],
stroke: 'black',
strokeWidth: 2
});
// Add the line to the layer
layer.add(line);
// Add the layer to the stage
stage.add(layer);
// Rotate the line by 45 degrees
line.rotation(45);
// Draw the layer
layer.draw();
|
In this code snippet, we first create a stage and a layer. Then, we create a line with two points and add it to the layer. Finally, we set the rotation property of the line to 45 degrees and redraw the layer to see the rotated line.