Add web_aspect_ratio example #2209
Conversation
maroider
added
DS - web
C - waiting on maintainer
Cargo.toml
Outdated
| @@ -34,6 +34,7 @@ mint = { version = "0.5.6", optional = true } | |||
| [dev-dependencies] | |||
| image = { version = "0.24.0", default-features = false, features = ["png"] } | |||
| simple_logger = "2.1.0" | |||
| web-sys = { version = "0.3.4", features = ['CanvasRenderingContext2d'] } | |||
There was a problem hiding this comment.
That's quite an old version of web-sys; why did you pick that one?
There was a problem hiding this comment.
Not sure where I got that version from...
Its functionally identical but I updated to use the same version as the non dev-dep to make it less confusing.
examples/web_aspect_ratio.rs
Outdated
| let parent_div = document.create_element("div").unwrap(); | ||
| parent_div | ||
| .dyn_ref::<HtmlElement>() | ||
| .unwrap() | ||
| .style() | ||
| .set_css_text("margin: auto; width: 50%; aspect-ratio: 4 / 1;"); | ||
| body.append_child(&parent_div).unwrap(); | ||
|
|
||
| // Set a background color for the canvas to make it easier to tell the where the canvas is for debugging purposes. | ||
| let canvas = window.canvas(); | ||
| canvas | ||
| .style() | ||
| .set_css_text("display: block; width: 100%; height: 100%; background-color: crimson;"); | ||
| parent_div.append_child(&canvas).unwrap(); |
There was a problem hiding this comment.
You shouldn't need to create a parent <div>; applying the CSS directly to the canvas works fine.
There was a problem hiding this comment.
oh I thanks I didnt realize that.
I think I prefer to have the div separate in my actual application as it means I can have a generic canvas created by wasm that the html template can configure the size of by setting the css on the parent div.
However in this example it probably makes sense to just keep it simple and do all in one considering we cant control the raw html file anyway.
I've changed the PR to remove the div but am happy to revert if someone else prefers the original way.
examples/web_aspect_ratio.rs
Outdated
| // A small default size is used to better demonstrate issues that come from failing to update the size | ||
| .with_inner_size(PhysicalSize::new(100, 100)) |
There was a problem hiding this comment.
This could be a bit misleading to people reading the example, since you almost never want to use with_inner_size when sizing using ResizeObserver; it works in this case since the canvas' style gets overridden below, but that should probably be documented more clearly.
Something like: 'Note: this would normally fix the canvas' width and height to 100px, but since the canvas' style gets overridden below in create_canvas, it just sets the initial framebuffer size.'
rukai
force-pushed
the
web_aspect_ratio_example
branch
from
dd29722
to
02370df
Compare
|
I've resolved merge conflicts, would appreciate a review. |
rukai
force-pushed
the
web_aspect_ratio_example
branch
from
02370df
to
29b4627
Compare
|
I have addressed your feedback and added screenshots of both to the PR description. |
rukai
force-pushed
the
web_aspect_ratio_example
branch
from
29b4627
to
bc2943f
Compare
|
done! |
CHANGELOG.mdif knowledge of this change could be valuable to usersAdds a new example that creates a web canvas that fills an aspect-ratio'd div
The main point of this example is to demonstrate the functionality provided by #2074
The example can land before or after, but landing it before will make it easier to test #2074
Another benefit of this example is demonstrating how to create a web canvas that fills up the available space while maintaining the same aspect ratio.
Although this is slightly out of scope of winit I believe it would be extremely useful to provide as figuring out what combination of html elements and css configuration I needed to get this to work was surprisingly difficult for me even though I've been dabbling with web technologies for ages.
Pinging @Liamolucko for feedback as this relates to your PR.
Currently running
cargo run-wasm --example web_aspect_ratiowill give:With #2074 and running
RUSTFLAGS="--cfg=web_sys_unstable_apis" cargo run-wasm --example web_aspect_ratio --features css-sizewill give: