ファブリックJSカスタムカーソルのスタイル

Question

私はホバー形状の「手書き」のように、カーソルの種類を変更する必要があります...

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

私はこれを試してみましたが、あなたは直接hoverCursorを変更することができます

Answer 1

を動作していません単一のシェイプ、またはグローバルにキャンバス全体に適用されます。下のスニペットを見てください。

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カスタムカーソルの要素のマウスオーバーイベントを無効にする必要があります。