Qt新渲染底层Scene Graph研究（三）

Qt新渲染底层Scene Graph研究（三）

       上一篇文章介绍了Qt Quick和SceneGraph的一些理论上的内容。这也是我最新的研究成果。接下来我要介绍一下如何使用Scene Graph来制作一些好玩的效果。这也是我进行一次SceneGraph的尝试。

       我的目标是希望在Scene Graph这一套渲染框架下实现一个带有纹理的立方体，并且旋转。花了几天，虽然不是那么满意，但是已经告一段落了。

蒋彩阳原创文章，首发地址：http://blog.csdn.net/gamesdev/article/details/43196787。欢迎同行前来探讨。

       本文难度偏大，适合有经验的同行进行交流。

       首先，对比C++，QML这边的代码稍微简单一些，那么从最简单开始说起吧。

import QtQuick 2.4
import QtQuick.Window 2.2
import TexturedCube 1.0

Window
{
    title: qsTr( "Scene Graph Textured Object" )
    width: isMobileDevice( )? Screen.width: 480
    height: isMobileDevice( )? Screen.height: 320
    visible: true

    Rectangle
    {
        anchors.fill: parent
        color: "orange"

        Cube
        {
            id: theCube
            anchors.centerIn: parent
            length: 60
            source: "../image/avatar.jpg"

            property int rotateAngle: 0
            transform:
                [
                Rotation
                {
                    angle: theCube.rotateAngle
                    axis
                    {
                        x: 1
                        y: 1
                    }
                }
            ]

            NumberAnimation on rotateAngle
            {
                from: 0
                to: 360
                duration: 1000
                loops: Animation.Infinite
            }

            Timer
            {
                interval: 3000
                repeat: true
                property int tCount: 0
                running: true
                onTriggered:
                {
                    var sourceList = [ "../image/soul.png",
                             "../image/avatar.jpg" ];
                    theCube.source = sourceList[tCount++ % 2];
                }
            }
        }
    }

    function isMobileDevice( )// 判断是否是移动平台
    {
        return  Qt.platform.os === "android" ||
                Qt.platform.os === "blackberry" ||
                Qt.platform.os === "ios" ||
                Qt.platform.os === "winphone";
    }
}

一个普通的窗口，背景是橙色的，在上面显示了我们的Cube。我希望我的Cube沿着一个轴进行旋转，所以设定了NumberAnimationon rotateAngle。此外，我希望每隔三秒Cube更换纹理，所以设定了一个Timer来更换纹理。每一个Item都有transform成员，它表示Item经过什么样的转换，目前transform支持Translation、Rotation以及Scale，有人想要让MouseArea成为不规则的，其实如果官方提供了Shear这个类，那么就更方便了。

我们看到的QML代码仅仅是表象，其实在幕后，是一个较为复杂的C++类