Html5 Canvas实现图片标志、缩放、移动和生涯汗青状态成果 （附转换公式）

<div className="mark-paper__wrap" ref={wrapRef}> <canvas ref={canvasRef} className="mark-paper__canvas"> <p>很痛惜，这个东东与您的电脑不搭！</p> </canvas> <div className="mark-paper__sider" /> </div>

我们独一必要的一点就是，容器必要配置属性 overflow: hidden 用来潜匿内部canvas画布溢出的内容，也就是说，我们要节制我们可视的地区。同时我们必要动态获取容器宽高来为canvas配置尺寸

2. 初始化canvas画布与添补图片

我们可以弄个要领来初始化而且添补画布，以下截取首要部门，着实就是为canvas画布配置尺寸与添补我们的图片

const fillImage = async () => { // 此处省略... const img: HTMLImageElement = new Image() img.src = await getURLBase64(fillImageSrc) img.onload = () => { canvas.width = img.width canvas.height = img.height context.drawImage(img, 0, 0) // 配置变革基点，为画布容器中央 canvas.style.transformOrigin = `${wrap?.offsetWidth / 2}px ${wrap?.offsetHeight / 2}px` // 破除上一次变革的结果 canvas.style.transform = '' } }

3. 监听canvas画布的各类鼠标变乱

这个节制移动的话，我们起首可以弄一个要领来监听画布鼠标的各类变乱，可以区分差异的模式来举办差异的变乱处理赏罚

const handleCanvas = () => { const { current: canvas } = canvasRef const { current: wrap } = wrapRef const context: CanvasRenderingContext2D | undefined | null = canvas?.getContext('2d') if (!context || !wrap) return // 破除上一次配置的监听，以防获取参数错误 wrap.onmousedown = null wrap.onmousedown = function (event: MouseEvent) { const downX: number = event.pageX const downY: number = event.pageY // 区分我们此刻选择的鼠标模式：移动、画笔、橡皮擦 switch (mouseMode) { case MOVE_MODE: handleMoveMode(downX, downY) break case LINE_MODE: handleLineMode(downX, downY) break case ERASER_MODE: handleEraserMode(downX, downY) break default: break } }

4. 实现画布移动

这个就较量好办啦，我们只必要操作鼠标按下的坐标，和我们拖动的间隔就可以实现画布的移动啦，由于涉及到每次移动都必要计较最新的位移间隔，我们可以界说几个变量来举办计较。

这里监听的是容器的鼠标变乱，而不是canvas画布的变乱，由于这样子我们可以再移动高出界线的时辰也可以举办移动操纵

简朴的总结一下：

传入鼠标按下的坐标

计较当前位移间隔，并更新css变革结果

鼠标抬起时更新最新的位移状态

// 界说一些变量，来生涯当前/最新的移动状态 // 当前位移的间隔 const translatePointXRef: MutableRefObject<number> = useRef(0) const translatePointYRef: MutableRefObject<number> = useRef(0) // 上一次位移竣事的位移间隔 const fillStartPointXRef: MutableRefObject<number> = useRef(0) const fillStartPointYRef: MutableRefObject<number> = useRef(0) // 移动时辰的监听函数 const handleMoveMode = (downX: number, downY: number) => { const { current: canvas } = canvasRef const { current: wrap } = wrapRef const { current: fillStartPointX } = fillStartPointXRef const { current: fillStartPointY } = fillStartPointYRef if (!canvas || !wrap || mouseMode !== 0) return // 为容器添加移动变乱，可以在空缺处移动图片 wrap.onmousemove = (event: MouseEvent) => { const moveX: number = event.pageX const moveY: number = event.pageY // 更新此刻的位移间隔，值为：上一次位移竣事的坐标+移动的间隔 translatePointXRef.current = fillStartPointX + (moveX - downX) translatePointYRef.current = fillStartPointY + (moveY - downY) // 更新画布的css变革 canvas.style.transform = `scale(${canvasScale},${canvasScale}) translate(${translatePointXRef.current}px,${translatePointYRef.current}px)` } wrap.onmouseup = (event: MouseEvent) => { const upX: number = event.pageX const upY: number = event.pageY // 打消变乱监听 wrap.onmousemove = null wrap.onmouseup = null; // 鼠标抬起时辰，更新“上一次独一竣事的坐标” fillStartPointXRef.current = fillStartPointX + (upX - downX) fillStartPointYRef.current = fillStartPointY + (upY - downY) } }

5. 实现画布缩放

画布缩放我首要通过右侧的滑动条以及鼠标滚轮来实现，起首我们再监听画布鼠标变乱的函数中加一下监听滚轮的变乱

总结一下：

监听鼠标滚轮的变革

更新缩放倍数，并改变样式

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!