Sprites.Image

Backend independent drawing commands. A surface, a Sprites.Ui.Image Bitmap or Vector, puts a rendering implementation in context; these commands read it and call it, so the same command draws on canvas or SVG. LineStyle and FillStyle set the stroke and fill in context; a command reads them when it draws.

Sprites.Image

Sprites.Image.Checkerboard Void

Sprites.Image.Checkerboard()

A checkerboard backdrop for a transparent drawing surface. It fills its container with a white and light grey tile and holds still while the surface above pans and zooms, so the pattern shows through wherever the drawing is clear. Place it before a Sprites.Ui.Image Vector, over the same frame.

Takes no arguments.

Returns nothing.

Sprites.Ui.Dom.Tag('div', () => {
  Sprites.Ui.Dom.Class('image-frame');
  Sprites.Ui.Dom.Style('width', '100%');
  Sprites.Ui.Dom.Style('height', '160px');
  Sprites.Image.Checkerboard();
  Sprites.Ui.Image.Vector({ x: 16, y: 16 }, 32, () => {
    Sprites.Image.FillStyle('#93c5fd', () => {
      Sprites.Image.Circle(16, 16, 8);
    });
  });
});
The backdrop shows through the transparent surface around the circle.

Sprites.Image.Circle Void

Sprites.Image.Circle(x, y, r)

Draw a circle, in the current style. It is filled when a FillStyle is in scope and stroked when a LineStyle is. The arguments may be constant or reactive. Draw inside a Sprites.Ui.Image Bitmap or Vector.

InputTypeDescription
xNumber or Sprites.Reactive.ValueThe centre x.
yNumber or Sprites.Reactive.ValueThe centre y.
rNumber or Sprites.Reactive.ValueThe radius.

Returns nothing.

const radius = Sprites.Reactive.Value(12);
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 }, 32, () => {
    Sprites.Image.FillStyle('#93c5fd', () => {
      Sprites.Image.Circle(16, 16, radius);
    });
  });
});
Sprites.Ui.Layout.Row(() => {
  Sprites.Ui.Button.Decrement(radius, '-');
  Sprites.Ui.Button.Increment(radius, '+');
});
The buttons step the radius; the circle follows.

Sprites.Image.FillStyle Any

Sprites.Image.FillStyle(colour, build)

Set the fill for the commands inside. A shape built with a FillStyle in scope is filled with colour. A nearer FillStyle shadows a wider one. The colour may be reactive.

InputTypeDescription
colourString or Sprites.Reactive.ValueThe fill colour.
buildFunctionBuilds the shapes that take this fill.

Returns the result of build.

const colour = Sprites.Reactive.Value('#86efac');
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 }, 32, () => {
    Sprites.Image.FillStyle(colour, () => {
      Sprites.Image.Rectangle(4, 4, 24, 24);
    });
  });
});
Sprites.Ui.Input.Dropdown(colour, () => {
  Sprites.Ui.Input.Option('#86efac', 'Green');
  Sprites.Ui.Input.Option('#fca5a5', 'Red');
});
The dropdown sets the fill colour of the square.

Sprites.Image.Line Void

Sprites.Image.Line(x1, y1, x2, y2)

Draw a line between two points, in the current line style. The arguments may be constant or reactive. Draw inside a Sprites.Ui.Image Bitmap or Vector.

InputTypeDescription
x1Number or Sprites.Reactive.ValueThe start x.
y1Number or Sprites.Reactive.ValueThe start y.
x2Number or Sprites.Reactive.ValueThe end x.
y2Number or Sprites.Reactive.ValueThe end y.

Returns nothing.

const endY = Sprites.Reactive.Value(4);
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 }, 32, () => {
    Sprites.Image.LineStyle(2, '#15803d', () => {
      Sprites.Image.Line(4, 28, 28, endY);
    });
  });
});
Sprites.Ui.Input.Slider(endY, 4, 28);
The slider moves the far end of the line up and down.

Sprites.Image.LineStyle Any

Sprites.Image.LineStyle(thickness, colour, build)

Set the stroke for the commands inside. A shape built with a LineStyle in scope is stroked with thickness and colour. A nearer LineStyle shadows a wider one. Both may be reactive.

InputTypeDescription
thicknessNumber or Sprites.Reactive.ValueThe stroke width, in drawing units.
colourString or Sprites.Reactive.ValueThe stroke colour.
buildFunctionBuilds the shapes that take this stroke.

Returns the result of build.

const thickness = Sprites.Reactive.Value(3);
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 }, 32, () => {
    Sprites.Image.LineStyle(thickness, '#b91c1c', () => {
      Sprites.Image.Rectangle(5, 5, 22, 22);
    });
  });
});
Sprites.Ui.Input.Slider(thickness, 1, 6);
The slider sets the stroke thickness of the outline.

Sprites.Image.Polygon Void

Sprites.Image.Polygon(points)

Draw a closed polygon through a list of points, in the current style. It is filled when a FillStyle is in scope and stroked when a LineStyle is. The points are an array of { x, y }, and may be a constant array or a reactive value that yields one, so the shape follows its points. Sprites.Scene.Square draws through this after projecting its corners. Draw inside a Sprites.Ui.Image Bitmap or Vector.

InputTypeDescription
pointsArray of { x, y }, or Sprites.Reactive.ValueThe corners, in order around the shape.

Returns nothing.

const points = [{ x: 8, y: 8 }, { x: 24, y: 8 }, { x: 24, y: 24 }, { x: 8, y: 24 }];
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 }, 32, () => {
    Sprites.Image.FillStyle('#a7f3d0', () => {
      Sprites.Image.LineStyle(1, '#065f46', () => {
        Sprites.Image.Polygon(points);
      });
    });
  });
});
A square drawn as a four point polygon, filled and stroked in the current style.

Sprites.Image.Rectangle Void

Sprites.Image.Rectangle(x, y, w, h)

Draw a rectangle, in the current style. It is filled when a FillStyle is in scope and stroked when a LineStyle is. The arguments may be constant or reactive. Draw inside a Sprites.Ui.Image Bitmap or Vector.

InputTypeDescription
xNumber or Sprites.Reactive.ValueThe left x.
yNumber or Sprites.Reactive.ValueThe top y.
wNumber or Sprites.Reactive.ValueThe width.
hNumber or Sprites.Reactive.ValueThe height.

Returns nothing.

const width = Sprites.Reactive.Value(20);
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 }, 32, () => {
    Sprites.Image.FillStyle('#c7d2fe', () => {
      Sprites.Image.Rectangle(6, 9, width, 14);
    });
  });
});
Sprites.Ui.Input.Slider(width, 4, 24);
The slider sets the width of the rectangle.