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;

，它将正常工作。希望能有所帮助：）

平移

1 个答案: