fabricjs为每个对象更改光标

Question

如果用户将鼠标悬停在对象上，我使用fabric js创建了一些对象，并为它们添加了不同的光标。我想添加一个函数，它改变整个画布及其所有对象的光标，然后将其更改回其默认值（所以对象和画布的光标设置）。

有没有办法做到这一点？或者我必须手动设置每个对象的光标？ 我有一个小的jsfiddle此：https://jsfiddle.net/bxgox7cr/14/

如果你点击按钮“改变光标”，光标变为十字线，但是当你移动你的摩西在直线或圆，它改变了他们的设置。我希望光标保持为十字准线。按下“默认光标”后，所有的设置都应该设置回来，所以光标应该使用线和圆的特殊设置。

的主要功能是在这2个功能：

$('#button').click(function() { 
    canvas.defaultCursor = 'crosshair'; 
}); 
$('#button2').click(function() { 
    canvas.defaultCursor = 'default'; 
}); 

我可能保存默认值对每个对象，然后将Button2的点击后改回来，但是这似乎是一个难以解决，所以我希望有一个更简单的方法。

Answer 1

只需添加到您的代码，此事件：

canvas.on('mouse:over', function(event){ 
    if (event.target != null) 
    event.target.hoverCursor = canvas.defaultCursor; 
    } 
}); 

在每个对象将重置“悬停”光标你的整个画布设置。

更新时间：

如果您需要重置为默认值，你必须追踪原始光标为每个对象的。你需要这样的事情：

$('#button').click(function() { 
    changeCursor('crosshair'); 
}); 
$('#button2').click(function() { 
    resetCursor(); 
}); 

var cursors = {canvasDefault: canvas.defaultCursor, 
     canvasDefault: 'default', 
     object:[ 
     {objectType: 'circle', 
     hoverCursor: 'move'}, 
     {objectType: 'line', 
     hoverCursor: 'ns-resize'} 
     ] 
     }; 

function changeCursor(cursor){ 
    canvas.forEachObject(function(obj){ 
    for (var i in cursors.object){ 
    if (cursors.object[i].objectType == obj.type){ 
     obj.hoverCursor = cursor; 
    } 
    } 
    canvas.defaultCursor = cursor; 
    }); 
} 

function resetCursor(){ 
    canvas.forEachObject(function(obj){ 
    for (var i in cursors.object){ 
    if (cursors.object[i].objectType == obj.type){ 
     obj.hoverCursor = cursors.object[i].hoverCursor; 
    } 
    } 
    canvas.defaultCursor = cursors.canvasDefault; 
    }); 
}