面料JS自定义光标样式

Question

我需要改变游标类型上悬停形状“手写” ......

var canvas = window._canvas = new fabric.Canvas('ImgCanvas'); 
function changeCursor(cursorType) { 
canvas.defaultCursor = "Handwriting"; 
} 

我试过，但没有工作

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

Answer 2

Surendhar，

要改变光标移到需要定义形状：

canvas.hoverCursor = 'cursor type' 

这是光标

的list如果您需要自定义光标你必须使用自定义光标在织物画布上创建div元素。当事件'mouseover'时，该形状只指定了canvas.hoverCursor ='none'，并显示自定义的形状。

您可以检查这个fiddle这是自定义光标的简单示例。您必须重新访问此代码才能在不刷新自定义光标的情况下工作。这是关于自定义光标的鼠标悬停事件。您必须禁用自定义光标元素的每个div的鼠标悬停事件。