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/

右键单击pan fabric js

1 个答案: