Canvas Layout: A canvas for placing Blocks at fixed positions.Click Here to View How-To Video
Drag this block into your app and then you can edit it's settings by right clicking on the block with your mouse.
Version: 4.1 (click here for version information)
Canvas 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 v5.0
Using EachScape Visual Editor v5.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.
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 v4.0, in Visual Editor v5.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.
- v4.1 allows touches to go through the canvas when not touching a child element, and the canvas has no tap event script.
|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.|
|Menu Size And Position||Bring up property widget for size and position.|
|Menu Rename Block||Rename / Create My Block|
|Menu Delete Or Remove Block||Delete Block if it's not My block. Remove block if it's My Block.|
|Menu Ungroup||Ungroup grouped block.|
|Menu Bring To Front||Bringing child block to front.|
|Menu Send To Back||Send child block to back.|
|Menu Group||Group selected item. To select press and hold shift key, and click child block.|
|Menu Generate Pattern||Generate pattern|
|Menu Swap Block||Swap block to other My Block.|
|Menu Center Horizontally||Center Item horizontally in the content area.|
|Menu Center Vertically||Center Item vertically in the content area.|
|Menu Layout Order||Bring up layout order widget.|
Before Draw, Tap