当前位置：网站首页>[IVX junior engineer training course 10 papers to get certificates] 01 learn about IVX and complete the New Year greeting card

[IVX junior engineer training course 10 papers to get certificates] 01 learn about IVX and complete the New Year greeting card

2022-07-02 01:14:00 【1_ bit】

Catalog

For high score promotion, please check the column ：
iVX Beginner to master
Big talk IVX From actual combat to mastery

One 、 understand iVX

iVX Is a programming language , But unlike conventional programming ,iVX Is a codeless development language , For beginners who don't understand development , Abandon the code in conventional programming languages , Make development simpler and more efficient ;iVX When developing some functions, it comes with corresponding modules , Develop more efficiently , And for programmers, they can export their code for secondary development , It greatly increases the development efficiency without losing flexibility .

iVX It's not just a programming language , Or a IDE; Developers can develop online without downloading the corresponding environment , You can also deploy directly when publishing a project , And support domain name resolution ; In this respect ,iVX The corresponding operation and maintenance cost is reduced , Developers only need to focus on application functions , Maintenance is no longer a headache for developers .

Two 、 Project creation

We can go through iVX Of IDE Link to the development interface ：https://editor.ivx.cn/

Click on the link to IDE The following window will appear after the page , Choose different types for development according to individual needs .
Insert picture description here
When selecting item creation , There will be Absolute positioning The application and Relative positioning application , The differences between the two are as follows ：

Absolute positioning ： Use absolute xy Coordinate drawing application element （ For example, the location of the picture depends on xy determine ）, Later, we will explain in detail through examples ;
Relative positioning ： Locate in the interface according to the relative position of elements , Relative positioning does not exist xy value （ Unless there is an absolute positioning component in relative positioning , For example, canvas ）.

This project takes absolute positioning as an example , Select the absolute positioning type webApp project , Click create to enter the editing interface of this item ：
Insert picture description here
After clicking Create, you will see a IDE The interface is as follows ：

In the above picture example, you can see several common areas ：

Component panel ： In the above interface , On the left is the component panel , The component panel is iVX Addable element area in , In the component bar, you can find the elements you want to add to the project , Development is simple, click to add ;
Property panel ： The properties panel can change the properties of components , For example, the color of text 、 size , The source of the picture 、 Borders, etc ;
Preview tool ： The preview area can be used to configure the project 、 Publish and get preview address ;
Object tree ： All added elements in the project can be found in the object tree ;
Events and other tools ： Add event 、 Services, etc ; Stage area ： Project Editor 、 Instant display window ;

3、 ... and 、 Common components

iVX The components are generally conventional Web、App Common elements in development, etc , For example, as shown in the following screenshot ：
Insert picture description here
Special components include variable components ：

stay iVX In general, the components can be divided into Visual components 、 Functional components 、 Container components , The visual component is the picture 、 Such as text ; Functional components are for Components 、if Components 、 Table components and so on ; Container components can be understood as The ranks of 、 Variables and other components .

These components will be explained in the following chapters .

Four 、 Absolute positioning and greeting card making

4.1 Absolute positioning

The absolute position is iVX The middle finger uses absolute xy Coordinates locate the position of an element .

First, we select the foreground to add components under the foreground , Then click on the page , Next, let's add components on the page .
Insert picture description here
The added elements will be displayed in the object tree ：

Next, click the page with the mouse 1, You can find the corresponding content in the component panel on the left to add . Take the text for example , Click on the text component , The mouse will turn into a cross that can be drawn , Click to draw in the stage area ：
Insert picture description here
After drawing, you get a text , Click the added text component in the object tree , You can change the corresponding text content in the property panel ：

After changing the text, you can see the corresponding changes in the stage area ：

At this point, we can see that the attribute panel of this element has xy value , This xy The value is based on the upper left corner of the stage area , To the right x The bigger the value is. , Lower and lower y The bigger the value is. , change xy Value can change the position of this element in the interface ：
Insert picture description here

4.2 Greeting card making

After understanding the basic absolute positioning content , Let's draw a basic greeting card interface through pictures and text , And add dynamic effects at the end to make it more exquisite .

4.2.1 Greeting card interface drawing

First, delete the previously added element content in the object tree , You can right-click to delete , You can also select components and then delete：
Insert picture description here
After deleting , Find the picture in the component panel , And draw in the stage area ：

Then select the corresponding picture in the pop-up resource selector to upload ：

The picture will be displayed in the stage area , And you can drag small dots to change the size , Or drag the picture directly to change the position ：

Change the position and size of the picture , And drag it to the right place ：
Insert picture description here

Then right-click the picture to copy the picture ：
Insert picture description here
Then select the page to paste ：

Select one of the pictures , And find... In the corresponding attribute y Shaft rotation , Input 180 Make it relate to y Turn the axis horizontally ：

You will get a completely flipped picture ：

Finally, move the picture to the appropriate position ：
Insert picture description here
Then add a picture of the door ：

If you want this picture to be completely centered , Then you can find... In the properties x Axis origin , Place it in 50% It's about ; Because in ivx in , The upper left corner of the picture is the starting point , You need to put the picture x Place the origin in the middle , Give half the width of the screen , You can complete the centering ：
Insert picture description here

Then change x The coordinates are half of the screen , The screen width dimension can be changed or viewed on the object tree ：
Insert picture description here
Then put the picture x Change the coordinates to 375 Half of 187 You can center the picture ：

Let's continue to add other pictures until the interface is drawn as follows ：

If you want to put plum blossoms under other pictures , You just need to put the position of the picture in the object tree under that picture , In this way, other pictures can cover this picture .

Next, draw the text area with Chinese text , The advantage of using Chinese text is that it can make the font have Chinese text style ：
Insert picture description here

Enter happy new year in the text , And change its color 、 typeface 、 size ：
Insert picture description here
Click preview to see the final effect ：

We can press F12 Change the current browser to mobile Web style ：

At this time, we find that the page is too rigid and not particularly good-looking , Let's click on the top cloud picture , The component bar on the left will find more changes , Select the dynamic components that appear to add dynamic effects ：
Insert picture description here
Then we can select a certain type of dynamic effect in the dynamic effect component , Then select preview to view the effect , If you think the action time is too long , You can increase the animation duration , At this point, the animation will slow down , Finally, turn on the loop play ：
Insert picture description here
Then we right-click to copy the dynamic effect , Copying to other pictures will make the page more vivid ：

Then we preview and find , Changing the phone screen size will leave some content blank , Because the length of the mobile phone is different ：

At this point, we only need to add a banner component to the page , And set this banner to live at the bottom of the screen , Then add the components that need to be at the bottom of the screen to the banner ：
Insert picture description here
Now you can see that , There is a patch on the page , This patch is the position of the banner , In the properties of the banner, select the position of the banner as the lower left ：

Next, change the background color of the banner to transparent 、 Length and width changed to 0：
Insert picture description here
Next, drag the bottom element in the object tree into the banner , At this time, it is found that neither dog nor cloud is on the page , This is because the banner has its own xy value , Dogs and clouds have the same xy value , At this time, it will be displayed according to the coordinate value ：
Insert picture description here
Next, just drag the elements up , Then change the background color of the page to red , Click preview to complete ：