1

我有一个由许多不透明度 = 0 的圆圈组成的画布。我想在以下情况下将其更改为 1：

  1. 点击圆圈
  2. 当鼠标按钮按下时，在圆圈上移动（用光标）。

Nr 1 很容易。这可以通过 canvas.on('mouse:down......) 解决

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

2 回答 2

2

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

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

于 2015-03-03T16:13:40.990 回答
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/

于 2013-07-03T01:32:07.460 回答