Fabric.js平移画布时背景同步移动问题求助

Hey Roberto, sorry to hear you’ve been stuck on this for a week—let’s get this sorted out! The core issue here is that when you set a Pattern directly as the canvas backgroundColor, it’s tied to the canvas viewport (the visible area) instead of the canvas content. That’s why your background doesn’t shift along with your relativePan movements.

Here’s a straightforward fix that’ll keep your background in sync:

Step 1: Use a Background Rectangle Instead of Canvas Background #

Instead of assigning the pattern directly to canvas.backgroundColor, create a full-size rectangle, apply the pattern to its fill, and add it as the bottom-most element on your canvas. This way, the background acts like any other fabric element and will respond to viewport changes.

var canvas = new fabric.Canvas('c');
canvas.selection = false;

// Create your pattern as before
var pattern = new fabric.Pattern({
  source: 'https://cdn.seats.io/static/version/v198/chart-designer/grid.png',
  repeat: 'repeat'
});

// Make a rectangle that covers the entire canvas
var backgroundRect = new fabric.Rect({
  width: canvas.width,
  height: canvas.height,
  fill: pattern,
  selectable: false, // Prevent accidental selection
  evented: false // Don't interfere with other canvas interactions
});

// Add it to the canvas and send it to the very back
canvas.add(backgroundRect);
canvas.sendToBack(backgroundRect);

Step 2: Sync the Background with Pan Movements #

Now you just need to keep this rectangle aligned with the canvas’s viewport offset. You can do this by listening to the canvas’s pan event, which fires whenever a pan action happens:

canvas.on('pan', function() {
  // Grab the current viewport offset from the canvas transform
  var [, , , , panX, panY] = canvas.viewportTransform;
  
  // Adjust the background rectangle's position to counteract the pan
  backgroundRect.set({
    left: -panX,
    top: -panY
  });
  
  // Re-render to apply the changes
  canvas.renderAll();
});

If you’re triggering relativePan manually (not via user drag), you can sync the background right after calling relativePan:

// Example: Pan the canvas by 10px right and 10px down
canvas.relativePan(new fabric.Point(10, 10));

// Sync background immediately after pan
var [, , , , panX, panY] = canvas.viewportTransform;
backgroundRect.set({ left: -panX, top: -panY });
canvas.renderAll();

Why This Works #

By using a rectangle as your background, you’re making the pattern part of the canvas content instead of the viewport. When you pan the canvas, the viewport shifts, and adjusting the rectangle’s position ensures it stays perfectly aligned with the rest of your elements—no more awkward background shifts!

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