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 时，上下文菜单应显示可单击的选项，例如 "Delete"、"Show ID" 等。

我该怎么做？我正在考虑创建一个 Konva.Rect() onclick 并填充可点击的 Konva.Text() 对象，但也许我错过了其他方法？我的好像有点丑。

Answer 1

我就是这么做的。我制作了一个矩形，并在其上方放置了 Konva.Text。然后为所有 Konva.Text 个元素制作了 onclick 函数

Konva.js 的上下文菜单

Context menu with Konva.js

javascript

canvas

konvajs