Fabricjs在平移时移动背景答案

【问题标题】：Fabricjs move background when panningFabricjs在平移时移动背景
【发布时间】：2018-09-28 23:49:16
【问题描述】：

上周我一直在努力完成这项工作，请帮帮我。

我目前正在平移画布 (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/

我只需要背景以与对象相同的方式移动。

非常感谢！

【问题讨论】：

标签： canvas design-patterns background fabricjs panning

【解决方案1】：

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

注释掉这些行

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

它会正常工作。希望对你有帮助:)

【讨论】：