多次在 fabric.js 中设置 defaultCursor

Question

我可以设置 canvas.defaultCursor，但一旦设置就无法更改为其他内容。这可能吗？

这是我的代码：

var canvas = new fabric.Canvas('c');

function setCursor(cursorType) {
    if (cursorType == 'move') {
        canvas.defaultCursor = 'move';
    } else if (cursorType == 'crosshair') {
        console.log('Changing cursor to crosshair'); // this works
        canvas.defaultCursor = 'crosshair'; // this doesn't work
    }
}

setCursor('move'); // this works

// ...

setCursor('crosshair');

Answer 1

我不认为这种改变有任何问题。看光标在这个fiddle:

http://jsfiddle.net/v1nmtz02/4/

或尝试此处的代码段：

  var canvas = new fabric.Canvas('canvas');
function changeCursor(cursorType) {
   canvas.defaultCursor = cursorType;
}

<script src="http://fabricjs.com/lib/fabric.js"></script>
<button onclick="changeCursor('crosshair');">crosshair</button>
<button onclick="changeCursor('move');">move</button>
<button onclick="changeCursor('default');">default</button>
<canvas id='canvas' width="550" height="550" style="border:#000 1px solid;"></canvas>

Answer 2

原来是我的示例代码不完整

在完整代码中，我在用户将鼠标移到现有 canvas 对象附近时更改光标，然后在鼠标移开时将其更改回默认值。

这是缺失的部分：当用户将鼠标悬停在某个对象上时，Fabric 使用 hoverCursor 而不是 defaultCursor。在我的例子中，hoverCursor 与 defaultCursor 相同。所以我的代码确实在应该的时候改变了defaultCursor，但是当将鼠标移动到对象附近时，用户仍然看到了原始光标（来自hoverCursor）。

我可以通过更改相关对象的 hoverCursor 来解决这个问题。

多次在 fabric.js 中设置 defaultCursor

Set defaultCursor in fabric.js more than once

html

javascript

canvas

cursor

fabricjs