LibWeb: Use anti-aliasing to draw images and painting surfaces

Fixes the jagged edges on the transformed badge on
https://aaronfrancis.com/backstage.
This commit is contained in:
Jelle Raaijmakers 2025-11-12 15:07:40 +01:00 committed by Jelle Raaijmakers
parent 489dea58ba
commit 2811c75031
Notes: github-actions[bot] 2025-11-12 16:44:03 +00:00
4 changed files with 27 additions and 0 deletions

View file

@ -155,6 +155,7 @@ void DisplayListPlayerSkia::draw_painting_surface(DrawPaintingSurface const& com
auto& canvas = surface().canvas();
auto image = sk_surface.makeImageSnapshot();
SkPaint paint;
paint.setAntiAlias(true);
canvas.drawImageRect(image, src_rect, dst_rect, to_skia_sampling_options(command.scaling_mode), &paint, SkCanvas::kStrict_SrcRectConstraint);
}
@ -164,6 +165,7 @@ void DisplayListPlayerSkia::draw_scaled_immutable_bitmap(DrawScaledImmutableBitm
auto clip_rect = to_skia_rect(command.clip_rect);
auto& canvas = surface().canvas();
SkPaint paint;
paint.setAntiAlias(true);
canvas.save();
canvas.clipRect(clip_rect, true);
canvas.drawImageRect(command.bitmap->sk_image(), dst_rect, to_skia_sampling_options(command.scaling_mode), &paint);
@ -184,6 +186,7 @@ void DisplayListPlayerSkia::draw_repeated_immutable_bitmap(DrawRepeatedImmutable
auto shader = command.bitmap->sk_image()->makeShader(tile_mode_x, tile_mode_y, sampling_options, matrix);
SkPaint paint;
paint.setAntiAlias(true);
paint.setShader(shader);
auto& canvas = surface().canvas();
canvas.drawPaint(paint);

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="../images/image-transformation-anti-aliasing-ref.png">

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="match" href="../expected/image-transformation-anti-aliasing-ref.html" />
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-477">
<style>
div {
perspective: 900px;
}
img {
transform: rotateY(45deg);
}
</style>
<div>
<img src="../data/car.png">
</div>