右键单击pan fabric js

韦恩·吉利佛(Wayne Gilliver)

我希望能够用鼠标右键替换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,您会发现我将其放入,但无法正常工作。请告诉我我在做什么错。这就是我想要达到的预期结果

塞尔久

您在这里有一个错误:

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

它应该是

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

之后,它会执行应有的操作http://jsfiddle.net/n3pryn3x/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Fabric JS右键单击选择对象

来自分类Dev

右键单击Cytoscape JS Qtip

来自分类Dev

防止Fabric.js中的单击和拖动多选

来自分类Dev

单击Fabric.js画布时如何获取图像的src?

来自分类Dev

fabric.js单击按钮返回未定义

来自分类Dev

使用React JS右键单击菜单

来自分类Dev

Fabric JS父子对象

来自分类Dev

Fabric JS中的BringForward

来自分类Dev

Fabric JS 对象缩放

来自分类Dev

画布旋转 - Fabric js

来自分类Dev

如何使用Angular JS在图像上实现右键单击

来自分类Dev

将arcgis js api弹出单击事件更改为右键

来自分类Dev

如何在p5.js中启用右键单击?

来自分类Dev

如何仅通过Fabric.js单击实际内容来选择对象

来自分类Dev

在fabric.js中,每个事件都会触发按钮单击事件

来自分类Dev

Fabric.js-将对象创建附加到鼠标单击

来自分类Dev

Fabric.js的几何形状

来自分类Dev

如何设置Fabric.js?

来自分类Dev

改善Fabric.js性能

来自分类Dev

Fabric.js计数对象

来自分类Dev

图像数据fabric.js

来自分类Dev

Fabric.js drawImage替代

来自分类Dev

图像数据fabric.js

来自分类Dev

Fabric.js drawImage替代

来自分类Dev

在Canvas中单击形状(fabric.js的对象)时显示自定义上下文菜单

来自分类Dev

在Canvas中单击形状(fabric.js的对象)时显示自定义上下文菜单

来自分类Dev

Fabric.js-重建和商业使用

来自分类Dev

Fabric.js画布图像抗锯齿

来自分类Dev

如何激活Fabric js IText的光标?