使用paperjs在画布中的特定元素上为上下文菜单创建eventHandler

Question

我使用path创建了一个包含一些paperjs元素的画布。对于每个元素，我想为contextmenu实现eventHandler。paperjssupport mouse events，但不支持onContextMenu。

这是我可以添加onClick事件处理程序的方式：

function addOnClick(clickArea) {
  //clickArea is path object
  clickArea.onClick = (e) => {console.log("my on click handler!"}
}

如何添加onContextMenu？

Answer 1

实际上，这不是Paper.js的内置功能，但是您可以通过使用未记录的MouseEvent.event属性来解决此问题。这实际上是Paper.js捕获的原始事件，因此您可以使用它来检测按下了哪个鼠标按钮并相应地调整逻辑。这是一个sketch演示解决方法。

const circle = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

circle.onClick = (event) => {
    if (event.event.button > 0) {
        onRightButtonClick();
    } else {
        onLeftButtonClick();
    }
};

function onLeftButtonClick() {
    console.log('left button clicked');
}

function onRightButtonClick() {
    console.log('right button clicked');
}