如何在Fabric.js画布实现图片绕圆柱弯曲效果？现有代码片段失效

核心思路 #

本质是通过几何投影变换，把平面图片的像素点按照圆柱的曲率重新映射位置——就像把一张纸裹在圆柱上，每个点的位置都会对应到圆柱表面的弧线上。我们可以通过自定义Fabric.js对象的渲染逻辑，让每次渲染（包括移动对象时）都自动执行这个变换。

具体实现代码 #

我写了一个继承自fabric.Image的自定义类，重写了它的渲染方法，这样移动图片时会自动重新计算弯曲效果：

class CylinderWrappedImage extends fabric.Image {
  constructor(element, options) {
    super(element, options);
    // 配置圆柱参数，要和你背景圆柱的尺寸匹配
    this.cylinderRadius = options.cylinderRadius || 120;
    // 背景圆柱的中心X坐标（根据你的画布实际位置调整）
    this.cylinderCenterX = options.cylinderCenterX || this.canvas.width / 2;
  }

  _render(ctx) {
    ctx.save();
    const { left, top, width, height } = this;
    ctx.translate(left, top);

    // 创建离屏Canvas处理像素变形（避免污染主画布）
    const offscreenCanvas = document.createElement('canvas');
    const offscreenCtx = offscreenCanvas.getContext('2d');
    offscreenCanvas.width = width;
    offscreenCanvas.height = height;
    offscreenCtx.drawImage(this._element, 0, 0, width, height);

    const imageData = offscreenCtx.getImageData(0, 0, width, height);
    const rawData = imageData.data;
    const newImageData = offscreenCtx.createImageData(width, height);
    const newData = newImageData.data;

    const imgCenterY = height / 2;
    // 遍历每个像素，执行圆柱映射变换
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        // 计算当前点相对于图片中心的偏移
        const dx = x - width / 2;
        const dy = y - imgCenterY;

        // 把水平偏移转换成圆柱表面的弧度，再映射回平面坐标
        const angle = dx / this.cylinderRadius;
        const mappedX = this.cylinderRadius * Math.sin(angle);
        // 垂直方向做透视压缩，模拟圆柱侧面的近大远小
        const mappedY = dy * Math.cos(angle);

        // 转换回原图的像素坐标
        const sourceX = Math.round(width / 2 + mappedX);
        const sourceY = Math.round(imgCenterY + mappedY);

        // 确保坐标在图片范围内，避免越界
        if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
          const sourceIdx = (sourceY * width + sourceX) * 4;
          const targetIdx = (y * width + x) * 4;
          // 复制RGBA通道数据
          newData[targetIdx] = rawData[sourceIdx];
          newData[targetIdx + 1] = rawData[sourceIdx + 1];
          newData[targetIdx + 2] = rawData[sourceIdx + 2];
          newData[targetIdx + 3] = rawData[sourceIdx + 3];
        }
      }
    }

    offscreenCtx.putImageData(newImageData, 0, 0);
    ctx.drawImage(offscreenCanvas, 0, 0);
    ctx.restore();
  }
}

如何使用这个类 #

// 初始化Fabric画布
const canvas = new fabric.Canvas('your-canvas-id');

// 先加载背景圆柱图片
fabric.Image.fromURL('cylinder-background.jpg', (bgImg) => {
  bgImg.set({
    left: 0,
    top: 0,
    width: canvas.width,
    height: canvas.height,
    selectable: false // 禁止选中背景
  });
  canvas.add(bgImg);

  // 加载需要贴到圆柱上的图片
  fabric.Image.fromURL('your-image.jpg', (img) => {
    const wrappedImg = new CylinderWrappedImage(img.getElement(), {
      left: 150, // 初始位置
      top: 80,
      width: 220, // 图片尺寸
      height: 350,
      cylinderRadius: 130, // 要和背景圆柱的半径完全匹配
      cylinderCenterX: canvas.width / 2 // 背景圆柱的中心X坐标
    });
    canvas.add(wrappedImg);

    // 移动时自动重新渲染，效果实时保持
    wrappedImg.on('moving', () => canvas.renderAll());
  });
});

关键细节说明 #

1. 参数匹配：一定要把cylinderRadius和cylinderCenterX设置成你背景圆柱的实际参数，否则弯曲效果会和背景错位。
2. 性能优化：如果图片尺寸很大，逐像素处理可能有点卡，可以开启Fabric的对象缓存：wrappedImg.set({ objectCaching: true })，或者缩小图片尺寸后再处理。
3. 透视调整：代码里的垂直方向压缩Math.cos(angle)是简化版的透视，如果需要更真实的效果，可以根据圆柱的视角调整这个计算逻辑。

内容的提问来源于stack exchange，提问作者Pierre Olivier Tran