image

image

`image()` displays an image file, an `image_data` object, or an `image_stream` object. It can also draw on a loaded static image through an `image_pen` object returned by `pen()`.

Constructor

image()

Creates an image control. Default size is 160 x 120.

view = image().load("preview.png");

Common Component Methods

Most visible GUI controls support these methods:

Method	Returns	Description
`position(x, y)`	self	Sets the component position in pixels.
`size(width, height)`	self	Sets component size in pixels. Width and height are clamped to at least 1.
`visible(enabled)`	self	Shows or hides the component.
`enabled(enabled)`	self	Enables or disables user interaction.

Common component properties:

Property	Type	Description
`position_x`	number	Current x position.
`position_y`	number	Current y position.
`size_width`	number	Current width.
`size_height`	number	Current height.
`visible`	boolean	Current visible state.
`enabled`	boolean	Current enabled state.

Properties

Property	Type	Description
`file`	string	Current file path, or empty when image data/stream is used.
`scale`	number	Current manual scale. `-1` means automatic scale.
`placement`	string	One of `fit`, `fill`, `center`, `stretch`, `top_left`.
`animated`	boolean	`true` for animated images or streams.
`playing`	boolean	`true` when animation/stream playback is active.
`frame_width`	number	Current frame width.
`frame_height`	number	Current frame height.

Methods

Method	Returns	Description
`info(enabled)`	self	Shows or hides image debug information.
`load(source)`	self	Loads a file path, `image_data`, or `image_stream`.
`pen(color, thickness)`	image_pen	Creates a drawing pen for a loaded static image.
`scale(value)`	self	Sets manual scale. Use `-1` for automatic scale.
`placement_fit()`	self	Fit image inside the control.
`placement_fill()`	self	Fill the control and crop if needed.
`placement_center()`	self	Center image without scaling.
`placement_stretch()`	self	Stretch image to the control.
`placement_top_left()`	self	Draw image at the top-left corner.
`play()`	self	Starts animated image or stream playback.
`stop()`	self	Stops animated image or stream playback.

image_pen

`image_pen` is created by `image.pen(color, thickness)`. It records drawing commands on the owning image and returns itself from drawing methods.

Method	Returns	Description
`move_to(x, y)`	self	Moves the current point.
`line_to(x, y)`	self	Draws a line from the current point.
`draw_line(x0, y0, x1, y1)`	self	Draws a line.
`draw_rect(x, y, width, height)`	self	Draws a rectangle outline.
`fill_rect(x, y, width, height)`	self	Fills a rectangle.
`draw_circle(cx, cy, diameter)`	self	Draws a circle outline.
`fill_circle(cx, cy, diameter)`	self	Fills a circle.
`draw_text(x, y, text)`	self	Draws text with default size and weight.
`draw_text(x, y, text, size)`	self	Draws text with a font size.
`draw_text(x, y, text, size, bold)`	self	Draws text with size and bold flag.
`draw_image(x, y, path)`	self	Draws another image at position.
`draw_image(x, y, path, width, height)`	self	Draws another image scaled to size.
`color(color)`	self	Sets pen and fill color.
`color(penColor, fillColor)`	self	Sets pen and fill colors separately.
`color_fill(color)`	self	Sets fill color.
`thickness(value)`	self	Sets line thickness.

Colors are numeric RGBA values used by the host color type.

Examples

view = image()
    .position(10, 10)
    .size(320, 200)
    .load("preview.png")
    .placement_fit();
 
window().title("Preview").size(360, 260).add(view).show();

stream = image_stream().load_folder("frames", "*.jpg");
view = image().position(10, 10).size(320, 240).load(stream).play();
window().title("Stream").size(360, 300).add(view).show();

view = image().position(10, 10).size(300, 200).load("drawing.png");
pen = view.pen(0xff0000ff, 2);
pen.draw_rect(10, 10, 120, 80)
   .draw_text(20, 40, "OK", 18, true);
 
window().title("Drawing").size(340, 260).add(view).show();

Previous: menu

Next: snake

Table of Contents