Use Canvas for drawing in QML applications, and use canvas for drawing in qml applications

Use Canvas for drawing in QML applications, and use canvas for drawing in qml applications

We know that drawing application design is very important, although QML has many controls that can help us render. We can use Canvas in the QML application to draw the graph we need. For example, we can use Canvas to draw a stock curve. The drawing APIs in Canvas are the same as those in HTTML5. In fact, we can easily use this API to transplant many HTML5 applications to the Qt platform.

ColorSquare. qml

import QtQuick 2.0Rectangle {    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()        }    }}

This is used to display a Rectangle that can accept mouse clicks. The boundary is displayed differently when active and inactive.
Main. qml

import QtQuick 2.0import 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()                }            }        }    }}

We designed four ColorSqaure above. Below we use a Canvas to draw the graph we need.
Run our application:

Source code for the entire project in: git clone https://gitcafe.com/ubuntu/canvas.git