背景缩放和Fabric JS对象缩放

Question

我喜欢我在移动设备上获得的触摸事件: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有效。您可能必须删除_onTouchStart函数中的(e.preventDefault();)，这里建议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);

更多参考文献:https://github.com/fabricjs/fabric.js/issues/1864#issuecomment-112361190Fabric.js: bind event to background image