fabric.js自由绘制模式自定义光标被绘制路径覆盖解决方案

方法1：自定义生成dom跟随鼠标


if (!cursor2) {

  cursor2 = document.createElement('div')
  cursor2.id = 'huangkkk'
  cursor2.style.position = 'absolute'
  cursor2.style.zIndex = 9999
  cursor2.style.width = `${state.brushSize}px`
  cursor2.style.height = `${state.brushSize}px`
  cursor2.style.borderRadius = '50%'
  cursor2.style.border = '1px solid black'
  cursor2.style.backgroundColor = `rgba(255, 255, 255, 1) `
  cursor2.style.opacity = state.bushOpacity // 直接控制透明度
  cursor2.style.pointerEvents = 'none'
  document.body.appendChild(cursor2)
}

if (cursor2) {

  const absoluteX = options.e.clientY // 相对于浏览器窗口
  const absoluteY = options.e.clientX
  requestAnimationFrame(() => {
    cursor2.style.top = `${absoluteX - state.brushSize / 2}px`
    cursor2.style.left = `${absoluteY - state.brushSize / 2}px`
    cursor2.style.display = 'block'
  })
}

方法2：自定义生成dom跟随鼠标
function createTransparentCursor(url, opacity, brushSize) {
return new Promise((resolve) => {

const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
  const canvas = document.createElement('canvas');
  canvas.width = brushSize; // 输出宽度（30）
  canvas.height = brushSize; // 输出高度（30）
  const ctx = canvas.getContext('2d');
  ctx.globalAlpha = opacity;
  
  // 缩放绘制图片：从 60×60 缩放到 30×30
  ctx.drawImage(
    img, 
    0, 0, img.width, img.height, // 源图片裁剪区域（全部）
    0, 0, brushSize, brushSize  // 目标 Canvas 绘制区域（缩放到 30×30）
  );
  
  resolve(canvas.toDataURL());
};
img.src = url;

});
}

// 调用函数（假设 brushSize = 30）
createTransparentCursor('your-image.png', 0.5, 30)
.then((dataURL) => {

canvas.freeDrawingCursor = `url(${dataURL}) 15 15, auto`;
// 热点设为 15 15（中心点，因为图片现在是 30×30）

});

缺点：圆形光标透明度无法与绘制路径透明度匹配，视觉效果不一致