如何<button>在Konva舞台上</button>放置一个<button>？</button>

Question

I need to click on stage and change it color using a button inside it. 我需要点击舞台并使用其中的按钮更改颜色。 I already managed to put a button in a div off the canvas but this time I need the button to appear inside my stage 我已经设法将一个按钮放在画布上的div中，但这次我需要按钮出现在我的舞台内

Answer 1

You can draw a button with canvas shapes, or you can use DOM <button> with absolute position 您可以绘制带有画布形状的按钮，也可以使用具有绝对位置的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舞台上</button>放置一个<button>？</button>

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-04-03 14:19:36

如何<button>在Konva舞台上</button>放置一个<button>？</button>

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-04-03 14:19:36

解决方案1
0 已采纳 2019-04-03 14:19:36