Question

我需要单击舞台，并使用其中的按钮更改其颜色。我已经设法在画布上的div中放置了一个按钮，但是这次我需要将该按钮显示在我的舞台内

Answer 1

您可以绘制具有画布形状的按钮，也可以使用绝对位置的DOM <button>

var stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

var layer = new Konva.Layer();
stage.add(layer);

var button = new Konva.Label({
  x: 20,
  y: 20,
  opacity: 0.75
});
layer.add(button);

button.add(new Konva.Tag({
  fill: 'black',
  lineJoin: 'round',
  shadowColor: 'black',
  shadowBlur: 10,
  shadowOffset: 10,
  shadowOpacity: 0.5
}));

button.add(new Konva.Text({
  text: 'Canvas button',
  fontFamily: 'Calibri',
  fontSize: 18,
  padding: 5,
  fill: 'white'
}));


button.on('click', () => {
    alert('clicked on canvas button');
})

document.querySelector('#button').addEventListener('click', () => {
    alert('clicked on DOM button');
})

layer.draw();

#button {
  position: absolute;
  top: 30px;
  left: 160px;
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Konva demo">
  <script src="https://unpkg.com/konva@^3/konva.min.js"></script>
  <meta charset="utf-8">
</head>
<body>
  <div id="container"></div>
  <button id="button">DOM button</button>
</body>
</html>

如何在Konva舞台中放置<button>？

1 个答案: