Fabric.js 图片 hoverCursor 属性

hoverCursor 是 Fabric.js 中图片对象的一个属性，它设定了当鼠标悬停在图片上方时的鼠标指针样式。本文将介绍 hoverCursor 属性的使用方法及常见应用场景。

使用方法

在创建图片对象时，可以使用以下语句来设置 hoverCursor 属性：

var img = new fabric.Image(imgElement, {
  hoverCursor: 'pointer'
});

此处 imgElement 是图片元素的 DOM 对象，hoverCursor 的值设置为 'pointer'，表示当鼠标悬停在图片上方时，鼠标指针将变为手指形状。

应用场景

图片链接

在网页中，我们通常使用图片链接引导用户进入其他页面。这时，我们可以使用 hoverCursor 属性来设定鼠标指针的样式，增强用户体验。

var img = new fabric.Image(imgElement, {
  hoverCursor: 'pointer',
  selectable: false,
});

img.on('mousedown', function() {
  window.location.href = 'https://www.example.com';
});

此处 selectable 属性设置为 false，使图片不能被选中。当用户点击图片时，页面将跳转至指定网址。

拖拽操作

在一些场景下，我们希望用户能够通过拖拽图片来实现一些交互操作。这时，我们可以使用 hoverCursor 属性来指示用户可以拖拽图片。

var img = new fabric.Image(imgElement, {
  hoverCursor: 'move',
});

img.set({
  left: 100,
  top: 100,
  objectType: 'drag',
  hasControls: false,
  hasBorders: false,
  lockMovementY: true,
  lockUniScaling: true,
  perPixelTargetFind: true,
});

canvas.add(img);

canvas.on('mouse:down', function(options) {
  if (options.target && options.target.objectType === 'drag') {
    canvas.setCursor('move');
    options.target.dragging = true;
    options.target.lastPosX = options.e.clientX;
    options.target.lastPosY = options.e.clientY;
  }
});

canvas.on('mouse:up', function(options) {
  options.target && (options.target.dragging = false);
  canvas.setCursor('default');
});

canvas.on('mouse:move', function(options) {
  if (options.target && options.target.dragging) {
    var target = options.target;
    target.left += options.e.clientX - target.lastPosX;
    target.top += options.e.clientY - target.lastPosY;
    target.lastPosX = options.e.clientX;
    target.lastPosY = options.e.clientY;
    canvas.renderAll();
  }
});

此处我们定义了一个 drag 类型的图片，设定 hoverCursor 属性为 'move'，表示当鼠标悬停在图片上方时，鼠标指针将变为移动图案，因此用户能够直观地知道该图片可拖拽。当用户拖拽图片时，画布的指针将改变为移动图案，当鼠标抬起时，则恢复指针为默认图案。

参考文献

• 官方文档：hoverCursor property