I observed that we are not able to scroll web page by swiping fingers on mobile devices where we have used Canvas linked to Fabric covering full screen.
problem i due to canvase not allowing page scroll how can i fix it.
url : http://dev-shree.com/sendfile/
please check in mobile view.
Is there any way to fix it .
my code for canvase defination :
(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;
What Tim Hill has said is correct. allowTouchScrolling: true, seems to do nothing. If you add pointer-events: none; to upper-canvas and lower-canvas, you can affect the ability to scroll the page while touching the canvas.
pointer-events: none;
will disable other events on canvas
fabricjs canvas class has allowTouchScrolling
option 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
}
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With