我们知道画图应用设计中比较重要,虽然QML有很多可以帮我们渲染的控件。我们可以在QML应用中使用Canvas来画我们所需要的图。比如我们可以利用Canvas来画股票的曲线。Canvas中的画图的API和HTTML5中的API是一样的。事实上,我们很容易使用这个API来把很多的HTML5的应用移植到Qt平台中。
ColorSquare.qml
import QtQuick 2.0
Rectangle {
id: root
width: 48; height: 48
color: "green"
signal clicked
property bool active: false
border.color: active? "#666666" : "#f0f0f0"
border.width: 2
MouseArea {
id: area
anchors.fill :parent
onClicked: {
root.clicked()
}
}
}
这个是用来显示一个可以接受鼠标点击的Rectangle。边界在active和inactive时显示的是不同的。
Main.qml
import QtQuick 2.0
import Ubuntu.Components 1.1
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "canvas.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(60)
height: units.gu(85)
Page {
title: i18n.tr("canvas")
Row {
id: colorTools
anchors {
horizontalCenter: parent.horizontalCenter
top: parent.top
topMargin: 8
}
property color paintColor: "#33B5E5"
spacing: 4
Repeater {
model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]
ColorSquare {
id: red
color: modelData
active: parent.paintColor == color
onClicked: {
parent.paintColor = color
}
}
}
}
// <<M1
Rectangle {
anchors.fill: canvas
border.color: "#666666"
border.width: 4
}
// M2>>
Canvas {
id: canvas
anchors {
left: parent.left
right: parent.right
top: colorTools.bottom
bottom: parent.bottom
margins: 8
}
property real lastX
property real lastY
property color color: colorTools.paintColor
onPaint: {
var ctx = getContext('2d')
ctx.lineWidth = 5.0
ctx.strokeStyle = canvas.color
ctx.beginPath()
ctx.moveTo(lastX, lastY)
lastX = area.mouseX
lastY = area.mouseY
ctx.lineTo(lastX, lastY)
ctx.stroke()
}
MouseArea {
id: area
anchors.fill: parent
onPressed: {
canvas.lastX = mouseX
canvas.lastY = mouseY
}
onPositionChanged: {
canvas.requestPaint()
}
}
}
}
}
运行我们的应用: