2 Replies Latest reply on Nov 3, 2015 11:31 PM by MengChang Xiao

    can't display the image at the first time

    MengChang Xiao

      I write a simple rb file, include short javascripts.

      There is a problem: when the app running,the image does not show,but display after refreshed.(in debug version)

      code like this:

       

      <div data-role="page" data-url="<%= Rho::Application.startURI %>/">

         

        <div data-role="header" data-position="inline">

          <script src="/HEVSource/HEVCar.js" type='Text/javascript'></script>

        </div>

        <div data-role="content" id="container">

           

            <script type='Text/javascript'>

              var width = window.innerWidth;

              var height = window.innerHeight;

         

              var stage = new Konva.Stage({

                container: 'container',

                width: width,

                height: height,

                opacity:1

              });

              var backlayer = new Konva.Layer();

              stage.add(backlayer);

         

              var imageObj = new Image();

              imageObj.onload = function() {

                var image = new Konva.Image({

                  x: 0,

                  y: 0,

                  width:width-300,

                  height:height,

                  image: imageObj,

                });

                backlayer.add(image);

              };

              imageObj.src = '/HEVSource/hevcar1920.jpg';

             

              onaccclick = function(){   

                hev.accelerate();

              }

              onbrakeclick = function(){   

                hev.brake();

              }

              onnaviclick = function(){  

                hev.navigate();

              }

         

              hevpos = HEVpos.createNew();

              var hev = HEVCar.createNew(stage,hevpos);

               

              var anim = new Konva.Animation(function(frame) {

                hev.work();

                backlayer.draw();

              },backlayer);

             

              anim.start();

              onaccclick();

          </script>  

       

        </div>

       

        <!--p>

        <input id="Acc" type="button" value="acc" onclick="onaccclick()">

        <input id="Navi" type="button" value="navi" onclick="onnaviclick()">

        <input id="brake" type="button" value="brake" onclick="onbrakeclick()">

        </p-->

      </div>

       

      the image is a little big,about 6M.

      I have used the Konva. I tried html tag img too, same problem exist.

      By the way,any new book on rho? I still dont know how to debug.

      When debug these codes,it looks like not working,can't step in even if I have set the breakpoints.

      This is JS,but the breakpoints were recognized as ruby code breakpoints.

       

      Thanks