feat: update undercurl with antialiasing

This commit is contained in:
Matthew Winter
2023-10-29 02:49:31 +11:00
parent 533b28eb9d
commit a5eb746cf5
3 changed files with 39 additions and 17 deletions

View File

@ -714,6 +714,7 @@ fn addDeps(
step.addModule("freetype", freetype_dep.module("freetype"));
step.addModule("harfbuzz", harfbuzz_dep.module("harfbuzz"));
step.addModule("xev", libxev_dep.module("xev"));
step.addModule("zig-js", js_dep.module("zig-js"));
step.addModule("pixman", pixman_dep.module("pixman"));
step.addModule("utf8proc", utf8proc_dep.module("utf8proc"));

View File

@ -140,6 +140,12 @@ const WebCanvasImpl = struct {
self.* = undefined;
}
pub fn pixel(self: *WebCanvasImpl, x: u32, y: u32, color: Color) void {
const ctx = self.context(color) catch return;
defer ctx.deinit();
ctx.call(void, "fillRect", .{ x, y, 1, 1 }) catch return;
}
pub fn rect(self: *WebCanvasImpl, v: Rect, color: Color) void {
const ctx = self.context(color) catch return;
defer ctx.deinit();
@ -401,6 +407,20 @@ const PixmanImpl = struct {
return region;
}
/// Draw and fill a single pixel
pub fn pixel(self: *Canvas, x: u32, y: u32, color: Color) void {
const boxes = &[_]pixman.Box32{
.{
.x1 = @intCast(x),
.y1 = @intCast(y),
.x2 = @intCast(x + 1),
.y2 = @intCast(y + 1),
},
};
self.image.fillBoxes(.src, color.pixmanColor(), boxes) catch {};
}
/// Draw and fill a rectangle. This is the main primitive for drawing
/// lines as well (which are just generally skinny rectangles...)
pub fn rect(self: *Canvas, v: Rect, color: Color) void {

View File

@ -165,12 +165,13 @@ const Draw = struct {
fn drawCurly(self: Draw, canvas: *font.sprite.Canvas) void {
// This is the lowest that the curl can go.
const y_max = self.height - 1;
const x_factor = 2 * std.math.pi / @as(f64, @floatFromInt(self.width - 1));
// Some fonts put the underline too close to the bottom of the
// cell height and this doesn't allow us to make a high enough
// wave. This constant is arbitrary, change it for aesthetics.
const pos = pos: {
const MIN_HEIGHT = 7;
const MIN_HEIGHT = 5;
const clamped_pos = @min(y_max, self.pos);
const height = y_max - clamped_pos;
break :pos if (height < MIN_HEIGHT) clamped_pos -| MIN_HEIGHT else clamped_pos;
@ -180,26 +181,26 @@ const Draw = struct {
// underline position. We also calculate our starting y which is
// slightly below our descender since our wave will move about that.
const wave_height = @as(f64, @floatFromInt(y_max - pos));
const half_height = wave_height / 4;
const y = pos + @as(u32, @intFromFloat(half_height));
//const wave_height = @as(f64, @floatFromInt(y_max - (pos - self.thickness / 2)));
const half_height = @max(1, wave_height / 4);
const y_pos = @as(i32, @intCast(pos)) + @as(i32, @intFromFloat(2 * half_height));
const x_factor = (2 * std.math.pi) / @as(f64, @floatFromInt(self.width));
// follow Xiaolin Wu's antialias algorithm to draw the curve
var x: u32 = 0;
while (x < self.width) : (x += 1) {
const vertical = @as(
u32,
@intFromFloat((-1 * half_height) * @sin(@as(f64, @floatFromInt(x)) * x_factor) + half_height),
);
const y0 = half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor);
const y1 = y_pos + @as(i32, @intFromFloat(@floor(y0)));
const y3 = y1 - 1 + @as(i32, @intCast(self.thickness));
const alpha = @as(u8, @intFromFloat(255 * @abs(y0 - @floor(y0))));
var row: u32 = 0;
while (row < self.thickness) : (row += 1) {
const y1 = @min(row + y + vertical, y_max);
canvas.rect(.{
.x = @intCast(x),
.y = @intCast(y1),
.width = 1,
.height = 1,
}, .on);
// upper and lower bounds
canvas.pixel(x, @min(@as(u32, @intCast(y1)), y_max), @enumFromInt(255 - alpha));
canvas.pixel(x, @min(@as(u32, @intCast(y3)), y_max), @enumFromInt(alpha));
// fill between upper and lower bound
var y2: u32 = @as(u32, @intCast(y1)) + 1;
while (y2 < y3) : (y2 += 1) {
canvas.pixel(x, @min(y2, y_max), .on);
}
}
}