positionOverlayCanvas

Post reply
0 favourites
  • 11 posts

  • Ok try explain it clearly, sorry for my english, I'm french first :P

    I found the solution to fix it, but it's on frame code, that only you could permenently fix :) let me explain...

    So I dont have any .capx for that, cause the probleme is in integration of canvas in my html. So first, here a example of my html and style, minimum requirement to reproduce my problem:

    <body>
     <header>My header</header>
     <section>
          <canvas id="c2canvas" width="1000" height="500"></canvas>
     </section>
     
     <style>
          header{
               display:block;
               height:200px;
               background:#DDDDDD;
          }
          section{
               display:block;
               position:relative:
          }
          section canvas{
               border:1px solid #DE0000;
          }
          section #c2canvas{
               border:1px solid #000000;
          }
     </style>
     
</body>

    The result of this set canvas overlay top at "200px"... It's wrong cause it's supposed to be "0px" due to the position:relative; in section tag. So the overlay canvas dont position it correctly in that kind of situation. Yea, I can move my canvas tag out of there, but it broke my semantic css...

    I looked in c2runtime.js to find a solution, and I just found this function:

    runtimeProto.positionOverlayCanvas = function()
{
     var overlay_position = jQuery(this.canvas).offset();
     overlay_position.position = "absolute";
     jQuery(this.overlay_canvas).css(overlay_position);
};

    If I replace ".offset();" by ".position();", which retrieves the current position relative to the offset parent, it solve the problem!

    For now I fix it manualy after each export, but I'm pretty sure you could fix this quickly.

    I hope it's my explanations are ok and clear! Tell me if not.

    Peace

  • Oh I just found it's possible to fix it localy in preview.js. It's ok for now, I will have to fix it on every release!

    Let me know if you will fix this soon.

  • I'm a little worried this could break one of the variety of fullscreen modes that we support (which are very sensitive to subtle CSS changes like this), but it seemed to work OK in my testing. So I've made the change for the next build.

  • Of course yea it's possible. Should push with more tests to be sure...

    I just found now it broke position on full screen, for the exact same reason, but reverse... When on fullscreen, relative seem to be different. I fix this with this:

    runtimeProto.positionOverlayCanvas = function()
     {
          var overlay_position = (document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"])?jQuery(this.canvas).offset():jQuery(this.canvas).position();
     overlay_position.position = "absolute";
     jQuery(this.overlay_canvas).css(overlay_position);
};

    I hope this help

  • francoisdiotte, it worked OK for me in fullscreen, which particular combination of settings/browsers did you try?

  • I put the change in to r98 anyway, to see if it causes anyone problems. Does it work better now?

  • I use Chrome 20.0.1132.47 and without the fullscreen detection, the overlay are missaligned.

    So I recommand you using this to be sure

    var overlay_position = (document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"])?jQuery(this.canvas).offset():jQuery(this.canvas).position();

    This weekend I will download the r98 at home and test it again. Today it's impossible due to overwork! By the way, we just buy a license but it's not affiliate on my personnal account. My boss buyed one, his name "Paul Gamache". So we pay for your great product and really really appreciate it!

    Thx to paying attention on my issue!

    Peace

  • Oh I just got an idea to be sure this not affect performance at all, you can write something like that:

    if(document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"]){
     runtimeProto.positionOverlayCanvas = function()
     {
          var overlay_position = jQuery(this.canvas).offset();
          overlay_position.position = "absolute";
          jQuery(this.overlay_canvas).css(overlay_position);
     };
}
else {
     runtimeProto.positionOverlayCanvas = function()
     {
          var overlay_position = jQuery(this.canvas).position();
          overlay_position.position = "absolute";
          jQuery(this.overlay_canvas).css(overlay_position);
     };
}

    But I'm not sure if document["fullScreen"] are set at this point.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • francoisdiotte - I added the fullscreen detection code in r98. Let me know how it works!

  • Yes it work!!

    Sweet thanks, we really appreciate it! You can close this ticket :)

    Peace

  • Hehe i'm just little bit picky for performance, here is a suggestion�

    You should find a way to perform only 1 condition for fullscreen check, because this function are executed tons of times. For exemple:

    var isfullscreen = (document["mozFullScreen"] || document["webkitIsFullScreen"] || document["fullScreen"] || this.isAwesomiumFullscreen);
          var overlay_position = isfullscreen ? jQuery(this.canvas).offset() : jQuery(this.canvas).position();

    Could be replaced by something like that:

    var overlay_position = this.isFullscreen ? jQuery(this.canvas).offset() : jQuery(this.canvas).position();

    But how ever, it work now! Thanks again

Post reply
  • 11 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)