html5 canvas stops processing on touchmove Adobe Animate CC
Hi,
I have a fairly large html canvas5 file over 1 MB (and maybe that is the problem). But the issue I am experiencing is as follows:
I have developed for touch devices, using jQuery. I capture the touchmove event as follows:
jQuery(document).on('touchmove', function(event){
var offset = jQuery("#canvas").offset();
if(typeof offset !== 'undefined'){
_xmouse = (Math.round(event.originalEvent.changedTouches["0"].pageX) - offset.left) * 1;
_ymouse = (Math.round(event.originalEvent.changedTouches["0"].pageY) - offset.top) * 1;
}
}
I then in the fla file have a function on a frame that moves a yellow brush, as follows:
var brush_interval = null;
var thethis = this;
function moveBrushesYellow() {
thethis.yellowBrush.gotoAndStop(1);
var p = thethis.globalToLocal(_xmouse, _ymouse);
thethis.yellowBrush.x = p.x + 27;
thethis.yellowBrush.y = p.y + 130;
if ((_xmouse<leftBoundary) || (_xmouse>rightBoundary) || (_ymouse<topBoundary) || (_ymouse>bottomBoundary)) {
thethis.yellowBrush.gotoAndStop(0);
thethis.yellowBrushHome.gotoAndStop(0);
thethis.yellowBrushHome.enabled = true;
thethis.pinkBrushHome.enabled = true;
}
}
jQuery(thethis.yellowBrushHome).on('touchstart click', function(event){
selectBrush1(thethis.yellowBrushHome, 'yellow');
clearInterval(brush_interval);
brush_interval = setInterval(moveBrushesYellow, 30);
event.preventDefault();
return false;
});
What this does is create an interval that calls the moveBrushYellow function every 30 milliseconds. However when ever the touchmove function is called the html5 canvas freezes, the moveBrushsYellow interval stops being called (temporarily). When the touchmove event finally finishes, i.e. the person stops moving on the touch screen, the moveBrushsYellow interval resumes playing every 30 miliseconds.
Why does touchmove freeze the html5 canvas, is the canvas being redrawn? Why is it halting, it is not going slow it is just plain stopping, the canvas does not function on touchmove. I tried commenting out the following event listener to prevent the canvas from being resized, as follows, but it did not help:
//window.addEventListener('resize', resizeCanvas);
Is there a way to fix this problem? Are there any way to optimize the code.
