canvas-gui
    Preparing search index...

    Class CvsViewer

    Displays a layered image the same size or larger than the view.

    Scrolling: if the image is larger than the control then it can panned by dragging the mouse on the image. Alternatively the scrollbars, which automatically appear when if needed, can be used to pane the image.

    Zooming: requires the user to request a scaler when creating this control. When the mouse is near the centre a slider will appear which can be used to zoom in to and out of te image.

    This control also supports layers where multiple images can be layered to make the final visual. Layers can be added, removed, hiiden and show on an individual basis

    Index

    Accessors

    id isEnabled isOpaque isVisible type

    Methods

    addChild addLayers appendLayers config deleteLayers disable enable frame hide hideLayer layers leaveParent moveBy moveTo opaque parent removeChild scale scaler scheme setAction setEnabled setVisible show showLayer status transparent view

    Accessors

    • get id(): string

      The unique identifier for this control.

      Returns string

    • get isEnabled(): boolean

      This is true if the control can respond to UI events else false.

      Use enable() and disable() to enable and disable it.

      Returns boolean

    • get isOpaque(): boolean

      This is true if the control background is opaque else false.

      Use opaque() and transparent() display / hide the background.

      Returns boolean

    • get isVisible(): boolean

      This is true if the control is visible else false.

      Use hide() and show() to set visibility.

      Returns boolean

    • get type(): string

      The type name for this control.
      (type name = class name without the Cvs prefix)

      Returns string

    Methods

    • Add a child to this control using its relative position [rx, ry]. If rx and ry are not provided then it uses the values set in the child.

      Parameters

      • child: any

        is the actual control or its id

      • Optionalrx: number
      • Optionalry: number

      Returns any

      this control

    • Adds additional images the image(s) to those already displayed in this viewer. They will be inserted after the position by the first parameter.

      All additional images will be resized to match the first (bottom) layer.

      Parameters

      • idx: number

        an image or an array of images

      • img: cvsIcon | cvsIcon[]

        an image or an array of images

      Returns CvsViewer

      this control

    • Appends additional image(s) to those already in this viewer. These images will appear above any pre-existing layers.

      The additional images will be resized to match the first (bottom) layer.

      Parameters

      • img: cvsIcon | cvsIcon[]

        an image or an array of images

      Returns CvsViewer

      this control

    • Execute one or more configuration methods on this control.

      The parameter is a user defined object where each field is the name of a configuration method and its value is the method's parameter(s). Multiple parameters should be in an array and use 'undefined' if the method expects no parameters.

      This object will change the color scheme, text size and alignment, it will also make sure it is visible.

      { scheme : 'red', textSize : 12, textAlign: ['left', 'top'], show : undefined }
      If the field name does not exist or not a valid function of this control it will be silently ignored.

      There is no error checking on the parameters, it is up to the user to ensure they are valid for the control method.

      Parameters

      • cfg: any

        the configuration object

      Returns CvsViewer

      this control

    • Deletes one or more layers from this viewer.

      Parameters

      • idx: number

        the starting layer to delete

      • nbr: number

        the number of layers to delete

      Returns CvsViewer

      this control

    • Disables this control.

      Parameters

      • Optionalcascade: boolean

        if true disable child controls

      Returns CvsControl

      this control

    • Enables this control.

      Parameters

      • Optionalcascade: boolean

        if true enable child controls

      Returns CvsControl

      this control

    • Sets the stroke weight to use for the frame. If not provided or <0 then no frame is drawn.

      Parameters

      • sw: number = 0

        the stroke weight for the frame

      Returns CvsViewer

      this control

    • Make this control invisible

      Returns CvsControl

      this control

    • Make a layer invisible

      Parameters

      • n: number

        the layer number ≥0

      Returns CvsViewer

      this control

    • Sets the image(s) to be displayed in this viewer. Any pre-existing layers will be deleted.

      All images will be resized to match the first (bottom) layer.

      Parameters

      • img: cvsIcon | cvsIcon[]

        an image or an array of images

      Returns CvsViewer

      this control

    • Remove this control from its parent

      Returns CvsPin

      this control

    • Move this control relative to current position.

      Parameters

      • x: number

        horizontal distance

      • y: number

        vertical distance

      Returns CvsViewer

      this control

    • Move this control to an absolute position.

      Parameters

      • x: number

        horizontal position

      • y: number

        vertical position

      Returns CvsViewer

      this control

    • Makes the controls background opaque. The actual color depends on the controls color scheme.

      The second parameter, alpha, is optional and controls the level of opaqueness from 0 - transparent to 255 - fully opaque (default value).

      Parameters

      • alpha: number = 255

        alpha value for controls background color.

      Returns CvsControl

      this control

    • Adds this control to another control which becomes its parent.

      Parameters

      • parent: any

        is the parental control or its id

      • Optionalrx: number

        x position relative to parent

      • Optionalry: number

        y position relative to parent

      Returns CvsPin

      this control

    • Remove a child control from this one so that it stays in same screen position.

      Parameters

      • child: any

        the control to remove or its id

      Returns CvsViewer

      this control

    • Sets or gets the current scale in use.

      If no parameters are passed the the current scale is returned. A single parameter sets the current scale and three parameter sets the current scale and the limits for the zoom slider.

      Parameters

      • v: number

        the scale to use

      Returns number | CvsViewer

      this control or the current scale

    • Sets the existing scaler value (if there is no scaler it will be created) and limits. The initial value will be constrained to the limits.

      Parameters

      • v: number

        the scale to use

      • l0: number

        the lowest scale allowed

      • l1: number

        the highest scale allowed

      Returns CvsViewer

      this control

    • If the name of a valid color scheme is provided then it will use it to display the control, non-existant scheme names will be ignored. In both cases this control is returned.

      If there is no parameter it returns the name of the current color scheme used by this control.

      Parameters

      • Optionalname: string

        the color scheme name e.g. 'blue'

      • Optionalcascade: boolean

        if true propogate scheme to all child controls.

      Returns ColorScheme | CvsControl

      this control or the control's color scheme

    • This sets the event handler to be used when this control fires an event. The parameter can take one of three forms:

      1. Arrow function definition
      2. Anonymous function definition
      3. Named function declaration

      Parameters

      • event_handler: Function

        the function to handle this control's events.

      Returns CvsViewer

      this control

    • An alternative to the enable / disable methods.

      Parameters

      • enable: boolean

        true / false

      • Optionalcascade: boolean

        true apply to all children

      Returns CvsPin

      this control

    • An alternative to the show / hide methods.

      Parameters

      • visible: boolean

        true / false

      • Optionalcascade: boolean

        if true hide children

      Returns CvsPin

      this control

    • Make this control visible

      Returns CvsControl

      this control

    • Make a layer visible

      Parameters

      • n: number

        the layer number ≥0

      Returns CvsViewer

      this control

    • The current status is an object with 3 fields { cX, cY, scale } where -

      • cX, cY is the position in the image that correseponds to the view center and
      • scale is the current scale used to display the image.

      Returns { cX: number; cY: number; scale: number }

      the current status

    • Makes the controls background fully transparent.

      Returns CvsControl

      this control

    • Sets the view of the image to be displayed. If you enter values outside the image or ar scale value outside scaler limts they will be constrained to legal action on the viewer to report back changes to the view centre and/or scale attributes.

      Parameters

      • wcx: number
      • wcy: number
      • wscale: number = ...

      Returns CvsViewer

    Settings

    Member Visibility

    On This Page

    Accessors
    Methods