FVS Absolute Canvas

This document applies to users who have installed the FineVis Data Visualization plugin to learn FineVis functions.

Version

Function Description

The Absolute Canvas container component functions as a blank canvas. When other components are dragged into the absolute canvas, the parts extending beyond the canvas can be previewed by scrolling.

You can enable Top Display During Preview to freeze certain areas and to display them always at the top. The following figure shows the effect.

Note:

This document only introduces the unique functions of the Absolute Canvas component.

For details about the component animation, see FVS Cross-page Component Animation.

For details about the component attribute, see FVS Component Style and Attribute.

Create a FineVis visualization dashboard.

Choose Other > Container > Absolute Canvas in the component area to add the absolute canvas to the canvas. By default, "Drag the component/combination into the absolute canvas. The added component/combination can be laid out freely." is displayed.

(1) Moving components into the absolute canvas

Drag other components/combinations in the component area or on the current page to the absolute canvas. When the prompt "Release to enter the Absolute Canvas." appears, release the mouse to place them into the absolute canvas.

When you drag a component into the absolute canvas, the component size remains unchanged.

If a component extends beyond the left/top boundary of the absolute canvas, the component will automatically snap to the left/top boundary of the absolute canvas upon release. In other cases, the component will be placed at the release location.

The component can extend beyond the right/bottom boundary of the absolute canvas. In this case, horizontal/vertical scrollbars will appear when you select the absolute canvas or a component inside it and hover over the absolute canvas in the preview mode. You can scroll the page to view the complete content.

Note:

You cannot drag another absolute canvas or a tab component/combination containing an absolute canvas into an absolute canvas.

The following figure shows how to move components into the absolute canvas.

You can drag component layers in the component layer list into the absolute canvas layer, as shown in the following figure.

(2) Moving components out of the absolute canvas

You can move components out of the absolute canvas through the following three ways:

Drag a component within the absolute canvas directly out of the absolute canvas. When the prompt "Release to move out of Absolute Canvas." appears, release the mouse to move the component out of the absolute canvas. The moved-out component is located at the release location.

In the component layer list or the absolute canvas list, directly drag a component layer out of the absolute canvas layer. In this case, the position of the moved-out component stays unchanged.

In the absolute canvas layer list, hover over a component and choose More > Move Out to move this component out of the absolute canvas. In this case, the moved-out component is displayed on the right of the absolute canvas by default.

(3) Moving component positions

You can directly drag a component or select a component and press any arrow key to move it within the absolute canvas.

If the moved component extends beyond the right/bottom boundary of the absolute canvas, horizontal/vertical scrollbars will appear. You can scroll the canvas to view content that extends beyond the absolute canvas.

You cannot move the component to a position beyond the left/top boundary of the absolute canvas.

The name of the current absolute canvas is displayed in the absolute canvas list by default. You can hide, rename, delete, and lock the absolute canvas, which are consistent with those in the layer list.

After you drag a component or combination into the absolute canvas, the component order displayed in Absolute Canvas List remains consistent with the order displayed in Component Layer on the left.

The order can be changed by dragging up/down or using the Arrange button.

You can hide, rename, delete, combine, and uncombine components.

For components within the absolute canvas, you can set attributes such as component content, interaction, and component styles, but not animation.

You can select Top Display During Preview to enable it during preview on PCs or mobile terminals. In this case, when you preview the template, the absolute canvas component will stick to the top after reaching the top of the screen during scrolling.

If you have set Top Display During Preview for multiple absolute canvas components, they will stick to the top sequentially during preview when you scroll the page, which means Top Display During Preview takes effect on only one component at the same time, as shown in the following figure.

Note:

1. Top Display During Preview does not take effect for absolute canvases containing iframe components or within tab components.

2. After you enable the mobile layout, in mobile preview: Top Display During Preview does not take effect for absolute canvas blocks within 

containers (tab components, and combinations); if an absolute canvas block is placed side by side with other components (that is, multiple 

components in one row), Top Display During Preview also does not work.

When Enable Lock Resizing is deselected, resizing the absolute canvas does not change the size of internal components.

When Enable Lock Resizing is selected, resizing the absolute canvas will proportionally change the size of internal components.

The following figure shows the effect.

Mobile layout effects for the absolute canvas can be set independently. After enabling re-layout, you can set component spacing.

The following figure shows the effect.