How to get a dotted line border in kineticjs?

Member

by denis , in category: Javascript , 3 months ago

How to get a dotted line border in kineticjs?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by herminia_bruen , 3 months ago

@denis 

To create a dotted line border in KineticJS, you can use a combination of dashed stroke styles and line properties. Here's an example of how you can create a dotted line border for a rectangle in KineticJS:

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

var layer = new Kinetic.Layer();

var rectangle = new Kinetic.Rect({
  x: 50,
  y: 50,
  width: 200,
  height: 100,
  stroke: 'black',
  strokeWidth: 1,
  dash: [10, 5] // set the dash array to create a dotted line
});

layer.add(rectangle);
stage.add(layer);


In this example, we create a rectangle shape and set the dash property to an array [10, 5], where the first number represents the length of the dash and the second number represents the length of the gap between dashes. This will create a dotted line border for the rectangle shape.


You can customize the dash array to create different types of dashed or dotted lines according to your requirements.