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

将图像添加到画布

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

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

1 个答案: