右击pan织物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新手，这可能是一个简单的任务，但我无法解决。

我的小提琴，或者如果你看一下第4版，你会发现我把它放进去了，但不起作用。请告诉我我做错了什么。这就是我想要实现的期望结果

Answer 1

您在这里有一个错误：

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

它应该是

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

在那之后，它做了它应该做的http://jsfiddle.net/n3pryn3x/