Applied-Software/ghostty
5
0
Fork 0
mirror of https://github.com/ghostty-org/ghostty.git synced 2025-08-02 14:57:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

font: fix glyph offset calculations for render

Browse Source
This commit is contained in:
Mitchell Hashimoto
2022-12-05 15:25:09 -08:00
parent 5e9dd02eab
commit 25f2f1a652
3 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/app.ts
View File

@ -55,7 +55,7 @@ fetch(url.href).then(response =>
for (let i = 33; i <= 126; i++) { for (let i = 33; i <= 126; i++) {
face_render_glyph(face, atlas, i); face_render_glyph(face, atlas, i);
} }
// face_render_glyph(face, atlas, "A".codePointAt(0)); //face_render_glyph(face, atlas, "p".codePointAt(0));
// Debug our canvas // Debug our canvas
face_debug_canvas(face); face_debug_canvas(face);

2
src/font/Atlas.zig
View File

@ -426,6 +426,7 @@ pub const Wasm = struct {
const Uint8ClampedArray = try js.global.get(js.Object, "Uint8ClampedArray"); const Uint8ClampedArray = try js.global.get(js.Object, "Uint8ClampedArray");
defer Uint8ClampedArray.deinit(); defer Uint8ClampedArray.deinit();
const arr = try Uint8ClampedArray.new(.{ mem_buf, buf.ptr, buf.len }); const arr = try Uint8ClampedArray.new(.{ mem_buf, buf.ptr, buf.len });
defer arr.deinit();
// Create the image data from our array // Create the image data from our array
const ImageData = try js.global.get(js.Object, "ImageData"); const ImageData = try js.global.get(js.Object, "ImageData");
@ -435,6 +436,7 @@ pub const Wasm = struct {
break :data data; break :data data;
}; };
defer image_data.deinit();
// Draw it // Draw it
try ctx.call(void, "putImageData", .{ image_data, 0, 0 }); try ctx.call(void, "putImageData", .{ image_data, 0, 0 });

11
src/font/face/web_canvas.zig
View File

@ -126,6 +126,7 @@ pub const Face = struct {
// Height is our ascender + descender for this char // Height is our ascender + descender for this char
const asc = try metrics.get(f32, "actualBoundingBoxAscent"); const asc = try metrics.get(f32, "actualBoundingBoxAscent");
const desc = try metrics.get(f32, "actualBoundingBoxDescent"); const desc = try metrics.get(f32, "actualBoundingBoxDescent");
const left = try metrics.get(f32, "actualBoundingBoxLeft");
const height = @floatToInt(u32, @ceil(asc + desc)); const height = @floatToInt(u32, @ceil(asc + desc));
// Resize canvas to match the glyph size exactly // Resize canvas to match the glyph size exactly
@ -148,11 +149,6 @@ pub const Face = struct {
const ctx = try self.context(); const ctx = try self.context();
defer ctx.deinit(); defer ctx.deinit();
// We use top alignment because our renderer handles all the
// baseline and so on so we just want a top-left rendered glyph
// by itself.
try ctx.set("textBaseline", js.string("top"));
// Draw background // Draw background
try ctx.set("fillStyle", js.string("transparent")); try ctx.set("fillStyle", js.string("transparent"));
try ctx.call(void, "fillRect", .{ try ctx.call(void, "fillRect", .{
@ -163,11 +159,12 @@ pub const Face = struct {
}); });
// Draw glyph // Draw glyph
// TODO: may need a +1 on the left/asc here to avoid clipping
try ctx.set("fillStyle", js.string("black")); try ctx.set("fillStyle", js.string("black"));
try ctx.call(void, "fillText", .{ try ctx.call(void, "fillText", .{
glyph_str, glyph_str,
0, left,
0, asc,
}); });
// Read the image data and get it into a []u8 on our side // Read the image data and get it into a []u8 on our side