Fabric.js –按住鼠标按钮移动鼠标时元素未定义

Question

我有一个由许多不透明度= 0的圆形组成的画布。当我执行以下操作时，我想将其更改为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中使用打字稿，并遇到了同样的问题。 我发现您可以使用canvas.findTarget方法获取FabricJS为您执行此操作。 我确定您可以将其转换为相应的javascript。

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

Answer 2

我对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变量结合使用，以便仅在鼠标按下时执行这些操作。

您可以在这里看到我的解决方案：

http://jsfiddle.net/qwpB3/