移动设备上页面滚动时的面料（画布）问题

Question

我发现当我们在移动设备上使用覆盖整个屏幕的 Fabric 连接到 Canvas 时，无法通过手指滑动来滚动网页。

问题是由于 Canvas 不允许页面滚动，该如何解决呢？

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

请在移动视图中查看。

有没有什么方法可以解决呢？

我 Canvas 的定义代码如下：

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

- mydeve

---

after_submission是什么？它应该是一个定义用于处理此钩子的函数，您能分享该帖子的链接吗？ - Dharmang

你是否想在页面和画布上实现滚动？我建议在移动视图中添加一个小工具栏。 - Ben

你编辑了你的问题，现在它完全是一个新问题。你不应该这样做。相反，你应该提出一个新问题。现在我的回答和你当前的问题毫无意义，所以我撤销了你的更改。请发布一个新的问题，而不是编辑这个问题。 - Khawer Zeshan

Answer 1

fabricjs canvas 类有 allowTouchScrolling 选项, 该选项表示当使用触摸屏并在画布上拖动时, 浏览器是否可以滚动

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

- Khawer Zeshan

---

谢谢Khawer。这对我帮助很大。 - Salman Ullah Khan

如何使用Fabric.js实现捏合缩放？ - Salman Ullah Khan

这在我的项目中不起作用，我正在使用嵌入iFrame的fabricjs画布。 - Neeraj Rathod

Answer 2

蒂姆·希尔所说的是正确的。allowTouchScrolling: true似乎没有任何作用。如果您将pointer-events：none;添加到upper-canvas和lower-canvas中，则可以影响触摸画布时滚动页面的能力。

- James Baird

Answer 3

pointer-events: none;

将禁用画布上的其他事件。

- M_Badrah

---

你能否请详细解释一下你的答案？ - ahmednawazbutt

你能否请详细解释一下你的答案？ - ahmednawazbutt

你可以滚动画布，但无法拖动画布上的对象。在你的情况下，你可以构建一个函数来改变CSS，在我的情况下这并没有帮助。 - M_Badrah

在背景上是否可能只有 pointer-events: none;？在这种情况下，当触摸背景时可以缩放整个页面，并在触摸对象时缩放对象：http://fabricjs.com/touch-events - Simone

Answer 4

我曾经遇到过同样的问题，并通过实施上述方法以及确保所有FabricJS对象（upper-canvas、canvas元素、lower-canvas）具有以下CSS来解决它：

pointer-events: none;

希望这可以帮到你。

- Tim Hill

Answer 5

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

```css html { scroll-behavior: smooth; } ```

这将使页面平滑滚动。

canvas { 
    z-index: -1111;
}

- Adil Hossain Mallick

Answer 6

所有的功劳归功于@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); 
    } 
  });
})();

- moghwan

---

谢谢，这解决了我在Fabric 5.3上的滚动问题。 - undefined

Answer 7

如果您正在使用2或更高版本，则应更新fabric js。

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

然后使用allowTouchScrolling选项。

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

- Ismail Rubad