2 Replies Latest reply on Dec 21, 2012 5:21 PM by AkariKamigishi

    Best way to scale the stage


      Hi all,


      I want to make my work scale with the browser window so that no matter under what resolution the user uses or what platform (PC or iOS or Android, etc) the user uses, they can view the whole content.


      For the stage part I used the following code:


      var orgWidth = sym.$("Stage").width();

      var orgHeight = sym.$("Stage").height();


      if ($(window).width() > $(window).height()*(4/3)) {



      } else {





      and it works fine, but only limited to the stage.


      For all those other symbols (added by code or added by hand), I'm not sure the best way to handle them. I tried the following code:


      var scaleWidth = sym.$("Stage").width()/orgWidth;

      var scaleHeight = sym.$("Stage").height()/orgHeight;


      var childSymbols = sym.getChildSymbols();

      for (var i=0; i<childSymbols.length; i++) {

          childSymbols[i].getSymbolElement().width(childSymbols[i].getSymbolElement().width()*scale Width);

          childSymbols[i].getSymbolElement().height(childSymbols[i].getSymbolElement().height()*sca leHeight);



      This only works for some of symbols created by:

      sym.createChildSymbol("mySym", sym.$(:Stage"));


      and some do not. And for those I dragged on the stage (by hand not by code) do not.


      Any advice? Thank you.

        • 1. Re: Best way to scale the stage
          joel_pau Level 5



          I quickly read your code.

          if: var orgWidth = sym.$("Stage").width(); and var scaleWidth = sym.$("Stage").width()/orgWidth;

          Then: scaleWidth = sym.$("Stage").width() / sym.$("Stage").width() = 1.

          Therefore, your code "checks" that 1 is neutral element.

          • 2. Re: Best way to scale the stage
            AkariKamigishi Level 1

            Hi joel_pau,


            Not sure what do you mean. This function is called in window.resize, so the variable "sym.$("Stage").width()" in "var orgWidth = sym.$("Stage").width();" would be the width of the stage before resize, and that in "scaleWidth = sym.$("Stage").width()/orgWidth" would be the width after resize. So scaleWidth will not be equal to 1 unless there is no resize in that dimension.