Sprites.Media.Image.Canvas
The image editor's canvas view: a composite that lays a checkerboard backdrop, then the high resolution pixel surface over it, then a transparent vector overlay for the brush cursor. The pixel surface, Sprites.Ui.Image.Pixels, draws the tiled grid panned and zoomed and holds the raw canvas work; the cursor overlay reuses the sprite editor's brush cursor, drawn in image space, one world unit to one pixel. This module holds no raw drawing of its own. The tools window, panels and palette that sit over it live in Sprites.Media.Image.Tool, Sprites.Media.Image.Layers and Sprites.Media.Image.Insert.
Sprites.Media.Image.Canvas.View Void
Sprites.Media.Image.Canvas.View(display, pan, show, painting, over, at, radius)
The image view: a static checkerboard backdrop, then the pixel surface drawing the tiled grid over it, then a transparent vector holding the brush cursor. display is the flattened tiled grid; pan and show are the view; painting, over, at and radius drive the cursor, which shows while the Draw tool is active and the pointer is over the image. One world unit is one pixel, so the cursor uses an aspect of one. It mounts the editor's pixel canvas, so the example below is gated behind a button.
| Input | Type | Description |
|---|---|---|
display | Sprites.Reactive.Value | The flattened tiled grid the surface draws. |
pan | Sprites.Reactive.Value | The centre pixel of the view. |
show | Sprites.Reactive.Value | How many pixels the smaller axis shows. |
painting | Sprites.Reactive.Value | True while the Draw tool is active, so the cursor shows. |
over | Sprites.Reactive.Value | True while the pointer is over the image. |
at | Sprites.Reactive.Value | The pointer position in image space, { x, y }. |
radius | Sprites.Reactive.Value | The brush radius in pixels, sizing the cursor. |
Returns nothing.
const blank = Sprites.Media.Image.New(32, 32);
const pan = Sprites.Reactive.Value({ x: 16, y: 16 });
const show = Sprites.Reactive.Value(32);
const painting = Sprites.Reactive.Value(false);
const over = Sprites.Reactive.Value(false);
const at = Sprites.Reactive.Value({ x: 0, y: 0 });
const radius = Sprites.Reactive.Value(0);
const on = Sprites.Reactive.Value(false);
Sprites.Ui.Button.SetValue(on, true, 'Show canvas');
Sprites.Reactive.If(on, () => {
Sprites.Media.Image.Canvas.View(blank, pan, show, painting, over, at, radius);
});