使用Konva.js创建上下文菜单

Question

我有一张包含多个对象的地图，比如玩家、塔、敌人等。

它们是通过以下函数添加到地图中的：

const createCustomObject = (sides, radius, color, x, y) => {
  let customObject = new Konva.RegularPolygon({
    fill: color,
    x: x,
    y: y,
    sides: sides,
    radius: radius,
    id: returnID()
  });
  customObject.on("click", e => console.log(e.target.id()));
  addLayer(objectLayer, customObject);
};

现在需要更改它，以便当用户单击任何customObject时，上下文菜单应出现可点击的选项，如“删除”、“显示ID”等。

我该如何做呢？我考虑创建一个Konva.Rect() onclick，并用可点击的Konva.Text()对象填充，但是也许我错过了其他方法？我的方法似乎相当丑陋。

- user6898463

Answer 1

我就这么做了。我创建了一个矩形，然后在它的上方放置了Konva.Text元素。接着为所有的Konva.Text元素添加了一个onclick函数。

- user6898463

---

嗨@Skypho。你能否在你的答案中添加一个示例呢？ - Ebbs

请查看第121行。肯定有更好的方法，但那时我已经放弃了。 - user6898463

谢谢，这很有趣！我也昨天开始着手开发自己的版本。其中一些看起来与你所做的非常相似。它还远未完成，我仍然需要一些帮助才能实现它。我在 Stack Overflow 上发布了一个帖子：https://stackoverflow.com/questions/53541783/how-to-create-a-konva-react-context-menu。如果你想玩一下，里面有一个沙盒。 - Ebbs