Fabric JS 自定义光标样式

Question

我需要将悬停形状上的光标类型更改为 "Handwriting"...

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

我试过了但没用

Answer 1

您可以将 hoverCursor 直接更改为单个形状，或全局更改为整个 canvas。看看下面的片段。

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

苏伦达尔，

要将光标移到您需要定义的形状上：

canvas.hoverCursor = 'cursor type'

这是 list 个游标

如果您需要自定义光标，您必须使用自定义光标在结构 canvas 顶部创建 div 元素。当您有事件 'mouseover' 时，形状刚刚指定 canvas.hoverCursor = 'none'，并显示自定义形状。

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

Answer 3

要更改 fabric.js 对象的光标，您可以将 hoverCursor 或 moveCursor 设置为您自己的图像。例如：

object.set({hoverCursor: 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto'});

Answer 4

对于fabric 4.6，除了默认光标外，还可以使用png设置自定义光标：

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

const cursorUrl = 'https://ossrs.net/wiki/images/figma-cursor.png';
canvas.defaultCursor = `url(" ${cursorUrl} "), auto`;
canvas.hoverCursor = `url(" ${cursorUrl} "), auto`; 
canvas.moveCursor = `url(" ${cursorUrl} "), auto`;

CodePen

Fabric JS 自定义光标样式

Fabric JS Custom cursor style

html

javascript

html5-canvas

fabricjs