-
Notifications
You must be signed in to change notification settings - Fork 29
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
stage/canvas dimensions #12
Comments
Hi, to answer all those questions there are quite a few things to know. Please start with the "Scaling the Stage" article: There is a difference between the width/height of the canvas and the width/height of the stylesheet. The width/height of the canvas defines the physical pixels of the canvas and the width/height of the stylesheet defines the visual size of the stage. If you have a normal display both values are the same, but if you have a retina display (HiDPI display) the values are different. For example if you have "devicePixelRatio" of 2.0 the width/height of the canvas is doubled to the width/height of the stylesheet. The best practice is to set the width/height of the stylesheet but not the width/height of the canvas since this values are controlled by the Stage. The width/height of the Stage is defined by the parameters you pass to the constructor and the StageScalingMode. The example where you showed that the canvas has a size of 600x300 is probably because the html/stylesheet gives the canvas a size of 600x300 and the pixels are adjusted by the Stage. The 720x490 resoultion is the logical resolution of the Stage, you can place your display objects within this grid - regardless of the real size of the canvas. The tabindex is set in the Stage constructor to enable keyboard events. If the canvas element has no tabindex, keyboard events won't work - many users of the library sent questions and bug reports why keyboard events don't work. Therefore the Stage adds the tabindex automatically. If you don't want it, you can remove it after the Stage constructor was executed on your own. Previously we used tabindex=0 but it turned out that this does not work in IE. And this is the correct behaviour because the W3C standard says that tabindex starts at 1. |
Btw. you can control the HiDpi pixelRatios of the Stage with this property:
|
Hi, thanks for your very in depth answer!! I have yet to think about this stage-dimensions thing, but concerning the tabindex: Please check http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute
The default value is 0 for elements that are focusable (like a, button, etc.) and −1 for elements that are not focusable. The focus order is the following:
So what happens if the canvas has tabindex=1 is, that it will most likely be one of the first elements receiving focus.
I am aware, that i can change the tabindex after initialization, but this is not really nice. I noticed, that the tabindex is set as soon as i create a new stage for the canvas. If you need to set the tabindex by default, why not only set it, if an interaction is added (like a button or click event)? And if i set a tabindex of my own, it is overwritten ... it would help, if a specified tabindex is left intact. Concerning IE - i did a little bit of testing:
So maybe do something like this ...
(Sorry if i'm getting on your nerves! It is also not very important for me right now - i just noticed it ...) |
Ah forgot In my IE10 (emulation) this
results in
... no height - which renders the element with 150px height ... IE11 works as expected ... |
Thanks for the detail information about the tabindex. I think i have to take a closer look at this. I will probably add a new field to the StageOptions to make the behavior configurable. Currently i'm pretty busy with the graphics implementation in WebGL, but i will put the tabindex on my list of ToDos :) Any don't worry about your questions or suggestions, feedback is always welcome! |
New option sounds great! : ) |
What is the logic behind the setting of the stage and canvas dimensions?
If i, for instance, set
it will result in
Why is the width & height doubled?
And how can i prevent StageXL from setting the tabindex? Maybe i don't want people to be able to tab to the stage (because there's nothing to tab to), or maybe i would need a tabindex="0" ... (i think, tabindex=1 will almost never be convenient ...?)
If i now set
and
then the canvas is set to this
which looks like some default value and has nothing to do with the stage dimensions ...
Wouldn't it in this case make sense to set the canvas width and height attributes according to the stage width/height?
This would be very convenient, because then i could specify the dimensions (aspect ratio) once in the dart project, and the canvas would be prepared accordingly (now i have to set those dimensions twice, even if they are the same).
I could set
and
this would/should/could transform to
and voila: everything perfectly scalable :)
And i found a bug:
setting
results in
Thanks! :)
The text was updated successfully, but these errors were encountered: