如何正确缩放HTML5 Canvas以避免模糊并保持精确绘制

/**
 * 对HTML5 Canvas进行高DPI缩放，以避免在高分辨率屏幕上出现模糊。
 *
 * @param canvas HTMLCanvasElement 实例
 * @param ctx CanvasRenderingContext2D 实例
 * @param parentRef Canvas父容器的引用，用于获取其逻辑尺寸
 */
const scaleCanvasForHighDPI = (
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  parentRef: React.RefObject<HTMLElement> // 或其他方式获取父容器
): void => {
  const canvasParent = parentRef.current;
  if (!canvasParent) {
    console.warn("Canvas父容器未找到，无法进行DPI缩放。");
    return;
  }

  const { devicePixelRatio } = window;
  // 获取父容器的实际CSS尺寸，这将是Canvas的逻辑尺寸
  const { width: logicalWidth, height: logicalHeight } = canvasParent.getBoundingClientRect();

  // 1. 设置Canvas的物理像素尺寸
  // Canvas的width和height属性决定了其内部的物理像素数量
  canvas.width = logicalWidth * devicePixelRatio;
  canvas.height = logicalHeight * devicePixelRatio;

  // 2. 缩放Canvas绘图上下文
  // 所有的绘图操作都将被devicePixelRatio倍放大，以适应更多的物理像素
  ctx.scale(devicePixelRatio, devicePixelRatio);

  // 3. 设置Canvas的CSS尺寸
  // 这会控制Canvas在页面上的显示大小，使其与父容器的逻辑尺寸匹配
  canvas.style.width = `${logicalWidth}px`;
  canvas.style.height = `${logicalHeight}px`;

  console.log(`Canvas已缩放：逻辑尺寸 ${logicalWidth}x${logicalHeight}px，
               物理尺寸 ${canvas.width}x${canvas.height}px，
               DPI: ${devicePixelRatio}`);
};

// 错误的居中计算示例
const centerRectCoordsWrong = (rectWidth: number, rectHeight: number, canvas: HTMLCanvasElement) => {
  // 这里的canvas.width/height 已经是物理像素了，会导致计算出错
  const startX = canvas.width / 2 - rectWidth / 2;
  const startY = canvas.height / 2 - rectHeight / 2;
  return { startX, startY };
};

/**
 * 计算矩形在Canvas逻辑中心位置的坐标。
 *
 * @param rectWidth 矩形的逻辑宽度
 * @param rectHeight 矩形的逻辑高度
 * @param canvas HTMLCanvasElement 实例
 * @returns 包含起始X和Y坐标的对象
 */
const calculateCenterRectCoords = (
  rectWidth: number,
  rectHeight: number,
  canvas: HTMLCanvasElement
) => {
  // 获取Canvas的逻辑（CSS）尺寸
  // 注意：这里需要确保 canvas.style.width/height 已经被设置，
  // 或者直接使用 scaleCanvasForHighDPI 中计算出的 logicalWidth/Height
  const logicalCanvasWidth = parseFloat(canvas.style.width || canvas.width.toString());
  const logicalCanvasHeight = parseFloat(canvas.style.height || canvas.height.toString());

  // 如果Canvas的style尺寸在加载时不可见（如在另一个tab），
  // 更好的做法是将 scaleCanvasForHighDPI 中计算出的 logicalWidth/Height 传递进来
  // 或者确保在调用此函数时，canvas.style.width/height 已经有值。
  // 在实际应用中，通常会存储这些逻辑尺寸。

  // 假设我们已经有了逻辑尺寸
  // const logicalCanvasWidth = dimensions.width; // 从 scaleCanvasForHighDPI 获取
  // const logicalCanvasHeight = dimensions.height; // 从 scaleCanvasForHighDPI 获取

  const startX = logicalCanvasWidth / 2 - rectWidth / 2;
  const startY = logicalCanvasHeight / 2 - rectHeight / 2;

  return {
    startX,
    startY,
    endX: startX + rectWidth,
    endY: startY + rectHeight,
  };
};

// 示例绘制函数
const drawRectangle = (
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  width: number,
  height: number,
  color: string = 'blue'
) => {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
};

import React, { useRef, useEffect, useCallback, useState } from 'react';
import style from './CanvasComponent.module.css'; // 假设有CSS模块

interface Rect {
  width: number;
  height: number;
  // ... 其他属性
}

const CanvasComponent: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasParentRef = useRef<HTMLDivElement>(null); // Canvas的父容器引用
  const [logicalCanvasDimensions, setLogicalCanvasDimensions] = useState<{ width: number; height: number } | null>(null);

  // 矩形数据
  const mainRect: Rect = { width: 100, height: 50 };

  // 高DPI缩放函数 (同上)
  const scaleCanvasForHighDPI = useCallback(() => {
    const canvas = canvasRef.current;
    const canvasParent = canvasParentRef.current;
    if (!canvas || !canvasParent) return;

    const { devicePixelRatio } = window;
    const { width: logicalWidth, height: logicalHeight } = canvasParent.getBoundingClientRect();

    canvas.width = logicalWidth * devicePixelRatio;
    canvas.height = logicalHeight * devicePixelRatio;

    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.scale(devicePixelRatio, devicePixelRatio);
    }

    canvas.style.width = `${logicalWidth}px`;
    canvas.style.height = `${logicalHeight}px`;

    setLogicalCanvasDimensions({ width: logicalWidth, height: logicalHeight }); // 存储逻辑尺寸
  }, []);

  // 计算矩形中心坐标 (使用存储的逻辑尺寸)
  const calculateCenterRectCoords = useCallback((rect: Rect) => {
    if (!logicalCanvasDimensions) {
      console.warn("逻辑Canvas尺寸未初始化，无法计算居中坐标。");
      return { startX: 0, startY: 0, endX: rect.width, endY: rect.height };
    }
    const { width: logicalCanvasWidth, height: logicalCanvasHeight } = logicalCanvasDimensions;
    const startX = logicalCanvasWidth / 2 - rect.width / 2;
    const startY = logicalCanvasHeight / 2 - rect.height / 2;

    return {
      startX,
      startY,
      endX: startX + rect.width,
      endY: startY + rect.height,
    };
  }, [logicalCanvasDimensions]);

  // 绘制所有内容
  const drawAllContent = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx || !logicalCanvasDimensions) return;

    // 清空Canvas
    ctx.clearRect(0, 0, logicalCanvasDimensions.width, logicalCanvasDimensions.height);

    // 绘制主矩形
    const centerCoords = calculateCenterRectCoords(mainRect);
    if (centerCoords) {
      ctx.fillStyle = 'blue';
      ctx.fillRect(centerCoords.startX, centerCoords.startY, mainRect.width, mainRect.height);
    }

    // 绘制其他基于主矩形的矩形（示例）
    if (centerCoords) {
        ctx.fillStyle = 'red';
        // 假设在主矩形右侧偏移20px
        ctx.fillRect(centerCoords.endX + 20, centerCoords.startY, 50, 30);
    }

  }, [logicalCanvasDimensions, calculateCenterRectCoords, mainRect]);

  // 挂载时执行缩放和初始绘制
  useEffect(() => {
    scaleCanvasForHighDPI();
    // 监听窗口大小变化以重新缩放和绘制
    const handleResize = () => {
      scaleCanvasForHighDPI();
      drawAllContent(); // 重新绘制
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [scaleCanvasForHighDPI, drawAllContent]);

  // 当逻辑尺寸或绘制内容变化时重新绘制
  useEffect(() => {
    if (logicalCanvasDimensions) {
      drawAllContent();
    }
  }, [logicalCanvasDimensions, drawAllContent]);

  return (
    <div ref={canvasParentRef} className={style.canvasContainer}>
      <canvas ref={canvasRef} className={style.canvas} />
    </div>
  );
};

export default CanvasComponent;

/* CanvasComponent.module.css */
.canvasContainer {
  width: 100%; /* 父容器占据100%宽度 */
  height: 400px; /* 或者其他固定高度 */
  border: 1px solid #ccc;
  display: flex; /* 确保Canvas可以填充 */
  justify-content: center;
  align-items: center;
}

.canvas {
  /* Canvas的CSS尺寸由JS设置，这里不需要额外设置width/height */
  /* 可以设置一些默认样式，如背景色 */
  background-color: #f0f0f0;
  display: block; /* 避免底部空白 */
}