Welcome, Guest Login

Support Center

Canvas Layout

Last Updated: Jan 16, 2019 08:59PM EST

Canvas

Version: 4.13

Canvas Layout: A canvas for placing Blocks at fixed positions.

Usage

Canvas Layout is used to position Blocks at a specific position on a View. Canvas Layout Tutorial

Drag and Drop

Drag & drop Blocks anywhere on the Canvas Layout.
Right Click on a Block on the Canvas to edit that Block. Right Click also brings the contextual menu with may more functions like delete or rename, Swap, Order, Size and Position and the creation of Group and Scrolling Patterns.

Size & Position lets you use different coordinate system to specify how the Block will be positioned on the Canvas.

Version Notes:
4.13 Android version. Updating to this should provide no changes from its predecessor but it will allow upcoming enhancements to make builds faster.
4.12
IOS Only: Fix constraint and width / height priority. When an edge constraint value and size info is available, it will weight more.

4.11
Android Only: Fix for Tap events not triggering when a Button Block is used. Android: Added Disable Double Tap
v4.10
allows touches to go through the canvas when not touching a child element, and the canvas has no tap event script.

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.)
Disable Double Tap If this box is checked, then double tapping this block will trigger the tap event once instead of twice.
Layout Item Position Easily switch between different ways to position your Blocks<br/><br/>Learn more with the <a href="http://support.eachscape.com/customer/portal/articles/1588588-size-and-position" target="_blank">Size & Position</a> tutorial.
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.
Layout Item Position Adaptive 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 Use Absolute, Edge Constraint or Adaptive system of coordinates.<br><br>Learn more with the <a href="http://support.eachscape.com/customer/portal/articles/1588588-size-and-position" target="_blank">Size & Position</a> tutorial.
Menu Rename Block Rename a Block or create a Custom Block. Custom Blocks are Blocks you can reuse throughout your App.<br><br><a href="http://support.eachscape.com/customer/portal/articles/1364381-copy-reuse-delete-a-myblock" target="_blank">Copy, Reuse, Delete Blocks</a> tutorial.
Menu Delete Or Remove Block Delete a Block. If this Block is a Custom Block the Block will only be removed and will remain available for future use under the Custom Block Tab.<br><br><a href="http://support.eachscape.com/customer/portal/articles/1364381-copy-reuse-delete-a-myblock" target="_blank">Copy, Reuse, Delete Blocks</a> tutorial.
Menu Group Select the Components you want to group (Use your mouse, you can also press and hold shift key to select). Grouping is mostly used in conjunction with <a href="http://support.eachscape.com/customer/en/portal/articles/2154016-scrolling-pattern" target="_blank">Scrolling Pattern</a> to create groups of Blocks which match one record in a data source. You can also use Group to create your own Layout which you can publish to share with a broader audience or simply reuse it yourself.
Menu Ungroup Ungroup previously grouped block. See Group for more on what is available with the Group feature.
Menu Scrolling Pattern This is a very powerful feature which lets you create any design and scroll that design - the Pattern - vertically or horizontally. <br><br>If you are not familiar with Pattern it is well worth your time to go through the <a href="http://support.eachscape.com/customer/en/portal/articles/2154016-scrolling-pattern" target="_blank">Scrolling Pattern</a> tutorial.
Menu Swap Block Replace this block by another Block. You can only Swap a Block by a MyBlock, lean more about <a href="http://support.eachscape.com/customer/portal/articles/1364381-copy-reuse-delete-a-myblock" target="_blank">Copy, Reuse, Delete Blocks</a> tutorial. Swap maintains the position of the Block on the Layout, that's really helpful.
Menu Center Horizontally Center the Component Horizontally in the Layout it's in. If the Layout fills the entire screen then Center Horizontally will center horizontally on the screen. If this Block/Component is in a Layout which doesn't fill up the screen Center Horizontally will center WITHIN that Layout. Learn more on how to position a component on a Canvas Layout with the <a href="http://support.eachscape.com/customer/portal/articles/1588588-size-and-position" target="_blank">Size & Position</a> tutorial.
Menu Center Vertically Center the Component vertically in the Layout it's in. If the Layout fills the entire screen then Center Vertically will center vertically on the screen. If this Block/Component is in a Layout which doesn't fill up the screen Center Vertically will center WITHIN that Layout. Learn more on how to position a component on a Canvas Layout with the <a href="http://support.eachscape.com/customer/portal/articles/1588588-size-and-position" target="_blank">Size & Position</a> tutorial.
Menu Bring To Front Bring a Block/Component to the Front. Order is important: Blocks on top will intercept Tap event. For example, if you are using an Image Block as a Button and triggering an Event when user tap on that Image you want to make sure that Image Block is on TOP to capture the Tap. If it is under another Block the Tap will be intercepted by that other Block.
Menu Send To Back Push a Block/Component to the Back. Order is important: Blocks on top will intercept Tap event. For example, if you are using an Image Block as a Button and triggering an Event when user tap on that Image you want to make sure that Image Block is on TOP to capture the Tap. If it is under another Block the Tap will be intercepted by that other Block.
Menu Layout Order Set the order (depth) of the Components (Blocks or Layouts) on the Layout they are on. Order is important: Blocks on top will intercept Tap event. For example, if you are using an Image Block as a Button and triggering an Event when user tap on that Image you want to make sure that Image Block is on TOP to capture the Tap. If it is under another Block the Tap will be intercepted by that other 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