Merge pull request #753 from mitchellh/update-undercurl

feat: update undercurl with antialiasing
This commit is contained in:
Mitchell Hashimoto
2023-10-28 21:07:42 -07:00
committed by GitHub
2 changed files with 45 additions and 22 deletions

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

@ -166,40 +166,43 @@ const Draw = struct {
// This is the lowest that the curl can go.
const y_max = self.height - 1;
// Determines the density of the waves.
// `2 * pi...` = 1 peak per character
// `4 * pi...` = 2 peaks per character
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 pos: u32 = pos: {
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;
};
// The full height of the wave can be from the bottom to the
// 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));
// underline position. We also calculate our mid y point of the wave
const wave_height: f64 = @floatFromInt(y_max - pos);
const half_height: f64 = @max(1, wave_height / 4);
const y_mid: u32 = pos + @as(u32, @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 y: f64 = @as(f64, @floatFromInt(y_mid)) + (half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor));
const y_upper: u32 = @intFromFloat(@floor(y));
const y_lower: u32 = y_upper - 1 + self.thickness;
const alpha: u8 = @intFromFloat(255 * @abs(y - @floor(y)));
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(y_upper, y_max), @enumFromInt(255 - alpha));
canvas.pixel(x, @min(y_lower, y_max), @enumFromInt(alpha));
// fill between upper and lower bound
var y_fill: u32 = y_upper + 1;
while (y_fill < y_lower) : (y_fill += 1) {
canvas.pixel(x, @min(y_fill, y_max), .on);
}
}
}