mirrors/ghostty
1
0
Fork 0
mirror of https://github.com/ghostty-org/ghostty.git synced 2026-04-21 06:45:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

font: working on rendering glyphs in canvas

Browse Source
This commit is contained in:
Mitchell Hashimoto
2022-12-05 10:54:40 -08:00
parent d3b46eeeaf
commit 19e326dab6
5 changed files with 209 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
example/app.ts
View File

@@ -26,6 +26,10 @@ fetch(url.href).then(response =>
free,
face_new,
face_free,
face_render_glyph,
face_debug_canvas,
atlas_new,
atlas_free,
} = results.instance.exports;
// Give us access to the zjs value for debugging.
globalThis.zjs = zjs;
@@ -34,16 +38,23 @@ fetch(url.href).then(response =>
// Initialize our zig-js memory
zjs.memory = memory;
// Create our atlas
const atlas = atlas_new(512, 0 /* greyscale */);
// Create some memory for our string
const font = new TextEncoder().encode("monospace");
const font_ptr = malloc(font.byteLength);
try {
new Uint8Array(memory.buffer, font_ptr).set(font);
// Call whatever example you want:
const face = face_new(font_ptr, font.byteLength, 14);
// Call whatever example you want:
const face = face_new(font_ptr, font.byteLength, 144);
free(font_ptr);
// Render a glyph
face_render_glyph(face, atlas, "A".codePointAt(0));
// Debug our canvas
face_debug_canvas(face);
//face_free(face);
} finally {
free(font_ptr);
}
});

4
example/index.html
View File

@@ -6,6 +6,8 @@
<script type="module" src="app.ts"></script>
</head>
<body>
Open your console, we are just debugging here.
<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>
</body>
</html>