页面滚动时移动设备上的织物（画布）答案

【问题标题】：Fabric (Canvas) on Mobile Devices while page scroll页面滚动时移动设备上的织物（画布）
【发布时间】：2015-07-04 22:51:16
【问题描述】：

我观察到我们无法通过在移动设备上滑动手指来滚动网页，我们使用了链接到 Fabric 的 Canvas 覆盖全屏。

由于画布不允许页面滚动而导致的问题我该如何解决。

网址：http://dev-shree.com/sendfile/

请在移动端查看。

有什么办法可以解决吗？

我的画布定义代码：

(function(global) {

    "use strict";
    var canvas = new fabric.Canvas('canvas',{selection : false,controlsAboveOverlay:true,centeredScaling:true});
    var overlayimageurl = $('#myimg').val();
    canvas.setOverlayImage(overlayimageurl, canvas.renderAll.bind(canvas));
    canvas.stateful = false;

【问题讨论】：

什么是after_submission？应该是定义了一些函数来处理这个钩子，你能分享帖子的链接吗？
您是否尝试在页面和画布上实现滚动？我建议在移动视图中添加一个小工具栏而不是在顶部。
您编辑了您的问题，现在它完全是一个新问题。你不应该那样做。相反，您应该提出一个新问题。现在我的回答对你当前的问题毫无意义。所以我回滚了你的更改。请发布一个新问题，不要编辑此问题

标签： javascript jquery html canvas fabricjs

【解决方案1】：

fabricjs 画布类有allowTouchScrolling 选项Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas

var canvas = new fabric.Canvas('canvas',
    {
        selection : false,
        controlsAboveOverlay:true,
        centeredScaling:true,
        allowTouchScrolling: true
    }
);

【讨论】：

谢谢哈维尔。这对我帮助很大
如何使用fabric js实现捏缩放？
这在我的项目中不起作用，我在 iFrame 下使用 fabricjs 画布。

【解决方案2】：

蒂姆希尔说的是正确的。 allowTouchScrolling: true，似乎什么都不做。如果添加指针事件：无；到上画布和下画布，您可以影响在触摸画布时滚动页面的能力。

【讨论】：

【解决方案3】：

指针事件：无；

将禁用画布上的其他事件

【讨论】：

你能解释一下你的答案吗
你能解释一下你的答案吗
您将能够滚动画布，但画布上的拖动对象将被禁用，在您的情况下，您可能可以构建一个函数来更改 css，在我的情况下它没有帮助跨度>
是否可以只在后台使用pointer-events: none;？在这种情况下，可以在触摸背景时缩放整个页面，并在触摸对象时缩放对象：fabricjs.com/touch-events

【解决方案4】：

我遇到了同样的问题，并通过实施上述 AND 设法解决了它确保所有 FabricJS 对象（上画布、画布元素、下画布）都有 CSS；

指针事件：无；

希望对你有帮助

【讨论】：

【解决方案5】：

如果页面滚动有任何问题，您可以在 CSS 文件中使用这个：

canvas { 
    z-index: -1111;
}

【讨论】：

【解决方案6】：

如果您使用的是版本 2 或更高版本，则应更新结构 js。

来源：https://github.com/fabricjs/fabric.js/pull/5904/commits/50962efe6bbd77174cda2e9bd169c19d301edb7a

然后使用allowTouchScrolling 选项。

var canvas = new fabric.Canvas('canvas',
    {
        allowTouchScrolling: true
    }
);

【讨论】：

【解决方案7】：

感谢@wnbittle 和@alexey-altteam 对github issue#5903 的回答。使用fabricjs 4.2.0为我工作。

在fabric.js文件底部添加这个函数：

(function(){
  var defaultOnTouchStartHandler = fabric.Canvas.prototype._onTouchStart;
  fabric.util.object.extend(fabric.Canvas.prototype, { 
    _onTouchStart: function(e) { 
      var target = this.findTarget(e); 
      // if allowTouchScrolling is enabled, no object was at the
      // the touch position and we're not in drawing mode, then 
      // let the event skip the fabricjs canvas and do default
      // behavior
      if (this.allowTouchScrolling && !target && !this.isDrawingMode) { 
        // returning here should allow the event to propagate and be handled
        // normally by the browser
        return; 
      } 

      // otherwise call the default behavior
      defaultOnTouchStartHandler.call(this, e); 
    } 
  });
})();

【讨论】：