javascript - Fabric.js – 当我按住鼠标按钮移动鼠标时，元素未定义

Question

我有一个由许多不透明度 = 0 的圆圈组成的 Canvas 。 当我执行以下操作时，我想将其更改为 1:

1. 点击圆圈
2. 按下鼠标按钮时(用光标)移动到圆圈上。

Nr 1 很简单。这是通过 canvas.on('mouse:down......)

解决的

但是我不知道应该如何解决问题 2。 以下是我的代码中的一些片段:

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

canvas.on('mouse:move', function(options) {
    if (mouseDown  && options.target) {
        options.target.set('opacity', 1)
        canvas.renderAll()
}});

但是按下鼠标按钮时 option.target 始终未定义

Object {target: undefined, e: MouseEvent}

Answer 1

我在 FabricJS 中使用 typescript 并遇到了同样的问题。我发现您可以使用 canvas.findTarget 方法让 FabricJS 为您执行此操作。我相信您可以将其转换为相应的 JavaScript。

canvas.on('mouse:move', (e) => {
  var target = canvas.findTarget(<MouseEvent>(e.e), true);
}