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);
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) |
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:
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:
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:
|















public
![]() isSizeFull
Indicate if the canvas has to be stretched to fill the whole view port area. |