mirrors/ghostty
1
0
Fork 0
mirror of https://github.com/ghostty-org/ghostty.git synced 2026-04-18 13:30:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

font: add method for drawing atlas to canvas

Browse Source
This commit is contained in:
Mitchell Hashimoto
2022-12-05 15:01:34 -08:00
parent 84f6f37450
commit 5e9dd02eab
5 changed files with 107 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
example/app.ts
View File

@@ -30,6 +30,7 @@ fetch(url.href).then(response =>
face_debug_canvas,
atlas_new,
atlas_free,
atlas_debug_canvas,
} = results.instance.exports;
// Give us access to the zjs value for debugging.
globalThis.zjs = zjs;
@@ -47,14 +48,21 @@ fetch(url.href).then(response =>
new Uint8Array(memory.buffer, font_ptr).set(font);
// Call whatever example you want:
const face = face_new(font_ptr, font.byteLength, 144);
const face = face_new(font_ptr, font.byteLength, 72);
free(font_ptr);
// Render a glyph
face_render_glyph(face, atlas, "A".codePointAt(0));
for (let i = 33; i <= 126; i++) {
face_render_glyph(face, atlas, i);
}
// face_render_glyph(face, atlas, "A".codePointAt(0));
// Debug our canvas
face_debug_canvas(face);
// Debug our atlas canvas
const id = atlas_debug_canvas(atlas);
document.getElementById("atlas-canvas").append(zjs.deleteValue(id));
//face_free(face);
});

4
example/index.html
View File

@@ -8,6 +8,8 @@
<body>
<p>Open your console, we are just debugging here.</p>
<p>The font rendering canvas should show below. This shows a single glyph.</p>
<div id="face-canvas" style="display: inline-block; border: 1px solid red;"></div>
<div><div id="face-canvas" style="display: inline-block; border: 1px solid red;"></div></div>
<p>The current font atlas is rendered below.</p>
<div><div id="atlas-canvas" style="display: inline-block; border: 1px solid green;"></div></div>
</body>
</html>