fabric.js version:5.4.0 目前不太清楚其他版本支不支持 应该5.4之前都可以 其他版本请自行测试
前提:
需要开启允许触摸滚动
new fabric.Canvas(canvasEle, {
allowTouchScrolling: true
})
解决代码:
(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);
}
});
})();
原理是监听了onTouchStart方法 如果开启了允许触摸滚动(allowTouchScrolling)且不处于绘画模式(isDrawingMode) 就可以滚动
初始化时加入 (function(){})是JQ初始化的方法,vue在created加入即可