FVS Canvas Edit and Adaptation

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

Version

Function Description

This document briefly introduces the FVS attributes and adaptation.

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

You can set the canvas size when creating a FVS template, or modify the canvas size through the setting tool below the editor.

Alternatively, you can set the canvas width and height (value range: 1px to 50000px) manually.

After entering the custom size, click the blank area on the design page to save the operation. The canvas size modification is effective for all pages on the canvas.

The Adaptation function (value options: Auto, Vertically, Horizontally, Horizontally and Vertically, and None) is effective for all pages in the template.

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 with the background. The following figures show the effects respectively.

• Horizontal blank area effect

• Vertical blank area effect

Vertically

If you select Vertically, the canvas covers the whole web page vertically during preview. A horizontal scrolling bar appears when the content exceeds the canvas width.

Horizontally

If you select Horizontally, the canvas covers the whole web page horizontally during preview. A vertical scrolling bar appears when the content exceeds the canvas height.

Horizontally and Vertically

If you select Horizontally and Vertically, the canvas covers the whole web page both horizontally and vertically during 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.

The adjustment of the canvas display size only affects the canvas size displayed in the editor, not the actual canvas size.

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

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

In the FineVis Data Visualization plugin 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 and display. The toolbar and configuration panel of the current template are hidden. You cannot configure relevant functions, except 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: pix).

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 the Delete/Backspace key 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 selections and batch operations.

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

Component Coordinates and Alignment

The component coordinates and alignment functions are shown as follows:

• 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).