fabricjs 为每个对象更改光标

Question

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

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

如果您单击按钮 "change Cursor"，光标会变为十字准线，但是当您将鼠标移到线条或圆上时，它会更改为它们的设置。我希望光标保持十字准线。按 "default Cursor" 后，所有设置都应恢复原状，因此光标应使用直线和圆的特殊设置。

主要功能在这 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;
  }
});

在每个对象上，您将重置 'hover' 光标您为整个 canvas 设置的内容。

更新：

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

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

fabricjs 为每个对象更改光标

fabricjs change cursor for every object

javascript

css

fabricjs