Разработка приложений на C++_Практическая работа №6
.pdf
Модуль 2. Расширенные возможности Qt Quick
Тема 2.1. Подключение JS-библиотек Практика
1
1. Написать простой графический редактор с помощью QML
и Canvas, который позволяет рисовать линии разного
цвета и ширины.
Решение:
1.Создаем пустой проект в Аврора SDK
.
2.Добавляем графическую область с помощью элемента Canvas:
Canvas {
id: canvas
width: 500 height: 500 onPaint: {
var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
3. Добавляем элементы управления для выбора цвета и ширины линии:
Row {
id: colorTools anchors {
horizontalCenter: parent.horizontalCenter top: parent.top
topMargin: 8
}
Slider {
id: lineWidthSlider x: -80
2
width: 400 minimumValue: 1 maximumValue: 100 stepSize: 1
value: 2 onValueChanged: {
canvas.lineWidth = value
}
}
property color paintColor: "#33B5E5" spacing: 4
Repeater {
model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444", "pink"] Button {
id: rect
color: modelData width: 50 height: 50
backgroundColor: parent.paintColor = color onClicked: {
parent.paintColor = color
}
}
}
}
4. Добавляем обработчики событий для рисования линий:
Canvas {
3
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 property real lineWidth: lineWidthSlider.value
onPaint: {
var ctx = getContext('2d') ctx.lineWidth = canvas.lineWidth 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
4
canvas.lastY = mouseY
}
onPositionChanged: { canvas.requestPaint()
}
}
}
6. Запускаем приложение и начинаем рисовать линии разных цветов и толщин на графической области.
Полный код:
import QtQuick 2.2 import Sailfish.Silica 1.0
Page {
Row {
id: colorTools anchors {
horizontalCenter: parent.horizontalCenter top: parent.top
topMargin: 8
}
Slider {
id: lineWidthSlider x: -80
width: 400 minimumValue: 1
5
maximumValue: 100 stepSize: 1
value: 2 onValueChanged: {
canvas.lineWidth = value
}
}
property color paintColor: "#33B5E5" spacing: 4
Repeater {
model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444", "pink"] Button {
id: rect
color: modelData width: 50 height: 50
backgroundColor: parent.paintColor = color onClicked: {
parent.paintColor = color
}
}
}
}
Canvas { id: canvas anchors {
left: parent.left right: parent.right
top: colorTools.bottom
6
bottom: parent.bottom margins: 8
}
property real lastX property real lastY
property color color: colorTools.paintColor property real lineWidth: lineWidthSlider.value
onPaint: {
var ctx = getContext('2d') ctx.lineWidth = canvas.lineWidth 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()
}
7
}
}
}
8