如何<button>在Konva舞台上</button>放置一個<button>？</button>
[英]How can I put a <button> inside a Konva stage?
問題描述
我需要點擊舞台並使用其中的按鈕更改顏色。 我已經設法將一個按鈕放在畫布上的div中，但這次我需要按鈕出現在我的舞台內
1 個解決方案
解決方案1
0 已采納 2019-04-03 14:19:36
您可以繪制帶有畫布形狀的按鈕，也可以使用具有絕對位置的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舞台上添加視頻（.mp4，.mov）？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.