Zebra API Doc

zebra.ui.zCanvas Class

Extends zebra.ui.Panel

zCanvas zebra UI component class. This is one of the key class everybody has to use to start building an UI. The class is a wrapper
for HTML Canvas element. Internally it catches all native HTML Canvas events and translates its into Zebra UI events.

zCanvas instantiation triggers a new HTML Canvas will be created and added to HTML DOM tree. It happens if developer doesn't pass an HTML Canvas element reference or an ID of existing HTML Canvas element If developers need to re-use an existent in DOM tree canvas element they have to pass id of the canvas that has to be used as basis for zebra UI creation or reference to a HTML Canvas element:

  // a new HTML canvas element is created and added into HTML DOM tree
  var canvas = zebra.ui.zCanvas();

  // a new HTML canvas element is created into HTML DOM tree
  var canvas = zebra.ui.zCanvas(400,500);  // pass canvas size 

  // stick to existent HTML canvas element 
  var canvas = zebra.ui.zCanvas("ExistentCanvasID");  

The zCanvas has layered structure. Every layer is responsible for showing and controlling a dedicated type of UI elements like windows pop-up menus, tool tips and so on. Developers have to build an own UI hierarchy on the canvas root layer. The layer is standard UI panel that is accessible as zCanvas component instance "root" field.

  // create canvas
  var canvas = zebra.ui.zCanvas(400,500); 

  // save reference to canvas root layer where 
  // hierarchy of UI components have to be hosted 
  var root = canvas.root;

  // fill root with UI components
  var label = new zebra.ui.Label("Label");
  label.setBounds(10,10,100,50);
  root.add(label);

Constructor

zebra.ui.zCanvas

(
  • [element]
  • [width]
  • [height]
)

Parameters:

  • [element] String | Canvas optional

    an ID of a HTML canvas element or reference to an HTML Canvas element.

  • [width] Integer optional

    a width of an HTML canvas element

  • [height] Integer optional

    a height of an HTML canvas element

Methods

$mouseMoved

(
  • id
  • e
)
protected

Catch native canvas mouse move events

Parameters:

  • id String

    an touch id (for touchable devices)

  • e String

    a mouse event that has been triggered by canvas element

        {
            pageX : {Integer},
            pageY : {Integer},
            target: {HTMLElement}
        }

fullScreen

()

Stretch Canvas to occupy full screen area

getLayer

(
  • id
)
zebra.ui.Panel

Get the canvas layer by the specified layer ID. Layer is a children component of the canvas UI component. Every layer has an ID assigned to it the method actually allows developers to get the canvas children component by its ID

Parameters:

  • id String

    a layer ID


Return: zebra.ui.Panel

a layer (children) component

setAttribute

(
  • name
  • value
)
protected

Set HTML Canvas element hosted by the UI component attribute

Parameters:

  • name String

    an attribute name

  • value String

    an attribute value

setStyles

(
  • styles
)
protected

Set HTML canvas element hosted by the UI component CSS styles

Parameters:

  • styles Object

    styles to be applied to the HTML canvas component

Attributes

$da

Object x:Integer, y:Integer, width:Integer, height:Integer private

Keeps rectangular "dirty" area of the canvas component

canvas

Canvas protected readonly

Reference to HTML Canvas element where the zebra canvas UI components are hosted

isFullScreen

Boolean readonly

Indicate if the canvas has to be stretched to fill the whole screen area.

Events

canvasInitialized

Implement the event handler method to catch canvas initialized event. The event is triggered once the canvas has been initiated and all properties listeners of the canvas are set upped. The event can be used to load saved data.

var p = new zebra.ui.zCanvas(300, 300, [
     function canvasInitialized() {
         // do something
     }
]);