在使用 konva 时,我使用一个按钮将形状多次添加到我的舞台上 使用类似于
的东西 document.getElementById('Rect').addEventListener( "click" , function () {
let layer = new Konva.Layer();
let item = new Konva.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true,
});
这会附加一个矩形形状,如果单击多次,它还会附加额外的形状 我想为用户提供一个选项,可以通过按钮删除他希望删除的特定形状。 我尝试使用 Konva 教程中提供的上下文菜单教程,但是在实现那里提供的删除功能时
document.getElementById('delete-button').addEventListener('click', () => {
currentShape.destroy();
layer.draw();
});
无法删除添加到形状的更改器(mutator)层
document.getElementById('delete-button').addEventListener('click', () => {
tr.detach();
currentShape.destroy();
layer.draw();
});
我尝试分离变压器/隐藏它,但它从形状的所有可用实例中删除了它
如何解决这个问题,非常感谢!!
最佳答案
您正在为“添加”按钮的 click
事件内部的“删除”按钮添加新的 click
事件监听器。这意味着每次您单击“删除”时,所有监听器都会被触发。这会删除所有变压器。
相反,您只需添加一次click
监听器,然后手动查找事件的Transformer
即可将其删除。
document.getElementById('delete-button').addEventListener('click', () => {
const tr = layer.find('Transformer').toArray().find(tr => tr.nodes()[0] === currentShape);
tr.destroy();
currentShape.destroy();
layer.draw();
});
关于javascript - 使用 node.destroy() 时如何删除 konva 形状/图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62374048/