如何为Fabric.js可平移缩放画布添加动态重复点阵背景？

方案一：基于 Fabric.js Pattern 的动态点阵背景 #

该方案直接利用 Fabric.js 图案系统，让点阵背景与画布视口变换完全同步，同时保留网格参数的动态可配置性。

实现步骤 #

1. 定义网格动态参数

const gridConfig = {
  size: 20, // 网格间距
  dotSize: 2, // 点阵大小
  dotColor: '#e0e0e0', // 点阵颜色
};

2. 生成单个点阵的 SVG 模板
   用 SVG 生成包含单个点阵的图形，作为重复图案的基础：

function generateDotSvg(config: typeof gridConfig): string {
  const { size, dotSize, dotColor } = config;
  return `
    <svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
      <circle cx="${size/2}" cy="${size/2}" r="${dotSize}" fill="${dotColor}" />
    </svg>
  `.trim();
}

3. 创建 Fabric.js Pattern 并绑定到画布
   将 SVG 转换为 Fabric 的 Pattern 对象，设置为画布背景：

import { fabric } from 'fabric';

const canvas = new fabric.Canvas('canvas', {
  enableRetinaScaling: false, // 避免 retina 屏幕下的缩放偏差
});

const dotSvg = generateDotSvg(gridConfig);
const pattern = new fabric.Pattern({
  source: dotSvg,
  repeat: 'repeat',
});

canvas.setBackgroundImage(pattern, canvas.renderAll.bind(canvas));

4. 同步图案与视口变换
   监听画布视口变换事件，实时更新图案的偏移和缩放，确保点阵与网格对齐：

canvas.on('viewport:transform', () => {
  const [scaleX, , , scaleY, offsetX, offsetY] = canvas.viewportTransform;
  // 抵消画布平移，缩放与画布缩放反向同步以保持点阵大小不变
  pattern.offsetX = -offsetX / scaleX;
  pattern.offsetY = -offsetY / scaleY;
  pattern.scaleX = 1 / scaleX;
  pattern.scaleY = 1 / scaleY;
  canvas.renderAll();
});

若你的 Fabric.js 版本无viewport:transform事件，可改用after:render事件，或同时监听pan、zoom事件。

方案二：改进 CSS 背景同步方案 #

若倾向保留原有 CSS 背景方案，可通过监听画布视口变换精准调整 CSS 属性，避免mouse:move的冗余触发：

实现步骤 #

1. CSS 背景定义

#canvas {
  background-image: radial-gradient(circle, #e0e0e0 2px, transparent 2px);
  background-size: 20px 20px; /* 初始网格间距 */
}

2. 监听视口变换并更新 CSS
   利用 Fabric.js 视口变换事件，实时计算并更新背景的位置和尺寸：

canvas.on('viewport:transform', () => {
  const [scale] = canvas.viewportTransform;
  const [, , , , offsetX, offsetY] = canvas.viewportTransform;
  const canvasElement = canvas.getElement() as HTMLElement;
  
  // 背景尺寸：网格大小 / 画布缩放（保持点阵大小不变）
  const bgSize = `${gridConfig.size / scale}px`;
  // 背景位置：抵消画布平移，按缩放比例计算
  const bgPosX = `${-offsetX / scale}px`;
  const bgPosY = `${-offsetY / scale}px`;
  
  canvasElement.style.backgroundSize = `${bgSize} ${bgSize}`;
  canvasElement.style.backgroundPosition = `${bgPosX} ${bgPosY}`;
});

优势对比 #

• Fabric.js Pattern 方案：完全融入 Fabric 渲染系统，不会出现 CSS 与画布渲染层错位，适配复杂视口变换场景。
• CSS 改进方案：实现简单，性能开销小，适合基础场景。

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