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

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

单击圆圈

按下鼠标按钮时（用光标）在圆上移动

NR1很容易。这是用画布解决的。on（'鼠标：向下……）

但我不知道该如何解决问题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}

---

我对Fabric.js不太熟悉，因此可能有更好的解决方案，但以下是我的看法：

canvas.on('mouse:move',function(options){
    var pt = { x: options.e.clientX, y: options.e.clientY };
    if( circle.containsPoint(pt)  ) {
        if( !circle.mouseOver ) {
            circle.mouseOver = true;
            console.log( 'over circle, yo' );
            circle.set('opacity', 0.5);
            canvas.renderAll();
        }
    } else if( circle.mouseOver ) {
        circle.mouseOver = false;
        circle.set('opacity', 1.0);
        canvas.renderAll();
    }
});

基本上，我们正在做所有的繁重的工作，看看我们是否在感兴趣的对象上，当我们第一次鼠标悬停在它上面，然后再次鼠标悬停在它上面时，我们会改变它的属性。您可以将其与

mouseDown

变量结合使用，以便仅在鼠标按下时执行这些操作

您可以在此处看到我的解决方案：

---

我对Fabric.js不太熟悉，因此可能有更好的解决方案，但以下是我的看法：

canvas.on('mouse:move',function(options){
    var pt = { x: options.e.clientX, y: options.e.clientY };
    if( circle.containsPoint(pt)  ) {
        if( !circle.mouseOver ) {
            circle.mouseOver = true;
            console.log( 'over circle, yo' );
            circle.set('opacity', 0.5);
            canvas.renderAll();
        }
    } else if( circle.mouseOver ) {
        circle.mouseOver = false;
        circle.set('opacity', 1.0);
        canvas.renderAll();
    }
});

基本上，我们正在做所有的繁重的工作，看看我们是否在感兴趣的对象上，当我们第一次鼠标悬停在它上面，然后再次鼠标悬停在它上面时，我们会改变它的属性。您可以将其与

mouseDown

变量结合使用，以便仅在鼠标按下时执行这些操作

您可以在此处看到我的解决方案：

---

我在FabricJS中使用typescript时遇到了同样的问题。我发现您可以使用canvas.findTarget方法让FabricJS为您做这件事。我相信您可以将其转换为相应的javascript

canvas.on（'mouse:move'，（e）=>{
var target=canvas.findTarget（（e.e），true）；
}

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

canvas.on（'mouse:move'，（e）=>{
var target=canvas.findTarget（（e.e），true）；
}

非常感谢！！！这就是我要找的代码！var pt={x:options.e.clientX，y:options.e.clientY}；很高兴我能帮上忙，@Christian！你说“工作不好”是什么意思；我觉得没问题。你加上两个圈，就可以把它们都移动了……非常感谢！！！这就是我要找的代码！var pt={x:options.e.clientX，y:options.e.clientY}；很高兴我能帮上忙，@Christian！你说的“工作不好”是什么意思？我觉得没问题。你添加两个圆圈，你可以移动它们……这个解决方案可以工作并转换成JavaScript，类似于：

var target=canvas.findTarget（e）此解决方案可以工作并转换为JavaScript，如下所示：
var target=canvas.findTarget（e.e）；