konvajs - KonvaJS - 确定 Stage 的子项是否已被点击的方法

Question

我很享受通过 react 和 typescript 学习 KonvaJS。

我在组件上有一个单击处理程序，它将在单击它的 x 和 y 坐标处创建一个新星。它通过将 x 和 y 坐标添加到 state 来做到这一点。

该坐标数组被映射到渲染层中的星星。

我想知道的是为 Stage 组件推荐的方法来了解是否单击了空白区域或是否单击了星号。

如果单击了一颗星，我想将其从状态中删除，但目前舞台正在那里添加一颗新星。

有没有办法让一个子组件，一颗星，与它的祖父母，舞台沟通，让它知道它已经被点击了，因此删除这个星，而不是添加另一个？

Answer 1

您可以使用类似于下面发布的功能检查点击的目标，并检查该目标的属性。如果匹配，请对其调用 remove 。否则，添加一颗新星。

    stage.on('click', function (e) {
        
            console.log(e.target)
            
            if(e.target.attrs.name === "star") //this would require you adding a name: "star" attribute to all star objects, but could be done another way
            {
                //code to remove star
            }
            else {
                //code to add star
            }
        });