How to draw a shape with a button using KineticJS?
How to draw a shape with a button using KineticJS?
1 answer
by
jasen_gottlieb ,
a month ago
@deron
To draw a shape with a button using KineticJS, you can create a stage, layer, shape, and button using the KineticJS library. Here is an example code to draw a shape with a button:
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 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Draw Shape with Button</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/kinetic.min.js"></script>
</head>
<body>
<button onclick="drawShape()">Draw Shape</button>
<div id="container"></div>
<script>
function drawShape() {
// Create a stage
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
// Create a layer
var layer = new Kinetic.Layer();
// Create a shape
var shape = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 100,
fill: 'green'
});
// Add the shape to the layer
layer.add(shape);
// Add the layer to the stage
stage.add(layer);
// Draw the stage
stage.draw();
}
</script>
</body>
</html>
|
In this example, when the button is clicked, a rectangle shape will be drawn on the stage. You can customize the shape and button as needed by changing the properties of the KineticJS objects.