3.3.4 Canvases
3.3.4.1 Canvas
3.3.4.2 Editor  Canvas
On this page:
Canvas
Canvas  Context
Canvas  Context.client_  size
Canvas.Style
Canvas.Style.border
Canvas.Style.control_  border
Canvas.Style.choice
Canvas.Style.vscroll
Canvas.Style.hscroll
Canvas.Style.resize_  corner
Canvas.Style.gl
Canvas.Style.no_  autoclear
Canvas.Style.transparent
Canvas.Style.no_  focus

image

class

class gui.Canvas():

  implements WindowChildView

  constructor (

    data :: ObsOrValue.of(Any),

    draw :: draw.DC Any -> ~any,

    ~mouse: mouse :: (KeyEvent, CanvasContext) -> ~any = Function.pass,

    ~key: key :: (MouseEvent, CanvasContext) -> ~any = Function.pass,

    ~label: label :: ObsOrValue.of(maybe(View.LabelString)) = "canvas",

    ~enable: enable :: ObsOrValue.of(Boolean) = #true,

    ~styles: styles :: ObsOrValue.of(List.of(Canvas.Style)) = [],

    ~margin: margin :: ObsOrValue.of(View.Margin) = [0, 0],

    ~min_size: min_size :: ObsOrValue.of(View.Size) = [#false, #false],

    ~stretch: stretch :: ObsOrValue.of(View.Stretch) = [#true, #true]

  )

Creates a canvas view. When the view is rendered, the draw function is called as

draw(dc :: draw.DC, data_val)

to draw the canvas’s content to a backing store dc ~var, where data_val is the value of Obs.peek(data) when data is an observable. The draw function is called to update the canvas content when data is an observable and its value changes.

When a mouse or key event is received by a rendered canvas, the mouse or key function is called with a MouseEvent or KeyEvent, respectively, and a CanvasContext.

interface

interface gui.CanvasContext

 

property

property (ctx :: gui.CanvasContext).client_size :: Size

A CanvasContext represents a canvas instance that receives mouse or keyboard events so that properties of the instance can be accessed, including its size.

A canvas style symbol:

  • #'border: Gives the canvas a thin border.

  • #'control_border: Gives the canvas a thick border like EditorCanvas.

  • #'choice: Gives the canvas a popup button that is like an Input with a ~choices list. This style is intended for use with #'control_border and not with #'hscroll or #'vscroll.

  • #'hscroll: Enables horizontal scrolling (initially visible, but inactive).

  • #'vscroll: Enables vertical scrolling (initially visible, but inactive).

  • #'resize_corner: Leaves room for a resize control at the canvas’s bottom right when only one scrollbar is visible.

  • #'gl: Creates a canvas for OpenGL drawing instead of (or in addition to) normal draw.DC drawing. This style is usually combined with #'no_autoclear.

  • #'no_autoclear: Prevents automatic erasing of the canvas by the windowing system.

  • #'transparent: The canvas is “erased” by the windowing system by letting its parent show through.

  • #'no_focus: Prevents the canvas from accepting the keyboard focus when the canvas is clicked or when the WindowChildView.focus method is called.