Wayne Gilliver Wayne Gilliver - 2 months ago 20
Javascript Question

right click pan fabric js

I want to be able to replace my onclick button pan with right click mouse.

My current code uses

$('#goRight').click(function(){
var units = 50 ;
var delta = new fabric.Point(units,0) ;
canvas.relativePan(delta) ;
}) ;

$('#goLeft').click(function(){
var units = 50 ;
var delta = new fabric.Point(-units,0) ;
canvas.relativePan(delta) ;
}) ;
$('#goUp').click(function(){
var units = 50 ;
var delta = new fabric.Point(0,-units) ;
canvas.relativePan(delta) ;
}) ;

$('#goDown').click(function(){
var units = 50 ;
var delta = new fabric.Point(0,units) ;
canvas.relativePan(delta) ;
}) ;


I want to use this code

function startPan(event) {
if (event.button != 2) {
return;
}
var x0 = event.screenX,
y0 = event.screenY;
function continuePan(event) {
var x = event.screenX,
y = event.screenY;
fc.relativePan({ x: x - x0, y: y - y0 });
x0 = x;
y0 = y;
}
function stopPan(event) {
$(window).off('mousemove', continuePan);
$(window).off('mouseup', stopPan);
};
$(window).mousemove(continuePan);
$(window).mouseup(stopPan);
$(window).contextmenu(cancelMenu);
};
function cancelMenu() {
$(window).off('contextmenu', cancelMenu);
return false;
}
$(canvasWrapper).mousedown(startPan);


but I dont know how to implement it on to my canvas. Because I am new to fabricJS this may be a simple task, but I cant work it out.

My fiddle or if you look at version 4 you will see that I put it in but doesnt work. Please advise me what I am doing wrong. This is what i am trying to achieve desired result

Answer

You have an error here:

fc.relativePan({ x: x - x0, y: y - y0 });

it should be

canvas.relativePan({ x: x - x0, y: y - y0 });

And after that it does what it should http://jsfiddle.net/n3pryn3x/

Comments