djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix web blur (#151)

Browse source 
* [egui_web] Always use an even canvas size

Fixes https://github.com/emilk/egui/issues/103

* [egui_web] Position canvas at top of screen

This avoids jumpyness when resizing,
caused by rounding height to an even number
This commit is contained in:
Emil Ernerfeldt 2021-02-01 20:44:39 +01:00 committed by GitHub
parent 2cbea02c8b
commit 0f33bc7c34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/index.html
View file

@ -27,15 +27,15 @@
padding: 0 !important;
}
/* Center canvas vertically and horizontally: */
/* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, 0%);
}
</style>
</head>

21
egui_web/src/lib.rs
View file

@ -135,16 +135,29 @@ pub fn resize_canvas_to_screen_size(canvas_id: &str) -> Option<()> {
let canvas_size_pixels = canvas_size_pixels.min(max_size_pixels);
let canvas_size_points = canvas_size_pixels / pixels_per_point;
// Make sure that the height and width are always even numbers.
// otherwise, the page renders blurry on some platforms.
// See https://github.com/emilk/egui/issues/103
fn round_to_even(v: f32) -> f32 {
(v / 2.0).round() * 2.0
}
canvas
.style()
.set_property("width", &format!("{}px", canvas_size_points.x))
.set_property(
"width",
&format!("{}px", round_to_even(canvas_size_points.x)),
)
.ok()?;
canvas
.style()
.set_property("height", &format!("{}px", canvas_size_points.y))
.set_property(
"height",
&format!("{}px", round_to_even(canvas_size_points.y)),
)
.ok()?;
canvas.set_width(canvas_size_pixels.x.round() as u32);
canvas.set_height(canvas_size_pixels.y.round() as u32);
canvas.set_width(round_to_even(canvas_size_pixels.x) as u32);
canvas.set_height(round_to_even(canvas_size_pixels.y) as u32);
Some(())
}