Canvas固定像素矩形数量下自适应预览画布的尺寸计算问题

错误原因 #

你当前的计算逻辑本质是用预览画布总面积除以像素块总数得到单块面积，而非单块的边长，同时没有考虑原像素画的宽高比，自然会出现显示不全、尺寸异常的问题。

是否需要创作阶段的原尺寸参数 #

需要，至少需要能获取到原创作画布的网格行列数：

• 如果你存储像素画数据时同步保存了创作时的横向总块数originalCols、纵向总块数originalRows可直接使用
• 如果没存也可以从像素块数组中计算得到：取所有元素的x坐标最大值加1得到originalCols，取所有元素的y坐标最大值加1得到originalRows

正确计算公式 #

基础参数定义 #

• 预览画布的总宽：previewWidth
• 预览画布的总高：previewHeight
• 原像素画横向总块数：originalCols
• 原像素画纵向总块数：originalRows

计算步骤 #

1. 分别计算按宽、高适配的单块边长

const sizeByWidth = previewWidth / originalCols
const sizeByHeight = previewHeight / originalRows

2. 取两个值的最小值作为最终单块尺寸，保证像素画完整放入预览画布不溢出

const finalBlockSize = Math.min(sizeByWidth, sizeByHeight)

可选居中偏移计算 #

如果需要让像素画在预览画布中居中显示，可额外计算偏移量：

const offsetX = (previewWidth - originalCols * finalBlockSize) / 2
const offsetY = (previewHeight - originalRows * finalBlockSize) / 2

绘制每个像素块时，对应坐标加上偏移量即可：
绘制x = 原始x * finalBlockSize + offsetX
绘制y = 原始y * finalBlockSize + offsetY

内容的提问来源于stack exchange，提问作者GeraltDieSocke