Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fabric (Canvas) on Mobile Devices while page scroll

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;
like image 741
mydeve Avatar asked Apr 26 '15 15:04

mydeve


3 Answers

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.

like image 198
James Baird Avatar answered Oct 30 '22 05:10

James Baird


pointer-events: none;

will disable other events on canvas

like image 35
M_Badrah Avatar answered Oct 30 '22 05:10

M_Badrah


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
    }
);
like image 20
Khawer Zeshan Avatar answered Oct 30 '22 06:10

Khawer Zeshan