Sprites.Ui.Image
Provide functions for inserting images into the user interface.
Sprites.Ui.Image.Bitmap Element
Sprites.Ui.Image.Bitmap(width, height, build)
A canvas image of the given pixel size. The commands inside draw in canvas pixels. It puts the canvas rendering implementation in context, so the Sprites.Image commands draw on the canvas, and repaints when a value they read changes.
| Input | Type | Description |
|---|---|---|
width | Number | The canvas width in pixels. |
height | Number | The canvas height in pixels. |
build | Function | Builds the drawing with Sprites.Image commands. |
Returns the canvas element.
const radius = Sprites.Reactive.Value(40);
Sprites.Ui.Image.Bitmap(240, 160, () => {
Sprites.Image.FillStyle('#fcd34d', () => {
Sprites.Image.Circle(120, 80, radius);
});
});
Sprites.Ui.Input.Slider(radius, 10, 70);Sprites.Ui.Image.PanAndScale Void
Sprites.Ui.Image.PanAndScale(active, pan, show)
An invisible overlay over a Vector, present only while active, that turns drags into pan and the wheel into show. Place it after the Vector, over the same frame, so a move-and-zoom tool is just this overlay switched on.
| Input | Type | Description |
|---|---|---|
active | Boolean, Sprites.Reactive.Value or Function | Shows the overlay while true. |
pan | Sprites.Reactive.Value | The pan point { x, y }, moved by dragging. |
show | Sprites.Reactive.Value | The units shown across the smaller axis, changed by the wheel. |
Returns nothing.
const pan = Sprites.Reactive.Value({ x: 16, y: 16 });
const show = Sprites.Reactive.Value(36);
const resetView = Sprites.Reactive.Value(null, () => {
Sprites.Reactive.Set(pan, { x: 16, y: 16 });
Sprites.Reactive.Set(show, 36);
});
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Class('image-frame');
Sprites.Ui.Dom.Style('width', '100%');
Sprites.Ui.Dom.Style('height', '160px');
Sprites.Ui.Image.Vector(pan, show, () => {
Sprites.Image.FillStyle('#93c5fd', () => {
Sprites.Image.Rectangle(12, 8, 8, 16);
});
});
Sprites.Ui.Image.PanAndScale(true, pan, show);
});
Sprites.Ui.Layout.Row(() => {
Sprites.Ui.Layout.Column(() => {
Sprites.Ui.Content.Text('Drag to pan around.');
Sprites.Ui.Content.Text('Mouse wheel or scroll to zoom.');
});
Sprites.Ui.Button.Act(resetView, 'Reset view');
});Sprites.Ui.Image.Vector Element
Sprites.Ui.Image.Vector(pan, show, build)
An SVG image that fills its container. It shows a square of show units on the smaller axis, centred on pan, and more on the longer axis, so the show-by-show square around pan always stays visible. It follows pan, show and the container size. It puts the SVG rendering implementation in context, so the Sprites.Image commands draw as SVG.
| Input | Type | Description |
|---|---|---|
pan | Sprites.Reactive.Value | The centre point { x, y } in drawing units. |
show | Number or Sprites.Reactive.Value | The units shown across the smaller axis. |
build | Function | Builds the drawing with Sprites.Image commands. |
Returns the svg element.
const radius = Sprites.Reactive.Value(8);
Sprites.Ui.Dom.Tag('div', () => {
Sprites.Ui.Dom.Class('image-frame');
Sprites.Ui.Dom.Style('width', '100%');
Sprites.Ui.Dom.Style('height', '160px');
Sprites.Ui.Image.Vector({ x: 16, y: 16 }, 36, () => {
Sprites.Image.FillStyle('#93c5fd', () => {
Sprites.Image.Circle(16, 16, radius);
});
});
});
Sprites.Ui.Input.Slider(radius, 2, 16);