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

时间:2013-07-03 01:02:25

标签: javascript mouseevent fabricjs

我有一个画布由许多不透明度= 0的圈子组成。 我想在I:

时将其更改为1
  1. 点击圈子
  2. 当鼠标按钮停止时,移动圆圈(使用光标)。
  3. 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}
    

2 个答案:

答案 0 :(得分:2)

我正在使用带有FabricJS的打字稿,并遇到了同样的问题。我发现你可以使用canvas.findTarget方法让FabricJS为你做这件事。我相信你可以把它转换成相应的javascript。

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

答案 1 :(得分:1)

我对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/