QT动画制作（二十四）

alltolove

效果：

这个Canvas对象的使用方法跟H5里的用法一样，绘图非常方便，有不懂得咱们论坛的web板块正在发教程

----------广告线----------

HTML5 - 庖丁解牛

0 0 7 5 - 手把手带你玩儿Canvas

------------欢迎订阅------------

main.qml文件：

1. import QtQuick 2.5
   
2. import QtQuick.Window 2.2
   
3. 
   
4. Window {
   
5.     visible: true
   
6.     width: 640
   
7.     height: 480
   
8.     title: qsTr("Hello World")
   
9.     Canvas{
   
10.         id:canvas
    
11.         width:400
    
12.         height: 200
    
13.         onPaint: {//进行绘图行为
    
14.             var ctx = getContext("2d");//建立图元变量
    
15.             ctx.lineWidth=2;//线宽
    
16.             ctx.strokeStyle="red";//线条的颜色
    
17.             ctx.fillStyle="blue";//填充的颜色
    
18.             ctx.rect(100,80,120,80);//设定2个点来画一个矩形
    
19.             ctx.fill();//给填上颜色
    
20.             ctx.stroke();//给边线上色
    
21.         }
    
22.         SequentialAnimation{
    
23.             running: true
    
24.         NumberAnimation {
    
25.             target: canvas
    
26.             property: "rotation"
    
27.             from:0
    
28.             to:360
    
29.             duration: 1000
    
30.         }
    
31.         NumberAnimation {
    
32.             target: canvas
    
33.             property: "x"
    
34.             from:canvas.x
    
35.             to:400
    
36.             duration: 1000
    
37.         }
    
38.         NumberAnimation {
    
39.             target: canvas
    
40.             property: "y"
    
41.             from:canvas.y
    
42.             to:300
    
43.             duration: 1000
    
44.         }
    
45.         }
    
46.     }
    
47.     MainForm {}
    
48. }
    

复制代码

MainForm.ui.qml文件：

1. import QtQuick 2.5
   
2. Item{}

复制代码

Preview: 明天介绍Loader对象的使用方法

不二如是

我帮你加个广告超链接