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);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.