我使用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);
});
});
最佳答案
使用 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
关于javascript - 鼠标拖动时背景移动 Fabric.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48070947/