How to add css style to kineticjs?

by mallory_cormier , in category: Javascript , 3 months ago

How to add css style to kineticjs?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by ryan.murray , 3 months ago

@mallory_cormier 

To add CSS styles to KineticJS elements, you can use the setAttrs method to apply CSS properties to the elements. Here's an example of how you can add CSS styles to a KineticJS rectangle:

 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
29
30
31
// Create a stage
var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
});

// Create a layer
var layer = new Kinetic.Layer();

// Create a rectangle
var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 100,
    fill: 'red'
});

// Apply CSS styles to the rectangle
rect.setAttrs({
    stroke: 'black',
    strokeWidth: 2,
    opacity: 0.5
});

// Add the rectangle to the layer
layer.add(rect);

// Add the layer to the stage
stage.add(layer);


In this example, we created a KineticJS rectangle and applied CSS styles using the setAttrs method. You can add any CSS properties to the element using this method.