如何将 <button> 放入 Konva 舞台？

Question

我需要点击舞台并使用里面的按钮改变它的颜色。我已经设法在 canvas 的 div 中放置了一个按钮，但这次我需要按钮出现在我的舞台中

Answer 1

您可以用 canvas 形状绘制按钮，或者您可以使用 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>

如何将 <button> 放入 Konva 舞台？

How can I put a <button> inside a Konva stage?

javascript

konvajs