Skip to content

Commit

Permalink
fix: quad rendering including border only inside of the bounds
Browse files Browse the repository at this point in the history
  • Loading branch information
wash2 committed Feb 6, 2024
1 parent eed4f5c commit 9d9d078
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions tiny_skia/src/backend.rs
Original file line number Diff line number Diff line change
Expand Up @@ -177,12 +177,20 @@ impl Backend {
.min(bounds.height / 2.0);

let mut fill_border_radius = <[f32; 4]>::from(border.radius);
// Offset the fill by the border width
let path_bounds = Rectangle {
x: bounds.x + border_width,
y: bounds.y + border_width,
width: bounds.width - 2.0 * border_width,
height: bounds.height - 2.0 * border_width,
};
// fill border radius is the border radius minus the border width
for radius in &mut fill_border_radius {
*radius = (*radius)
.min(bounds.width / 2.0)
.min(bounds.height / 2.0);
*radius = (*radius - border_width / 2.0)

This comment has been minimized.

Copy link
@peterkrull

peterkrull Aug 5, 2024

I believe it is incorrect to divide with 2 here. The image on the left: correct calculation (screenshot actually is wgpu, but removing the / 2.0 is the same) and on the right: the way it is currently.

screenshot-2024-08-05-15-53-10

This effect is barely noticeable when the border width is small, but turn it up and you will see the issue clearly. There is still an issue when 2*border_width > border_radius, but that is arguably more of an edge case.

This comment has been minimized.

Copy link
@wash2

wash2 Aug 5, 2024

Author

Ok, a PR with a fix would be welcome, thanks for pointing this out 👍

.min(path_bounds.width / 2.0)
.min(path_bounds.height / 2.0);
}
let path = rounded_rectangle(*bounds, fill_border_radius);
let path = rounded_rectangle(path_bounds, fill_border_radius);

if shadow.color.a > 0.0 {
let shadow_bounds = (Rectangle {
Expand Down

0 comments on commit 9d9d078

Please sign in to comment.