How to rotate a line in kineticjs?

by cali_green , in category: Javascript , 10 months ago

How to rotate a line in kineticjs?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by ryan.murray , 10 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.

Related Threads:

How to resize the line using kineticjs?
How to get a dotted line border in kineticjs?
How to rotate the canvas image?
How to rotate an image in canvas?
How to translate and rotate a bitmap on canvas?
How to rotate image in p5.js?