在QML应用中使用Canvas来画图

我们知道画图应用设计中比较重要，虽然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() } } } } }

我们在上面设计了四个ColorSqaure。在下面我们使用了一个Canvas来画我们所需要的图。

运行我们的应用：

整个项目的源码在：git clone https://gitcafe.com/ubuntu/canvas.git