fabricjs为每个对象更改光标

Question

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

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

如果您单击“更改光标”按钮，光标将变为十字准线，但当您将鼠标移到线条或圆圈上时，它会更改为它们的设置。我希望光标保持为十字准线。按下“默认光标”后，所有设置都应该重新设置，所以光标应该使用线和圆的特殊设置。

主要功能在这两个功能中：

$('#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;
  });
}