FVS Canvas Edit and Adaptation

This document is applicable to users who have installed the FineVis Data Visualization plugin to learn relevant FVS template functions.

Version

Function Description

This document briefly introduces the FVS canvas attributes and adaptation.

A FVS template is a canvas with multiple pages where many components are included, as shown in the following figure.

During FVS visualization dashboard creation, you can select the canvas size, or customize the canvas size. The unit of the custom input size is px. The width and height values range from 1px to 50000px.

You can modify the canvas size in the FVS visualization dashboard. After entering the custom size, click the blank area on the design page to save the operation.

In V2.2.1 and later versions, you can select Enable Lock Resizing. If Enable Lock Resizing is selected, the size of the component on the canvas will be resized proportionally as the canvas size changes.

The size adjustment is effective for all pages in the canvas.

The Adaptation function (available options: Auto, Vertically, Horizontally, Horizontally and Vertically, and None) is effective for all pages in the template, as shown in the following figure.

Auto

If you select Auto, the canvas takes the one-screen display mode with two sides (either vertically or horizontally) as blank in the color same as that in the background (recommended). The following figures show the effects respectively.

• Blank space left on the left and right side

• Blank space left on the up and down side

Vertically

During the preview, the canvas will cover the whole page vertically. The scrolling bar will appear if the canvas does not fit horizontally.

Horizontally

During the preview, the canvas will cover the whole page horizontally. The scrolling bar will appear if the canvas does not fit vertically.

Horizontally and Vertically

If you select Horizontally and Vertically, the canvas covers the whole web page both horizontally and vertically during the preview. You are advised to set the canvas size based on the actual aspect ratio of the display screen, avoiding the inappropriate aspect ratio of the extended template.

Note:

 If you select Horizontally and Vertically, the template page/component background may be misaligned. You are advised to set the background filling method of the template page/component to Stretch, as shown in the following figure.

None

If you select None, the template display content does not change proportionally with the browser.

Adjusting the display size will only change the canvas size displayed in the editor instead of its actual size.

You can modify the display ratio (supported value range: 10% to 400%) manually, click the icons next to the drop-down box to adjust the ratio, or select a preset ratio from the drop-down list.

Click the Adapt to Canvas icon on the right of the drop-down box, and you can quickly adjust the canvas display ratio and position and locate the canvas.

Note:

In versions earlier than V3.2.0, the Fit button, which is modified to the Adapt to Canvas icon in V3.2.0 and later versions, was in the drop-down list of the preset ratio.

Alternatively, you can move the canvas or change its display size through shortcuts, as shown in the following figure.

Note:

In V3.2.0 and later versions, you can press Ctrl and scroll the mouse wheel or use the touchpad to zoom the canvas.

In V2.1.1 and later versions, you can open/close the canvas full-screen mode through the shortcut Ctrl + \ (Command + \ in the Mac system).

• The canvas full-screen mode is only for zooming in the display. The toolbar and configuration panel of the current template are hidden. You cannot configure relevant functions but can perform operations supported within the canvas.

• The shortcuts cannot take effect until you click the canvas or any component when you just open or switch to the template.

• For different templates, the full-screen status is independent. That is, templates do not affect each other.

• The full-screen status is invalid if you reopen the template after closing it.

Auxiliary Line Operation

The auxiliary line function is supported on the canvas, allowing you to locate the component coordinates and adjust the component alignment more conveniently.

The following shows the auxiliary line operations.

1. Hover the cursor over the ruler at the top or left with a dotted auxiliary line, which moves as the cursor moves and displays the current scale value (unit: px).

2. Click a specific position on the ruler to add an auxiliary line.

3. After adding an auxiliary line, move the cursor to the added auxiliary line, in which the cursor changes to the double arrow style. In this case, you can perform the following operations:

• Select the auxiliary line by clicking the left mouse button.

• Move the auxiliary line by holding down the left mouse button.

• Delete the auxiliary line by double-clicking the left mouse button, pressing Delete/Backspace after selecting the auxiliary line, or directly dragging the auxiliary line outside the canvas visible area and releasing the mouse left button.

Note:

 The above operations do not support multiple selection and batch operations.

4. Hide all auxiliary lines by clicking the xxx icon in the top left corner of the ruler. Note: You cannot hide an individual auxiliary line. All auxiliary lines will be re-displayed if you add auxiliary lines again after hiding.

Component Coordinates and Alignment

The following logic is applied when components are moved on the canvas:

• The component coordinates (in the x,y format like 206,139) are displayed in the top left corner of the component when you drag a component on the canvas.

• Alignment lines appear with the component distance displayed when you drag component 2 to the position that aligns horizontally or vertically with component 1.

• The component can be snapped to and aligned with the auxiliary line quickly when you move a component to the position near the auxiliary line (provided that you have added an auxiliary line).