当前位置：首页 > news >正文

解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题

news 2025/9/6 6:43:36

解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题

问题描述

整理之前在开发一个Vue 3签名组件时，遇到的一个问题：在高分辨率屏幕上，Canvas的实际可绘制区域只有其显示大小的一半，并且鼠标的绘制位置与光标位置存在明显偏移，而在普通屏幕上则表现正常。

具体现象包括：

签名时笔迹只能在Canvas的左上角四分之一区域内出现
鼠标在Canvas右侧或下半部分移动时无法进行绘制
绘制出的线条位置与鼠标光标位置不匹配

定位问题

第一轮分析：DPR处理逻辑

初步怀疑是设备像素比（DPR）处理不当导致的。高DPR屏幕（如Retina屏）的一个CSS像素对应多个物理像素（DPR≥2），如果Canvas没有正确处理这种关系，就会导致模糊或尺寸错乱。

我最初的处理逻辑是：

获取设备的 window.devicePixelRatio
将Canvas的实际宽高设置为显示尺寸乘以DPR
将Canvas的CSS显示宽高设置为设计尺寸
使用 ctx.scale(dpr, dpr) 缩放Canvas坐标系

理论上，这套逻辑应该能正常工作，但实际却出现了问题。

第二轮分析：坐标计算与绘图上下文的冲突

进一步审查代码后，我发现了两个潜在冲突点：

坐标计算函数返回的是基于CSS显示尺寸的坐标
绘图上下文已被 scale(dpr, dpr) 缩放

虽然理论上这两者应该是自洽的，但实际表现却不对。我开始怀疑Vue的响应式系统与原生Canvas属性操作之间存在干扰。

第三轮定位：锁定根源

最终发现问题的关键在于：在 <template> 中，<canvas> 元素上保留了 :width="canvasWidth" 和 :height="canvasHeight" 的属性绑定。

冲突过程如下：

Vue通过 :width 和 :height 绑定，将 canvas 的属性设置为初始值
onMounted 钩子触发，initCanvas 函数执行
JS修改样式和属性，设置正确的DPR适配尺寸
Vue响应式系统可能再次将 canvas 的 width 和 height 属性覆盖回它所追踪的值

这种Vue声明式渲染与原生命令式DOM操作之间的混用，导致了Canvas物理尺寸和显示尺寸之间的关系变得不可预测，从而引发了绘制区域和坐标的错乱。

解决方案

最终的解决方案是彻底分离Vue的响应式控制和原生的Canvas操作，让JavaScript完全接管Canvas的尺寸设置。

核心步骤：

移除模板中的尺寸绑定：
将 <canvas> 标签从：

<canvas ref="signatureCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>

修改为：

<canvas ref="signatureCanvas"></canvas>

这样Vue就不再控制 canvas 的 width 和 height 属性。

在 onMounted 中完全由JS控制：
确保 initCanvas 函数是尺寸设置的唯一来源。

完整代码实现：

import { ref, onMounted, nextTick } from 'vue'const signatureCanvas = ref(null)
const displayWidth = 500 // 设计显示宽度
const displayHeight = 200 // 设计显示高度
let ctx = null
let dpr = 1onMounted(() => {nextTick(() => {initCanvas()// 添加窗口大小变化监听，确保响应式布局下也能正确适配window.addEventListener('resize', initCanvas)})
})const initCanvas = () => {const canvas = signatureCanvas.valueif (!canvas) return// 清除之前的上下文状态ctx = canvas.getContext('2d')dpr = window.devicePixelRatio || 1 // 获取设备像素比// 获取Canvas的实际显示尺寸const rect = canvas.getBoundingClientRect()const displayWidth = rect.widthconst displayHeight = rect.height// 1. 设置Canvas的实际像素尺寸（考虑DPR）canvas.width = Math.floor(displayWidth * dpr) // 必须取整canvas.height = Math.floor(displayHeight * dpr)// 2. 设置Canvas的CSS显示尺寸（保持原设计尺寸）canvas.style.width = `${displayWidth}px`canvas.style.height = `${displayHeight}px`// 3. 缩放绘图上下文以匹配设备像素比ctx.scale(dpr, dpr)// 4. 根据DPI调整笔迹粗细const baseWidth = 2ctx.lineWidth = baseWidthctx.lineCap = 'round'ctx.lineJoin = 'round'// 设置其他绘图样式...setupDrawingStyle()
}const getEventPos = (event) => {const canvas = signatureCanvas.valueconst rect = canvas.getBoundingClientRect()// 获取鼠标/触摸位置const clientX = event.clientX || (event.touches && event.touches[0].clientX)const clientY = event.clientY || (event.touches && event.touches[0].clientY)// 返回基于显示区域的坐标，ctx.scale已经处理了缩放return {x: clientX - rect.left,y: clientY - rect.top}
}// 绘制函数示例
const startDrawing = (event) => {const pos = getEventPos(event)ctx.beginPath()ctx.moveTo(pos.x, pos.y)isDrawing.value = true
}const draw = (event) => {if (!isDrawing.value) returnconst pos = getEventPos(event)ctx.lineTo(pos.x, pos.y)ctx.stroke()
}// 清除画布
const clearCanvas = () => {const canvas = signatureCanvas.valuectx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr)
}

响应式处理注意事项：

对于需要在窗口大小变化时自动调整的组件，还需要添加以下逻辑：

// 在组件卸载时移除事件监听器
onUnmounted(() => {window.removeEventListener('resize', initCanvas)
})// 使用防抖优化 resize 性能
let resizeTimeout = null
const handleResize = () => {clearTimeout(resizeTimeout)resizeTimeout = setTimeout(() => {initCanvas()}, 250)
}// 然后在上面的 onMounted 中改为：
window.addEventListener('resize', handleResize)