Paint tree
Get the shapes, paints, text runs, and images takumi would paint.
takumi-paint lays out JSX, HTML, or a takumi node tree. It returns what painting it would draw, with every CSS value resolved, for Canvas, presentation files, and native drawing APIs.
npm i takumi-paint @takumi-rs/helpersPaint JSX
paint() returns a PaintTree. Iterating it yields every node in document order.
import { } from "takumi-paint";
const = await (
< ="card" ={{ : 240, : 16, : "#F7F3EC" }}>
Hello <>world</>
</>,
{ : 320 },
);
const = .("card");
.(?.[0]); // { type: "fill", role: "background", shape: { type: "rect", … }, … }
for (const of ) {
if (. !== "text") continue;
for (const of .) .(., .?., ..);
}The returned lengths are device pixels. Set devicePixelRatio to scale CSS lengths during layout.
Read the result
| Need | Read |
|---|---|
| Draw nodes in order | Drawing |
| Place text or lay it out again | Text |
| Check options and field types | Reference |
Reuse a painter
paint() uses a shared Painter. A dedicated Painter keeps its registered fonts separate. Release its WebAssembly memory when finished.
import { } from "takumi-paint";
const = new ();
try {
const = await .(<>Hello</>, { : 320 });
.(.);
} finally {
.();
}Last updated on