首页 > 其他 > 详细

Qt官方教程翻译——Use Case - Visual Elements In QML

时间:2014-06-10 17:21:54      阅读:635      评论:0      收藏:0      [点我收藏+]

附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-visual.html


Use Case - Visual Elements In QML —— 用例 - QML中的可视化元素


The Rectangle Type —— 矩形

对于最基本的视觉元素,Qt Quick提供了Rectangle类型来绘制矩形。这些矩形可以使用纯色或渐变色来填充。Rectangle类型也可以绘制矩形的边界(borders)。


要绘制矩形无法绘制的自定义形状,可以参考Canvas类型或者使用Image类型显示一个提前渲染的图像。

import QtQuick 2.0

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    // This element displays a rectangle with a gradient and a border
    Rectangle {
        x: 160
        y: 20
        width: 100
        height: 100
        radius: 8 // This gives rounded corners to the Rectangle
        gradient: Gradient { // This sets a vertical gradient fill
            GradientStop { position: 0.0; color: "aqua" }
            GradientStop { position: 1.0; color: "teal" }
        }
        border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn
    }

    // This rectangle is a plain color with no border
    Rectangle {
        x: 40
        y: 20
        width: 100
        height: 100
        color: "red"
    }
}
bubuko.com,布布扣

·

The Image Type —— 图像

Qt Quick 提供了一个Image类型用来显示图像。Image类型有一个source属性,其值可以是远端或者本地的URL,或是嵌入到资源文件中的图像文件。

// This element displays an image. Because the source is online, it may take some time to fetch
Image {
    x: 40
    y: 20
    width: 61
    height: 73
    source: "http://codereview.qt-project.org/static/logo_qt.png"
}
·

还有一些类似Image的类型用于处理更复杂的图像。BorderImage绘制的图像可以基于网格进行缩放,适合作为边框的图像。AnimatedImage用来播放.gif和.mng格式的图像。AnimatedSpriteSpriteSequence用来播放在非动态图格式文件中存储的多帧连续动画。

要播放视频文件和摄像头数据,查看Qt Multimedia模块。


Shared Visual Properties —— 共享的可视化属性

所有的视觉元素都由Qt Quick基于Item类型提供,它为可视化元素提供了一组通用属性,包括透明度和变换属性等。

Opacity and Visibility —— 透明度和可见性

Qt Quick所提供的QML对象类型都内置支持opacity。透明度可以在透明状态与其他状态之间平滑地改变。可见性可以通过visible属性更高效的控制,不过基于开销考虑,它不再能够实现动画。

import QtQuick 2.0

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Item {
        x: 20
        y: 270
        width: 200
        height: 200
        MouseArea {
            anchors.fill: parent
            onClicked: topRect.visible = !topRect.visible
        }
        Rectangle {
            x: 20
            y: 20
            width: 100
            height: 100
            color: "red"
        }
        Rectangle {
            id: topRect
            opacity: 0.5

            x: 100
            y: 100
            width: 100
            height: 100
            color: "blue"
        }
    }
}
·

bubuko.com,布布扣


Transforms —— 变换

Qt Quick类型内置支持各种变换。如果你对你的可视化组件进行旋转和缩放,你可以设置Item::rotationItem::scale属性。它们也可以以动画形式改变。

import QtQuick 2.0

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        rotation: 45 // This rotates the Rectangle by 45 degrees
        x: 20
        y: 160
        width: 100
        height: 100
        color: "blue"
    }
    Rectangle {
        scale: 0.8 // This scales the Rectangle down to 80% size
        x: 160
        y: 160
        width: 100
        height: 100
        color: "green"
    }
}
·
bubuko.com,布布扣

更复杂的变换,请参考Item::transform属性。

Qt官方教程翻译——Use Case - Visual Elements In QML,布布扣,bubuko.com

Qt官方教程翻译——Use Case - Visual Elements In QML

原文:http://blog.csdn.net/cloud_castle/article/details/29815231

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!