Canvas

Canvas definition: properties, methods, events and examples.

The UI.Canvas is used to display elements in absolute position. It is assigned to UI.SDPanelUI.GridUI.Table, or parent UI.Canvas  .

Examples:

canvas
<?php 
/**
 * Main object.
 * @author Kikapp
 * @version 1.0
 */

$win = new SDPanel();
$win -> setCaption("First Canvas!");

$canvas= new Canvas();
$canvas-> setWidth("100%");
$canvas-> setHeight("100%");

$mainTable= new Table();
$table= new Table();

$label= new Label();
$label-> setCaption("First image:");

$label2= new Label();
$label2-> setCaption("Second image:");


$image= new Image();
$image-> setImage("img/Android/hdpi/appicon.png");

$image2= new Image();
$image2-> setImage("img/Android/hdpi/lunchimage.png");


$table-> addControl($label,1,1);
$table-> addControl($label2,3,1);

$canvas-> addPosition($image2,"0%","100%","0","350dip","0%","100%",0);
$canvas-> addPosition($image,"0%","100%","0","66dip","0%","100%",1);
$canvas-> addPosition($table,"0%","100%","0","180dip","0%","100%",2);

$mainTable-> addControl($canvas,1,1);

$win-> addControl($mainTable);

?>

Properties:

  • width : String
    Canvas width, in platform-specific units i.e "10dip" or "10%".
  • height : String
    Canvas height, in platform-specific units i.e "10dip" or "10%".
  • visible : Boolean
    Determines whether the Canvas is visible or not.
  • enable : Boolean
    Determines whether the Canvas is enabled or disabled.
  • className : Class Class defined in .css stylesheet
  • control : Control Canvas control
  • invisibleMode : PositionMode Determines view behaviour if Canvas is not visible ie. "Keep Space" or "Collapse Space"
  • autoGrow : Boolean
    Determines whether the Canvas has grow behavior.

Methods:

  • setWidth( width ) Sets the width of the Canvas.
  • setHeight( height )
    Sets the height of the Canvas.
  • setVisible( visible ) Sets wether the Canvas is visible or not.
  • setEnable( enable ) Sets wether the Canvas is enable or not.
  • addPosition(control, left, width, top, height, right, bottom, zorder)
    Add an element inside Canvas.
    • Parameters control : Control
      • left : String i.e "0%". Distance from the control to the left side of the canvas
      • width : String i.e "25dip". Width of the control
      • top : String i.e "0%". Distance from the control to the top of the canvas
      • height : String i.e "25dip". Height of the control
      • right : String i.e "0%". Distance from the control to the right side of the canvas
      • bottom : String i.e "25dip". Distance from the control to the bottom of the canvas
      • zorder : Integer
      • The ZOrder property specifies the stack order of a control. (A control with greater stack order is always in front of a control with a lower stack order)
  • setInvisibleMode( invisibleMode ) Sets the value of the invisible mode  of the Canvas.
  • setAutoGrow( autoGrow ) Sets the value of the auto grow property of the Canvas.

Events:

  • onTap( callBack )
    Fired when the device detects a click against the Table.
    • Parameters callBack : Function Function to invoke when the event is fired.
    • Returns void
  • onLongTap( callBack )
    Fired when the device detects a long tap against theTable.
    • Parameters callBack : Function Function to invoke when the event is fired.
    • Returns void
  • onDoubleTap( callBack )
    Fired when the device detects a double tap against the Table.
    • Parameters callBack : Function Function to invoke when the event is fired.
    • Returns void

Download code example

Rate This Article

(0 out of 0 people found this article helpful)