如何在fabric js中更改旋转光标

Question

我想当鼠标悬停在旋转控件上时获得顺时针旋转的圆圈图标，而不是默认的十字线图标。

我尝试使用设置 mtr 属性，但无法获得预期结果。这是定义结构控件的代码片段

export const FabricControlOverrides = {
  setup() {
    function renderCustomCircleControl (ctx, left, top, styleOverride, fabricObject) {
      styleOverride = styleOverride || {};
      var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,
        ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,
        transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?
          styleOverride.transparentCorners : fabricObject.transparentCorners,
        methodName = transparentCorners ? 'stroke' : 'fill',
        stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),
        myLeft = left,
        myTop = top, size;
      ctx.save();
      ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
      ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor;
      if (xSize > ySize) {
        size = xSize;
        ctx.scale(1.0, ySize / xSize);
        myTop = top * xSize / ySize;
      }
      else if (ySize > xSize) {
        size = ySize;
        ctx.scale(xSize / ySize, 1.0);
        myLeft = left * ySize / xSize;
      }
      else {
        size = xSize;
      }
      ctx.lineWidth = 1 * this.borderScaleFactor; 
      ctx.beginPath();
      ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false);
      ctx[methodName]();
      if (stroke) {
        ctx.stroke();
      }
      ctx.restore();
    }

    fabric.controlsUtils.renderCircleControl = renderCustomCircleControl;

    fabric.Object.prototype.set({
      padding: fabricObjectControls.padding,
      borderColor: fabricObjectControls.borderColor,
      borderScaleFactor: fabricObjectControls.borderScaleFactor,
      transparentCorners: fabricObjectControls.transparentCorners,
      cornerStyle: fabricObjectControls.cornerStyle,
      cornerSize: fabricObjectControls.cornerSize,
      cornerColor: fabricObjectControls.cornerColor,
      cornerStrokeColor: fabricObjectControls.cornerStrokeColor
    });
  }
}

Answer 1

使用预定义光标

FabricJS 允许您在将鼠标悬停在对象上或通过将hoverCursor 和 moveCursor 属性设置为预定义的光标值来移动对象时轻松更改光标。

canvas.defaultCursor = 'default';
canvas.hoverCursor = 'grab';
canvas.moveCursor = 'grabbing';

可以在此处找到光标的可能值：https://www.w3schools.com/cssref/pr_class_cursor.php

使用自定义光标 从 FabricJS 4.6 开始，您还可以使用 PNG 图像来使用自定义光标：

const cursorUrl = 'path-to-your-cursor-image.png';
canvas.defaultCursor = `url("${cursorUrl}"), auto`;
canvas.hoverCursor = `url("${cursorUrl}"), auto`;
canvas.moveCursor = `url("${cursorUrl}"), auto`;

将 path-to-your-cursor-image.png 替换为光标图像的路径。

一个例子：

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

canvas.on('mouse:over', function (e) {
  const target = e.target;

  // Check if the mouse is over a control point and the object is rotatable.
  if (target && target.hasControls && target.hasRotatingPoint) {
    const pointer = canvas.getPointer(e.e);
    const mouseX = pointer.x;
    const mouseY = pointer.y;

    // Loop over all control points and check if the mouse is over a rotation control.
    for (const controlKey in target.controls) {
      const control = target.controls[controlKey];

      if (control && control.getRotationAction) {
        const action = control.getRotationAction(mouseX, mouseY, e.e, target);
        if (action === 'rotate') {
          // Set custom cursor when the mouse is over a rotation control.
          canvas.hoverCursor = 'url("path-to-your-rotation-cursor.png"), auto';
          break;
        }
      }
    }
  }
});

canvas.on('mouse:out', function (e) {
  // Reset to default cursor when the mouse is out.
  canvas.hoverCursor = 'default';
});