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

Question

I'm using Fabric.js to present a floor plan, I use a background image and use Fabric.js to add icons for electrical devices, when i drag the mouse, only the icons moving and the background wallpaper standing still, so how can i make the background move as well ?

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

Add image to canvas using fromURL

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

Here is updated jsFiddle