Fabric 的画笔游标默认是一个十字准星，那怎样可以和PS的画笔一样呢？往下看。

效果

• 圆形的游标显示，带半透效果
• 修改画笔大小，游标大小自适应

一、实现fabric游标自定义

核心调用：

 canvas.freeDrawingCursor = `url(${资源地址}) ${x偏移量} ${Y偏移量 }, crosshair`

我们编写函数在每次更新游标大小后更新游标即可。

/**
 * 画笔游标
 */
export function fabricUpdateCustomDrawCursor(canvas: fabric.Canvas) {
    //游标大小
    const brushSize =canvas.freeDrawingBrush.width
    //游标颜色
    const brushColor = canvas.freeDrawingBrush.color 
    //绘制游标为圆形的svg，其中opacity设置为半透
    const circle = `
            <svg
                height="${brushSize}"
                fill="${brushColor}"
                viewBox="0 0 ${brushSize * 2} ${brushSize * 2}"
                width="${brushSize}"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle
                    cx="50%"
                    cy="50%"
                    r="${brushSize}" 
                    opacity="0.7"
                />
            </svg>
        `

    const cursorData = `data:image/svg+xml;base64,${window.btoa(circle)}`
    
    //设置游标数据,其中crosshair为加载失败的情况下的默认游标。
    canvas.freeDrawingCursor = `url(${cursorData}) ${brushSize / 2} ${
        brushSize / 2
    }, crosshair`
}

二、fabric游标大小根据画笔大小自适应

只需要修改brushSize 通过canvas大小自动计算即可

/**
 * 画笔游标
 */
export function fabricUpdateCustomDrawCursor(canvas: fabric.Canvas) {
    //这里拿到canvas的固定大小
    const render2DCanvas: HTMLCanvasElement = document.getElementById(
        HtmlID.renderCanvasBody
    ) as HTMLCanvasElement
    const brushSize =
        (render2DCanvas.clientWidth * canvas.freeDrawingBrush.width) /
        (canvas.getWidth() * 1.5)

    .....
}

End