附网址: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"
}
}
·
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格式的图像。AnimatedSprite和SpriteSequence用来播放在非动态图格式文件中存储的多帧连续动画。
要播放视频文件和摄像头数据,查看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"
}
}
}
·
Transforms —— 变换
Qt Quick类型内置支持各种变换。如果你对你的可视化组件进行旋转和缩放,你可以设置Item::rotation 或Item::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"
}
}
·
更复杂的变换,请参考Item::transform属性。