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
// is adjusted accordingly.
let mut path = femtovg::Path::new();
path.rounded_rect(
geometry.min_x() + border_width / 2.,
geometry.min_y() + border_width / 2.,
geometry.width() - border_width,
geometry.height() - border_width,
rect.border_radius(),
);
let border_radius = rect.border_radius();
let x = geometry.min_x() + border_width / 2.;
let y = geometry.min_y() + border_width / 2.;
let width = geometry.width() - border_width;
let height = geometry.height() - border_width;
// 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());