我需要将光标类型更改为"手写"在悬停形状...
var canvas = window._canvas = new fabric.Canvas('ImgCanvas');
function changeCursor(cursorType) {
canvas.defaultCursor = "Handwriting";
}
我试过这个但没有工作
答案 0 :(得分:3)
Surendhar,
要将光标更改为您需要定义为的形状:
canvas.hoverCursor = 'cursor type'
这是游标的list
如果您需要自定义光标,则必须使用自定义光标在结构画布上创建 div 元素。当你有'mouseover'事件时,刚刚指定的形状为canvas.hoverCursor ='none',并显示自定义的一个。
您可以查看fiddle这是自定义光标的简单示例。您必须重新访问此代码才能在不刷新自定义光标的情况下工作。这是关于自定义光标的鼠标悬停事件。您必须禁用自定义光标的每个 div 元素的鼠标悬停事件。
答案 1 :(得分:1)
您可以将hoverCursor直接更改为单个形状,也可以全局更改为整个画布。看看下面的片段。
var canvas = this.__canvas = new fabric.Canvas('c');
// pointer for all
canvas.hoverCursor = 'pointer';
var rect = new fabric.Rect({
left: 50,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
});
var rect2 = new fabric.Rect({
left: 180,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
});
canvas.add(rect);
canvas.add(rect2);
canvas.renderAll();
var canvas2 = this.__canvas = new fabric.Canvas('c2');
var rect = new fabric.Rect({
left: 120,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
// pointer for the selected shape
hoverCursor: "pointer"
});
canvas2.add(rect);
canvas2.renderAll();

p{font-family:'arial'}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<p>Applied Globally</p>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>
<p>Applied individually</p>
<hr/>
<canvas height=200 width=300 id="c2" style="border:1px solid black"></canvas>
&#13;
答案 2 :(得分:0)
要更改fabric.js对象的光标,可以将hoverCursor或moveCursor设置为您自己的图像。 例如:
object.set({hoverCursor: 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto'});