3 Replies Latest reply on May 25, 2017 8:05 PM by Hope this Helps

    html5 canvas stops processing on touchmove Adobe Animate CC

    Hope this Helps

      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.

        • 1. Re: html5 canvas stops processing on mouseover Adobe Animate CC
          ClayUUID Adobe Community Professional

          Wait, why are you using jQuery for mouse/touch events? Animate's HTML5 Canvas mode already has its own mouse event library built in. Maybe the two are conflicting, or jQuery and CreateJs just aren't playing well together.

           

          That being said, wouldn't it make more sense to listen for a mouse move event to call moveBrushesYellow() instead of frantically calling it every 30ms no matter whether or not the user has actually moved anything?

          • 2. Re: html5 canvas stops processing on touchmove Adobe Animate CC
            Hope this Helps Level 1

            After taking your advice to try to use the built in functions found in createJS, I was able to get it working. It also fixed problems I was having with buttons. I changed the mouse listening code to:

             

            //enable touch events on the stage

            createjs.Touch.enable(stage);

             

            //get the mouse coordinates for the stage.

            stage.on("stagemousemove", function(evt) {

               

                   _xmouse = evt.stageX;

                   _ymouse = evt.stageY;

                });

             

            I also changed the click event handlers from:

             

            jQuery(object).on('click', function(){

             

            });

             

            to plain:

             

            object.on('click', function(){

             

            });

             

            Thanks for pointing me in the right direction.

            • 3. Re: html5 canvas stops processing on touchmove Adobe Animate CC
              Hope this Helps Level 1

              ops ... just realised on touch devices the code needs to be:

               

              createjs.Touch.enable(stage);

                 

              stage.on("stagemousemove", function(evt) {

                     _xmouse = evt.stageX; //stage global coordinate

                     _ymouse = evt.stageY; //stage global coordinate

                    _screenX = evt.stageX / stage.scaleX; // html coordinate

                     _screenY = evt.stageY / stage.scaleY; // html coordiante

                  });