如何使用fabric.js使画布背景可拖动并在画布内移动？答案

【问题标题】：How to make canvas background draggable and move within canvas using fabrics.js?如何使用fabric.js使画布背景可拖动并在画布内移动？
【发布时间】：2016-01-03 10:33:11
【问题描述】：

是否可以使用 fabric.js 库拖动画布背景？我想拖动画布背景图像，但我无法在画布上应用任何方法方法来执行相同的操作。

我必须使用以下代码设置画布背景：

var imgsrc = 'gallery/pic1.jpg';
    canvas.setBackgroundImage(imgsrc,
        canvas.renderAll.bind(canvas), {
           height:canvas.height,
           width:canvas.width,
            top: 0,
            left: 0,           
    });
    canvas.renderAll();

上面的代码在画布上设置了背景，但它不允许在画布标准上拖动背景。

【问题讨论】：

我认为你不能那样做。但是您可以将图像添加为普通的fabric.Image，方法是从中删除控件和边框，将hasBorders 和hasControls 设置为false。但是，请确保图像位于图层堆栈的底部，以使其像背景一样工作。

标签： javascript jquery canvas html5-canvas fabricjs

【解决方案1】：

渲染图像后试试这个：

var objects = canvas.getObjects(); objects[0].selectable = true; canvas.renderAll();

希望有帮助

【讨论】：