Class zebkit.ui.zCanvas
extends <zebkit.ui.web.HtmlCanvas>
<zebkit.ui>

zCanvas zebkit UI component class. This is starting point for building zebkit UI. The class is a wrapper for HTML5 Canvas element. The main goals of the class is catching all native HTML5 Canvas element events and translating its into Zebkit UI events.

zCanvas instantiation can trigger 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. To re-use an existent in DOM tree HTML5 canvas element pass an id of the canvas element:

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

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

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

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. To start building UI use root layer. The layer is standard zebkit UI panel that is accessible via "root" zCanvas field:

 // create canvas
 var canvas = zebkit.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 zebkit.ui.Label("Label");
 label.setBounds(10,10,100,50);
 root.add(label);
Constructor:
zebkit.ui.zCanvas ([element], [width], [height])

Parameters:
  • [element] <String | Canvas>

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

  • [width] <Integer>

    a width of an HTML canvas element

  • [height] <Integer>

    a height of an HTML canvas element




private <Boolean> $keyPressed (e)
private <Boolean> $keyReleased (e)
private <Boolean> $keyTyped (e)
private void $pointerClicked (e)
private void $pointerDragEnded (e)
private void $pointerDragged (e)
private void $pointerDragStarted (e)
private void $pointerEntered (e)
private void $pointerExited (e)
private void $pointerMoved (e)
private void $pointerPressed (e)
private void $pointerReleased (e)
protected <Integer> $toElementX (pageX, pageY)
protected <Integer> $toElementY (pageX, pageY)
public <zebkit.ui.Panel> getLayer (id)
public void setSizeFull (b)


Inherited methods:
$setConstraints(c)    add(constr, d)    byConstraints([p], c)    byPath(path, [cb])    calcPreferredSize(target)    crotate(r)    doLayout( )    fire(event, [path], [params])    focused( )    getBottom( )    getCanvas( )    getComponentAt(x, y)    getHorPadding( )    getLeft( )    getPreferredSize( )    getRight( )    getTop( )    getVerPadding( )    hasFocus( )    indexOf(c)    insert(i, constr, d)    invalidate( )    invalidateLayout( )    kidAdded(index, constr, l)    kidRemoved(i, l)    laidout( )    load(JSON)    off([eventName], [path], [cb])    on([eventName], [path], cb)    paintComponent(g)    paintViewAt(g, ax, ay, v)    project(x, y)    properties([path], props)    property([path], name, value)    recalc( )    relocated(px, py)    remove(c)    removeAll( )    removeAt(i)    removeByConstraints(ctr)    removeMe([after])    repaint([x], [y], [w], [h])    requestFocus( )    requestFocusIn([timeout])    resized(pw, ph)    setAt(i, d)    setAttribute(name, value)    setAttributes(attrs)    setBackground(v)    setBorder([v])    setBottomPadding(bottom)    setBounds(x, y, w, h)    setByConstraints(constr, c)    setColor(c)    setConstraints(ctr)    setContent(an)    setEnabled(b)    setFont(f)    setId(id)    setKids(a)    setLayout(m)    setLeftPadding(left)    setLocation(xx, yy)    setPadding(v)    setParent(o)    setPreferredSize(w, h)    setProperties([path], props)    setRightPadding(right)    setSize(w, h)    setStyle(a, a)    setStyles(styles)    setTopPadding(top)    setVisible(b)    toBack( )    toFront( )    toPreferredHeight( )    toPreferredSize( )    toPreferredWidth( )    toView(target)    update(g)    validate( )    validateMetric( )    vrp( )   


private <Boolean> $keyPressed (e)

Catches key pressed events, adjusts and distributes it to UI hierarchy


Parameters:
Returns: <Boolean>

true if the event has been processed

private <Boolean> $keyReleased (e)

Catches key released events, adjusts and distributes it to UI hierarchy


Parameters:
Returns: <Boolean>

true if the event has been processed

private <Boolean> $keyTyped (e)

Catches key typed events, adjusts and distributes it to UI hierarchy


Parameters:
Returns: <Boolean>

true if the event has been processed

private void $pointerClicked (e)

Catches pointer clicked events, adjusts and distributes it to UI hierarchy.


Parameters:
private void $pointerDragEnded (e)

Catches pointer drag ended events, adjusts and distributes it to UI hierarchy.


Parameters:
private void $pointerDragged (e)

Catches pointer dragged events, adjusts and distributes it to UI hierarchy.


Parameters:
private void $pointerDragStarted (e)

Catches pointer drag started events, adjusts and distributes it to UI hierarchy.


Parameters:
private void $pointerEntered (e)

Catches pointer entered events, adjusts and distributes it to UI hierarchy


Parameters:
private void $pointerExited (e)

Catches pointer exited events, adjusts and distributes it to UI hierarchy


Parameters:
private void $pointerMoved (e)

Catches pointer moved events, adjusts and distributes it to UI hierarchy.


Parameters:
private void $pointerPressed (e)

Catches pointer pressed events, adjusts and distributes it to UI hierarchy.


Parameters:
private void $pointerReleased (e)

Catches pointer released events, adjusts and distributes it to UI hierarchy.


Parameters:
protected <Integer> $toElementX (pageX, pageY)

Transforms the pageX coordinate into relatively to the canvas origin coordinate taking in account the canvas transformation


Parameters:
  • pageX <Number>

    a pageX coordinate

  • pageY <Number>

    a pageY coordinate


Returns: <Integer>

an x coordinate that is relative to the canvas origin

protected <Integer> $toElementY (pageX, pageY)

Transforms the pageY coordinate into relatively to the canvas origin coordinate taking in account the canvas transformation


Parameters:
  • pageX <Number>

    a pageX coordinate

  • pageY <Number>

    a pageY coordinate


Returns: <Integer>

an y coordinate that is relative to the canvas origin

public <zebkit.ui.Panel> getLayer (id)

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:
Returns: <zebkit.ui.Panel>

a layer (children) component

public chainable setSizeFull (b)

Force the canvas to occupy the all available view port area


Parameters:
  • b <Boolean>

    true to force the canvas be stretched over all available view port area



Inherited attributes:
private HTMLElement $container    private CanvasRenderingContext2D $context    private Object x:Integer, y:Integer, width:Integer, height:Integer $da    public zebkit.draw.View bg    public zebkit.draw.View border    public Boolean canHaveFocus    public Object constraints    public HTMLElement element    public Integer height    private Boolean isDOMElement    public Boolean isEnabled    public Boolean isValid    public Boolean isVisible    public Array kids    public zebkit.layout.Layout layout    public zebkit.layout.Layoutable parent    public Integer width    public Integer x    public Integer y   



private <Boolean> $isRootCanvas

Indicates this the root canvas element

private <Object> $layers

Dictionary to track layers by its ids.

public <Boolean> isSizeFull

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




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 zebkit.ui.zCanvas(300, 300, [
     function canvasInitialized() {
         // do something
     }
]);