Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转

// 清空画布历史
canvasHistroyListRef.current = [canvasHistroyListRef.current[0]]setCanvasCurrentHistory(1)

message.success('画布清除成功！')
}

事件设置好之后，我们就可以开始监听一下这个

canvasCurrentHistory

useEffect(() => {
const { current: canvas } = canvasRef
const { current: canvasHistroyList } = canvasHistroyListRef
const context: CanvasRenderingContext2D | undefined | null = canvas?.getContext('2d')
if (!canvas || !context || canvasCurrentHistory === 0) return
context?.putImageData(canvasHistroyList[canvasCurrentHistory - 1], 0, 0)
}, [canvasCurrentHistory])

为canvas画布填充图像信息！

这样就大功告成啦！！！

9. 实现鼠标图标的变化

我们简单的处理一下，画笔模式则是画笔的图标，橡皮擦模式下鼠标是橡皮擦，移动模式下就是普通的移动图标

切换模式时候，设置一下不同的图标

const handleMouseModeChange = (event: RadioChangeEvent) => {
const { target: { value } } = event
const { current: canvas } = canvasRef
const { current: wrap } = wrapRef
 setmouseMode(value)
 if (!canvas || !wrap) return
switch (value) {
case MOVE_MODE:
canvas.style.cursor = 'move'
wrap.style.cursor = 'move'
break
case LINE_MODE:
canvas.style.cursor = `url('http://cdn.algbb.cn/pencil.ico') 6 26, pointer`
wrap.style.cursor = 'default'
break
case ERASER_MODE:
message.warning('橡皮擦功能尚未完善，保存图片会出现错误')
canvas.style.cursor = `url('http://cdn.algbb.cn/eraser.ico') 6 26, pointer`
wrap.style.cursor = 'default'
break
default:
canvas.style.cursor = 'default'
wrap.style.cursor = 'default'
break
}
}

10. 切换图片

现在的话只是一个demo状态，通过点击选择框，切换不同的图片

// 重置变换参数，重新绘制图片
useEffect(() => {
setIsLoading(true)
translatePointXRef.current = 0
translatePointYRef.current = 0
fillStartPointXRef.current = 0
fillStartPointYRef.current = 0
setCanvasScale(1)
fillImage()
}, [fillImageSrc])
const handlePaperChange = (value: string) => {
const fillImageList = {
'xueshengjia': 'http://cdn.algbb.cn/test/canvasTest.jpg',
'xueshengyi': 'http://cdn.algbb.cn/test/canvasTest2.png',
'xueshengbing': 'http://cdn.algbb.cn/emoji/30.png',
}
setFillImageSrc(fillImageList[value])
}

注意事项

注意容器的偏移量

我们需要注意一下，因为公式中的