const moveX: number = event.pageX - offsetLeft
const moveY: number = event.pageY - offsetTop
const { pointX, pointY } = generateLinePoint(moveX, moveY)
// 开始绘制画笔线条~
context.lineTo(pointX, pointY)
context.stroke()
}
canvas.onmouseup = () => {
context.closePath()
canvas.onmousemove = null
canvas.onmouseup = null
}
}
7. 橡皮擦的实现
橡皮擦目前还有点问题，现在的话是通过将
canvas 画布的背景图片 +
globalCompositeOperation 这个属性来模拟橡皮擦的实现，不过，这时候图片生成出来之后，橡皮擦的痕迹会变成白色，而不是透明此步骤与画笔实现差不多，只有一点点小变动
设置属性
context.globalCompositeOperation = "destination-out"
// 目前橡皮擦还有点问题，前端显示正常，保存图片下来，擦除的痕迹会变成白色
const handleEraserMode = (downX: number, downY: number) => {
const { current: canvas } = canvasRef
const { current: wrap } = wrapRef
const context: CanvasRenderingContext2D | undefined | null = canvas?.getContext('2d')
if (!canvas || !wrap || !context) return const offsetLeft: number = canvas.offsetLeft
const offsetTop: number = canvas.offsetTop
downX = downX - offsetLeft
downY = downY - offsetTop
const { pointX, pointY } = generateLinePoint(downX, downY)
context.beginPath()
context.moveTo(pointX, pointY)
canvas.onmousemove = null
canvas.onmousemove = (event: MouseEvent) => {
const moveX: number = event.pageX - offsetLeft
const moveY: number = event.pageY - offsetTop
const { pointX, pointY } = generateLinePoint(moveX, moveY)
context.globalCompositeOperation = "destination-out"
context.lineWidth = lineWidth
context.lineTo(pointX, pointY)
context.stroke()
}
canvas.onmouseup = () => {
context.closePath()
canvas.onmousemove = null
canvas.onmouseup = null
}
}
8. 撤销与恢复的功能实现
这个的话，我们首先需要了解常见的撤销与恢复的功能的逻辑 分几种情况吧
若当前状态处于第一个位置，则不允许撤销
若当前状态处于最后一个位置，则不允许恢复
如果当前撤销了，然而更新了状态，则取当前状态为最新的状态（也就是说不允许恢复了，这个刚更新的状态就是最新的）
画布状态的更新
所以我们需要设置一些变量来存，状态列表，与当前画笔的状态下标
// 定义参数存东东
const canvasHistroyListRef: MutableRefObject<ImageData[]> = useRef([])
const [canvasCurrentHistory, setCanvasCurrentHistory] = useState<number>(0)
