Welcome, Guest Login

Support Center

Canvas 4-0 Layout

Last Updated: Jun 13, 2017 03:21PM EDT

Canvas 4-0

Canvas (Static) Layout: A canvas for placing Blocks at fixed positions. Layout Version: 4.0

Click Here to View How-To Video

Usage

Version: 4.0

The Canvas (formerly Static) Layout is a very powerful Layout that allows positioning of Blocks relative to its edges. It takes a number of settings, each of which is used to identify and place a specific Block.

Drag, Drop & Right Click in Visual Editor v2.0

Using EachScape Visual Editor v2.0 you can drag & drop Blocks anywhere you want on the Canvas Layout. If you Right Click on a Block you can edit that Block, delete it, change its size & position and if you have more than one Block group them together.

Edge Constraints
The parameter in each setting that controls the layout is the "Edge Constraints" parameter. It's is a cross-shaped control that has values for Top, Left, Right, and Bottom constraints. A constraint on a given edge, if specified, anchors the edge of the Block to the corresponding edge of the container (the Canvas Layout).

If a constraint is not specified, that edge is considered freely adjustable depending on the content. A positive value for a constraint is an "inset" from the container, meaning it indicates an amount of margin between the edge of the child and container respectively. If a value is negative, the child edge will be outside the container edge by that amount. (This may be of limited use in some circumstances.)

In the most constrained form, where all four values are specified, the child will be anchored to all four edges of the container with the appropriate offset. If all values are zero, the child Block (the Block on the Canvas) will fill the container completely.

If all values are unspecified (blank), the block will be centered within the container and take up as much space as the block requires for its content. How this is determined is specific to the child block itself. (For example, a Text Block with the label "Hi." would only be large enough to display the text.)

While the block implements constraints between the container and the children, the are no constraints BETWEEN the children. Thus, they will overlap if their placement dictates. (This is a feature.) The block are laid out in ascending order, back to front. This means that if the size and placement of Block #2 would overlap with Block #1, Block #2 would be placed on top of Block #1.

Typical patterns of use are:

(This is especially useful for Editor v1.0, in Editor v2.0 everything is done visually. But it is useful to understand how it works so you can build more sophisticated apps when needed)

  • Specify all four constraints for backgrounds
  • Specify two adjacent edges (i.e. Top and Left, Top and Right, Bottom and Right, etc.) to place a block that sizes itself to its content.
  • Specify three adjacent edges to (i.e. Left, Bottom, Right) to expand the block in one dimension and anchor it at an edge of the container. (This is a typical case for captions over image blocks.)

Variables for dynamic screens:

As with most parameter values, the constraint values can be variable (expander expressions). This means that they could get the placement constraints from a data source, or potentially use different values depending on the orientation of the device.

Parameters

Blocks The number of child blocks in this layout.
Center This Centers the Block in the Parent Block (Android Only)
Block The custom block to place.
Cell Width If supplied, the fixed width of the child. (Overrides constraints.)
Cell Height If supplied, the fixed height of the child. (Overrides constraints.)
Edge Constraints Used to specify anchoring of the edges of the block to the corresponding edges of the container. (See Usage for more discussion on how this works.)
Rotate X Rotation (clockwise) around the X axis (horizontal center of the image).
Rotate Y Rotation (clockwise) around the Y axis (vertical center of the image).
Rotate Z Rotation (clockwise) around the Z axis (the center point of the image).
Perspective Depth Strength of the perspective transform. Larger values give less dramatic perspective. (Defaults to 1000.)
Layout Item Position Set the position of the block. There are three ways that blocks could be laid out. Absolute, Edge Constraint, and Mixed of two. Please choose one.
Layout Item Position Absolute Positioning method. This method will position block by setting top, left, width and height.
Layout Item Position Edge Constraint Positioning method. This method will position block by setting the distance from top, bottom, left and right.
Layout Item Position Mixed Positioning method. This method will position block either one direction ( vertically or horizontally ) constraint by the distance, and the other by setting one distance from the edge and also the length of the block.

Event(s)

Before Draw, Tap

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets3.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete