Improve rendering of circles with the GL backend

Rendering a circle using `rounded_rect` will create a path with `LineTo`
verbs for the edges. Unfortunately those create visible artefacts,
especially in lower resolutions.

Therefore this patch attempts to detect this scenario and draw a circle instead.

Fixes #152
This commit is contained in:
Simon Hausmann 2021-02-01 12:50:07 +01:00
parent e09fa06226
commit 08413212f9

View file

@ -691,13 +691,19 @@ impl ItemRenderer for GLItemRenderer {
// and 50% outwards. We choose the CSS model, so the inner rectangle // and 50% outwards. We choose the CSS model, so the inner rectangle
// is adjusted accordingly. // is adjusted accordingly.
let mut path = femtovg::Path::new(); let mut path = femtovg::Path::new();
path.rounded_rect( let border_radius = rect.border_radius();
geometry.min_x() + border_width / 2., let x = geometry.min_x() + border_width / 2.;
geometry.min_y() + border_width / 2., let y = geometry.min_y() + border_width / 2.;
geometry.width() - border_width, let width = geometry.width() - border_width;
geometry.height() - border_width, let height = geometry.height() - border_width;
rect.border_radius(), // If we're drawing a circle, use directly connected bezier curves instead of
); // ones with intermediate LineTo verbs, as `rounded_rect` creates, to avoid
// rendering artifacts due to those edges.
if width == height && border_radius * 2. == width {
path.circle(x + border_radius, y + border_radius, border_radius);
} else {
path.rounded_rect(x, y, width, height, border_radius);
}
let fill_paint = femtovg::Paint::color(rect.color().into()); let fill_paint = femtovg::Paint::color(rect.color().into());