gfx
import gfx from "gfx";
var s: gfx.Surface = gfx.new_surface(64, 32, gfx.Format.Rgbx) or { return 1; };
s.clear(#1E1E1E);
s.fill_rect(4, 4, 24, 12, #E74C3C);
s.draw_text(4, 28, "tape", #FFFFFF, 8);
let red: bool = s.pixel(10, 10) == #E74C3C; // true
s.free();gfx draws into a 32-bit pixel buffer. It is what components paint with:
ui hands a component’s paint a *gfx.Surface and its bounds. It is a
pure module: it only writes the pixels you give it.
Surfaces
| Function | Does |
|---|---|
new_surface(w, h, format) -> Surface or GfxError | A new zeroed surface you release with free() |
over(pixels: *u8, w, h, stride, format) -> Surface or GfxError | A surface over memory you own (a window buffer); stride in pixels |
s.free() | Release an owned surface; any surface is empty afterwards |
s.width, s.height, s.format | Its size and layout |
Format.Rgbx is opaque 0x00RRGGBB; Format.Argb has alpha
(0xAARRGGBB). Sizes are 1..gfx.MAX_SIZE (32768); anything else is
GfxError.InvalidSize.
Drawing
| Method | Does |
|---|---|
s.clear(c) | Every pixel to c |
s.fill_rect(x, y, w, h, c) | A filled rectangle |
s.stroke_rect(x, y, w, h, c) | Its one-pixel outline |
s.set_pixel(x, y, c) | One pixel |
s.rect(x, y, w, h, p), s.circle(cx, cy, r, p), s.ellipse(cx, cy, rx, ry, p) | Shapes with a Paint |
s.line(x0, y0, x1, y1, p), s.triangle(a, b, c, p), s.polygon(points, p) | Lines and polygons (gfx.Point { x; y; }) |
s.draw_text(x, y, text, c, size) -> i64 | Text with its baseline at y; returns the x after it |
gfx.measure_text(text, size) -> TextMetrics | width, ascent, descent, line_gap |
s.draw(x, y, &src) | Copy (or alpha-blend, for Argb) another surface |
s.draw_image(&src, m) | Another surface drawn through an affine.Affine: turned, scaled, skewed or moved by any fraction, smoothly sampled, with anti-aliased edges. affine.identity() draws what draw(0, 0, &src) does; turning by a multiple of 90 degrees or moving by whole pixels copies the pixels exactly |
Coordinates are i64 and may fall outside the surface; only what is
inside (and inside the clip) is drawn. A color with alpha below FF
blends over what is there.
A Paint says how a shape is drawn:
var p: gfx.Paint = gfx.fill(#3498DB); // or gfx.stroke(c, width), gfx.fill_and_stroke(inside, outline, width)
p.radius = 4; // rounded corners for rect() (anti-aliased drawing only)
p.aa = false; // pixel-exact edges instead of anti-aliased (corners stay square)
s.rect(10, 10, 40, 20, p);Text uses the built-in bitmap font (ASCII; other characters show as a box), scaled by whole steps of 10 pixels.
Clipping and reading back
| Method | Does |
|---|---|
s.set_clip(x, y, w, h), s.reset_clip() | Limit drawing to a rectangle, or not |
s.clip() -> Rect, s.clip_to(x, y, w, h) | The current clip; narrow it |
s.pixel(x, y) -> color | One pixel (traps outside the surface) |
s.checksum() -> u64 | A hash of all pixels: equal pictures, equal checksums, on every platform |
See also
ui paints components on surfaces; image turns image files into surfaces; color builds and mixes colors.
Last modified: