Отрисовка фигур по выбору из 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);
 
        }
    }
 
 
}

Вот расположение файлов в проекте:

введите сюда описание изображения


Ответы (0 шт):