[IVX junior engineer training course 10 papers] 04 canvas and a group photo of IVX and me

Catalog

【iVX Junior engineer training course 10 Textual evidence 】01 understand iVX Complete the New Year greeting card
【iVX Junior engineer training course 10 Textual evidence 】02 Numerical binding and adaptive website production
【iVX Junior engineer training course 10 Textual evidence 】03 Events and guessing numbers games
【iVX Junior engineer training course 10 Textual evidence 】04 Canvas and me iVX Group photo
【iVX Junior engineer training course 10 Textual evidence 】05 Canvas and aircraft war game production
【iVX Junior engineer training course 10 Textual evidence 】06 Database and services
【iVX Junior engineer training course 10 Textual evidence 】07 08 News page making
【iVX Junior engineer training course 10 Textual evidence 】09 Chat room production

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

One 、 Canvas and image sequence

stay iVX in , Canvas is a component for flexible editing of images , If you need to fuse images , Then using canvas is your best choice .

The picture sequence is in iVX It can be regarded as a component similar to that in the figure , But it's very different from the rotation picture ; The rotation chart can operate the picture text more flexibly , The picture sequence can only play multiple pictures .

1.1 Picture sequence

The picture sequence is located on the right side of the picture in the component panel ：

Take the application of relative positioning as an example , Create a relative positioning application , Add a page to the application , Click the picture sequence in the page to add ; When you click the image sequence, a resource selection window will pop up , Just select multiple pictures to create a sequence of pictures , Of course, you can also choose one gif Moving graph ：

Select multiple pictures and click OK ：

Click the image sequence in the object tree , Click the picture list in the properties to change the picture position ：

In the picture position, you can change the playback duration of the player, etc ：

Two 、 Animation and timeline

Animation in iVX It is more characteristic in , Support users to define their own animation path and animation style . Now take a text with absolute positioning as an example ：

Click on the text , You can see a component on the left side of the text —— The trajectory , The track allows us to create frame animation for this component ：

After adding track attributes to the text , At the bottom you can see a timeline , We can keyframe this timeline in the corresponding time seconds , Animate them in these keyframes ：

You can then drag the timeline to add keys to it ：

After keyframing at different time points , As shown in the figure below ：

Then click on those keyframes to change the position of the text or other properties , Take location as an example ：

Next, change its text position on multiple time axes ：

Finally, click the track , Turn on autoplay in the properties ：

After preview, the text will play the animation according to the key frame information .

3、 ... and 、 Me and iVX Group photo of

In the first point, the function of canvas is introduced , Next, let's use the canvas to synthesize a picture , And download to local .

3.1 Page drawing

The following is an example of page drawing , It needs to be noted that , Drawing pictures on the canvas is an absolute positioning environment , If you want one image to overlay another , You need a picture above another picture in the object tree .

In the above object tree, we found a file interface component , The file interface component is used to obtain and upload picture resources .

3.2 Functional production

You need to synthesize pictures freely , Let's add a click event to the canvas , Click the canvas to select the picture of local branch resources , Let's first add events to the canvas ：

In the above events , Callbacks are “ After an action is done ” What needs to be done , In the example above , After reading the picture , Specify an object in the canvas and change the picture to the selected picture .

Then add an event to the composite button , After clicking the button, use the canvas to output the picture , Output to the picture outside the canvas ：

The final preview is as follows ：