I'm trying to add a custom element using buttons, when I add a new element and change the radius of the input, it changes the radius of all the circles in the square. I don't know what to do, I've already seen and revised my code and I couldn't find a solution.
I tried to find in the documentation what may be happening, I imagine the reason is that Scene func updates all objects. The big point is that if I add a circle when I create the layer it does not update when I add it via the button.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva@8.0.1/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Custom Shape Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
x <input type="number" name="x" id="x">
y <input type="number" name="y" id="y">
raio <input type="number" name="raio" id="raio">
<button onclick="addCircle()">addQuad</button>
<body>
<div id="container"></div>
<script>
function addCircle(){
x1 = document.getElementById('x').value
y1 = document.getElementById('y').value
raio2 = document.getElementById('raio').value
var triangle = new Konva.Shape({
sceneFunc: function (context, shape) {
context.beginPath();
context.arc(y1, x1, raio2, 2 * Math.PI, 0);
context.closePath();
// (!) Konva specific method, it is very important
context.fillStrokeShape(shape);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
// add the triangle shape to the layer
layer.add(triangle);
layer.draw();
}
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight,
});
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>