当前位置：网站首页>[IVX junior engineer training course 10 papers] 04 canvas and a group photo of IVX and me

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

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 、 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 ：

Insert picture description here
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 ：
Insert picture description here
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 ：
Insert picture description here
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 ：
Insert picture description here
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 ：
Insert picture description here
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 .
Insert picture description here

Insert picture description here
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 ：
Insert picture description here

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 ：
Insert picture description here
The final preview is as follows ：