Question

我喜欢我在移动设备上通过 Fabric JS 上的触摸事件获得的内容：http://fabricjs.com/touch-events

在移动设备上，我可以捏缩放每个对象并放大或缩小它。不过，如果对象很多，真的很难做好。

我希望能够通过捏住背景来缩放整个页面，并且仍然能够缩放对象。有点类似于如果我执行以下操作将获得的结果：

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

加上向 canvas、upper-canvas 和 lower-canvas 添加以下 CSS：pointer-events: none;。如https://stackoverflow.com/a/59546028/618091

不幸的是，当然所有对象都无法点击。

Answer 1

首先，您必须确保选项 allowTouchScrolling: true 有效。您可能需要按照此处的建议删除 (e.preventDefault();) 函数中的 _onTouchStart https://github.com/fabricjs/fabric.js/issues/5903#issuecomment-693416109

然后，您可以定义以下两个函数：

var disableScroll = function(){
  canvas.allowTouchScrolling = false;
};

var enableScroll = function(){
  canvas.allowTouchScrolling = true;
};

如果定义了 target，则意味着点击没有发生在画布背景上。因此，以下工作：

canvas.on('mouse:down', function(options) {
  if (options.target) {
    disableScroll();
  }
});
canvas.on('mouse:up', enableScroll);