FVS Canvas Editing (Earlier Version)

Application scenarios: If you have installed the FVS plugin, you can view this article to learn about functions related to FVS templates.

Note: Mobile devices are not supported.

Versions

Functions

This article will briefly introduce the attributes of FVS canvas and how it achieves self-adaptation.

First of all, you need to know FVS large-screen template's composition:

a canvas, multiple pages in the canvas, and many components on each page.

As is shown below:

You can choose Canvas Size when creating a template. You can also set your own size below the editor.

You can enter the canvas’s width and height, and the unit is px. The number ranges from 300 to 50000.

After customizing the size, click the blank space on the page to save data. The size adjustment is effective for all pages in the canvas.

Adaptation is effective for all pages in the template. It has five modes: Auto, Vertically, Horizontally, Horizontally and vertically, and None.

Note: Horizontally and vertically is only available in the 1.8.0 version or later ones.

As is shown below:

Auto Mode

In this mode, the canvas is scaled in equal proportions and then kept on the single-screen. Certain blank space will be displayed in one direction’s both sides and matched to the background color.

l  Blank space left on the left and right side

l Blank space left on the top and bottom side

Vertical Mode

During template preview, the canvas will cover the whole page vertically. A horizontal scrollbar appears when the content overflows horizontally.

Horizontal Mode

During template preview, the canvas will cover the whole page horizontally. A vertical scrollbar appears when the content overflows vertically.

Horizontal and Vertical Mode

In this mode, the canvas will cover the whole web page both horizontally and vertically. Therefore, it is recommended that the canvas size be set according to the actual aspect ratio of the display screen to avoid significant differences in the aspect ratio of the template after stretching.

Note: In this mode, it is recommended to change the background adaptation mode of pages and components into Stretch. Otherwise, the background may get twisted. As is shown below:

None Mode

In this mode, the canvas size will not change with the browser’s ratio.

Adjusting the display scale will only change the canvas size displayed in the editor, not its actual size.

You can alter the zoom value by yourself, or you can choose a zoom value set in the drop-down box. The zoom value should be no smaller than 10% and no bigger than 400%.

You can move the canvas or change its display scale through hotkeys, as is shown below:

Operating Auxiliary Line

The operation is as follows:

1. When you move the mouse over the top or left ruler, a dotted auxiliary line will appear to follow the move, and the current scale value (unit: px) will be displayed.

2. If you want to add an auxiliary line, click any position on the ruler.

3. After adding the auxiliary line, move the mouse to the added auxiliary line and perform the following operations when the mouse cursor turns into the double arrow style:

• Select auxiliary line: Click the left mouse button.

• Move the auxiliary line: Hold down the left mouse button to drag the auxiliary line.

• Delete the auxiliary line: Double-click the left mouse button, or select the auxiliary line and press Delete/Backspace, or drag the auxiliary line directly outside the visible area of the canvas to release the mouse.

Note: The operations above do not support selection in batch.

4. Hide auxiliary line: Click at the top left corner of the ruler to hide all auxiliary lines, but not a single one; After hiding, add the auxiliary lines again, and all auxiliary lines will be displayed again.

Component Coordinates and Alignment

• When a component is dragged in the canvas, component coordinate will be displayed in the upper left corner of it.

• When one component is dragged somewhere flush or perpendicular to the other component, the alignment line will appear and their distance will be displayed.

• After you add the auxiliary line to the canvas, the components will move to the auxiliary line position so that they can be quickly aligned.