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

我认为这种变化没有任何问题。看看这个小提琴中的光标：

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

或在此处尝试摘录：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

事实证明我的示例代码不完整。

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

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

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

不止一次在fabric.js中设置defaultCursor

2 个答案: