Fabric.js - 元素是未定義的，當我移動鼠標按住鼠標按鈕

我具有由具有不透明度許多circels由畫布= 0 我想此更改爲1時I：Fabric.js - 元素是未定義的，當我移動鼠標按住鼠標按鈕

點擊圓圈
移動在圈子（光標）時mousebutton下跌。

NT個1是容易的。這解決了canvas.on（'鼠標：下......）

但我不能找出我應該怎麼解決問題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永遠是不確定的，當按下mousebutton

Object {target: undefined, e: MouseEvent}

來源

2013-07-03 Christian

我不是那麼熟悉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-03 01:32:07

非常感謝！這是我正在尋找的代碼片段！ VAR PT = {X：options.e.clientX，Y：options.e.clientY}; – Christian

很高興能幫到@Christian！ –

http://jsfiddle.net/qwpB3/5/ - >添加更多圈的工作不細.. – Lokesh

我使用打字稿用FabricJS和對面同樣的問題來了。我發現你可以使用canvas.findTarget方法讓FabricJS爲你做到這一點。我相信你可以將它轉換成相應的javascript。

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

來源

2015-03-03 16:13:40 Harindaka

此解決方案可以工作並轉換爲JavaScript，如下所示： ''var target = canvas.findTarget（e.e）;''' –

Fabric.js - 元素是未定義的，當我移動鼠標按住鼠標按鈕

回答

相關問題