javascript - 鼠标拖动时背景移动 Fabric.js

Question

我使用Fabric.js来呈现平面图，我使用背景图像并使用Fabric.js添加电气设备的图标，当我拖动鼠标时，只有图标在移动，背景壁纸保持静止，那么我怎样才能让背景也移动呢？

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

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

canvas.add(circle);

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) {
        debugger;
        var units = 10;
        var delta = new fabric.Point(e.e.movementX, e.e.movementY);
        canvas.relativePan(delta);
    }
});

$(function () {
    $('#zoomIn').click(function () {
        canvas.setZoom(canvas.getZoom() * 1.1);
    });

    $('#zoomOut').click(function () {
        canvas.setZoom(canvas.getZoom() / 1.1);
    });
});

My fiddle

Answer 1

使用 fromURL 将图像添加到 Canvas

fabric.Image.fromURL(imgURL, function(oImg) {
  oImg.set({
    "left": 0,
    "top": 0,
    "scaleX": canvas.width / oImg.width,
    "scaleY": canvas.height / oImg.height
  })
  canvas.renderAll();
});

此处已更新 jsFiddle