右鍵平移織物js

Question

我想用鼠標右鍵點擊我的onclick按鈕。

我當前的代碼使用

$('#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) ; 
    }) ; 

我想利用這個代碼

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); 

但我不知道如何實現它在我的畫布上。因爲我是fabricJS的新手，這可能是一個簡單的任務，但我無法解決這個問題。

我的fiddle或者如果你看看版本4，你會看到我把它放進去，但不起作用。請告訴我我做錯了什麼。這就是我想實現desired result

Answer 1

您這裏有一個錯誤：

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

應該

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

之後，它做什麼它應該http://jsfiddle.net/n3pryn3x/