Fabric.js - 如何在没有绘图模式的情况下使用自定义光标答案

【问题标题】：Fabric.js - how to use custom cursors without drawing modeFabric.js - 如何在没有绘图模式的情况下使用自定义光标
【发布时间】：2018-05-28 15:23:30
【问题描述】：

我不知道如何设置光标图像以在画布上绘图。我注意到我只能在

时设置它

FABRICCANVAS.isDrawingMode = true;

但是，问题是我已经创建了专用的绘图工具，我不想使用 Fabric.js 中内置的工具。

我的代码示例（无法正常工作）：

const FABRICCANVAS = new fabric.Canvas('canvas-draft');
const DRAFT = document.querySelector(".upper-canvas");
button.addEventListener('click', () => {
    DRAFT.style.cursor = 'url(img/cursors/image.png) 0 34, auto';
});

但是当我将 isDrawingMode 设置为 true 时，它可以工作。不幸的是，我不想使用内置的绘图工具，因为它们会留下路径（以后可以在 FABRICCANVAS.selection = true 时移动）。

你知道这个问题的任何解决方案吗？

【问题讨论】：

悬停在您想要自定义光标的画布上？？
是的，没错。例如，它可能是粉笔的图像。
你正在使用铅笔画笔吗？
不，我创建了自己的绘图工具（在 Fabric.js 中不可用）。
FABRICCANVAS.hoverCursor = 'url(img/cursors/image.png) 0 34, auto'; 这样使用。

标签： javascript canvas drawing fabricjs

【解决方案1】：

对于 Canvas，您可以设置不同的光标：

例如

canvas.hoverCursor
canvas.defaultCursor
canvas.moveCursor

您可以对光标图像使用绝对或相对路径：

canvas.moveCursor = 'url("...") 10 10, crosshair';

【讨论】：