Fabricjs在平移时移动背景

Question

我一直在努力使这项工作有效，请给我帮助。

我目前正在平移画布（relativePan），但是我也无法移动背景。我尝试过使用图案背景，但是当修改偏移量时，整个背景都会移动。

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

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

canvas.backgroundColor = pattern;
setTimeout(function(){canvas.renderAll();}, 10);

var circle = new fabric.Circle({
    radius: 20,
    fill: 'green',
    left: 100,
    top: 100,
    selectable: false
});

var triangle = new fabric.Triangle({
    fill: 'green',
    left: 200,
    top: 200,
    selectable: false
});

canvas.add(circle, triangle);

var panning = false;
canvas.on('mouse:up', function (e) {
    panning = false;
});

canvas.on('mouse:down', function (e) {
    panning = true;
});
canvas.on('mouse:move', function (e) {
    if (panning && e && e.e) {
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
        pattern.offsetX += e.e.movementX;
        pattern.offsetY += e.e.movementY;
        canvas.renderAll();
    }
});    

http://jsfiddle.net/w8xr15Lf/

我只需要背景移动对象的方式即可。

非常感谢！

Answer 1

您正在更改图案对象的偏移量。

注释这些行

// pattern.offsetX += e.e.movementX;
// pattern.offsetY += e.e.movementY;

它将正常工作。希望对您有所帮助：）