Отрисовка фигур по выбору из ComboBox на Canvas
написал код, который красит фигуру в цвет по выбору, мне же надо, чтобы по выбору отрисовывалась фигуры по выбору в ComboBox. Прошу, помогите пожалуйста! Нужен тип флага
Ниже предоставляю свой код и расположение файлов в проекте.
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import "components"
Window {
width: canvas.width
minimumWidth: width
maximumWidth: width
height: canvas.height + 120
minimumHeight: height
maximumHeight: height
visible: true
title: qsTr("laba")
CustomCanvas{
id: canvas
x: 10
y: -38
rectangleColor: canvasControl.rectangleColor
triangleColor: canvasControl.triangleColor
circleColor: canvasControl.circleColor
calculatorColor: canvasControl.calculatorColor
}
CanvasControl{
id: canvasControl
anchors.top: canvas.bottom
}
}
CanvasControl.qml (в папке components(в папке проекта))
import QtQuick 2.15
import QtQuick.Controls 2.12
Row{
id: row
spacing: 10
property alias rectangleColor: rectangleColorControl.currentValue
property alias triangleColor: triangleColorControl.currentValue
property alias circleColor: circleColorControl.currentValue
property alias calculatorColor: calculatorColorControl.currentValue
Column{
Label{
height: rectangleColorControl.height
width: rectangleColorControl.width
text: "Rectangle color:"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignRight
}
Label{
height: rectangleColorControl.height
width: rectangleColorControl.width
text: "Triangle color:"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignRight
}
Label{
height: rectangleColorControl.height
width: rectangleColorControl.width
text: "Calculator color:"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignRight
}
}
Column{
ComboBox{
id: rectangleColorControl
model: ["red", "green", "blue"]
}
ComboBox{
id: triangleColorControl
model: ["darkcyan", "lightcoral", "lawngreen"]
}
ComboBox{
id: circleColorControl
model: ["darkcyan", "lightcoral", "lawngreen"]
}
ComboBox{
id: calculatorColorControl
model: ["#bfd5cc", "#b3b3c3", "#a791ba"]
}
}
}
CustomCanvas.qml (в папке components(в папке проекта))
import QtQuick 2.0
Item {
id: root
width: canvas.width
height: canvas.height
property color rectangleColor
property color triangleColor
property color circleColor
property color calculatorColor
Canvas{
id: canvas
property color rectangleColor: canvasBinding(root.rectangleColor)
property color triangleColor: canvasBinding(root.triangleColor)
property color circleColor: canvasBinding(root.circleColor)
property color calculatorColor: canvasBinding(root.calculatorColor)
function canvasBinding(value){
console.log("canvas binding. value:" + value);
canvas.requestPaint();
return value;
}
function drawRectangle(ctx){
ctx.fillStyle = rectangleColor;
ctx.fillRect(40, 90, 90, 120);
}
function drawTriangle(ctx){
ctx.fillStyle = triangleColor;
ctx.beginPath();
ctx.moveTo(147, 155);
ctx.lineTo(197, 67);
ctx.lineTo(248, 155);
ctx.fill();
}
function drawCircle(ctx){
ctx.fillStyle = circleColor;
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(140, 180, 50, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();
}
function drawText(ctx){
ctx.fillStyle = "black";
ctx.fillText(rectangleColor, 10, 50);
}
function drawCalculator(ctx) {
ctx.fillStyle = circleColor;
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.moveTo(100, 20);
ctx.lineTo(180, 20);
ctx.quadraticCurveTo(200, 20, 200, 40);
ctx.moveTo(200, 40);
ctx.lineTo(200, 170);
ctx.quadraticCurveTo(200, 190, 180, 190);
ctx.lineTo(100, 190);
ctx.quadraticCurveTo(80, 190, 80, 170);
ctx.lineTo(80, 40);
ctx.quadraticCurveTo(80, 20, 100, 20);
ctx.stroke();
ctx.fill();
}
width: 280
height: 280
onPaint: {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, width, height);
console.log("Canvas Paint");
drawCalculator(ctx);
//drawRectangle(ctx);
//drawTriangle(ctx);
//drawCircle(ctx);
//drawText(ctx);
//drawText(ctx);
}
}
}
Вот расположение файлов в проекте:

