Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

Canvas inside checkbox - how to draw border when checkbox unchecked



  • I am trying to make custom checkbox and I have problem with border.

                    CheckBox
                    {
                        id: checkbox_finished
                        text: qsTr("Finished alarms")
                        checked: true
    
                        indicator: Rectangle
                        {
                            implicitWidth: rectangle_checkbox_alarm_finished.width
                            implicitHeight: rectangle_checkbox_alarm_finished.height
    //                        border.color: checkbox_finished.down ? "black" : "red"
                            border.color: "black"
                            border.width: 1
    
                            Rectangle
                            {
                                width: 20
                                height: 20
                                x: 0
                                y: 0
    //                            color: checkbox_finished.down ? "black" : "red"
                                color: "red"
                                border.width: 1
                                visible: checkbox_finished.checked
    
                                Canvas
                                {
                                    id: drawingCanvas
                                    width: rectangle_checkbox_alarm_finished.width
                                    height: rectangle_checkbox_alarm_finished.height
    
                                    anchors.fill: parent
                                    onPaint:
                                    {
                                        var ctx = getContext("2d")
    
                                        ctx.fillStyle = "white"
                                        ctx.fillRect(0,0,drawingCanvas.width ,drawingCanvas.height )
    
                                        ctx.lineWidth = 2;
                                        ctx.strokeStyle = "black"
                                        ctx.beginPath()
                                        ctx.moveTo(0, 0)
                                        ctx.lineTo(drawingCanvas.width, drawingCanvas.height)
                                        ctx.moveTo(drawingCanvas.width, 0)
                                        ctx.lineTo(0, drawingCanvas.height)
                                        //ctx.closePath()
    
                                        ctx.rect(0, 0, drawingCanvas.width, drawingCanvas.height)
    
                                        ctx.stroke()
                                    }
                                }
    
                            }
    
    
                        }
    

    d918d80f-5237-456e-b053-a316260cf099-obraz.png

    a8e633bb-5694-40e2-a3c0-67040497dd0a-obraz.png


Log in to reply