Qt 线条颜色在更改时重叠

我正在开发一个QML程序，在该程序中，我更改画布上绘制的多边形的颜色和边框颜色。我有两个按钮可以改变颜色，即一个按钮使边框颜色为红色，另一个按钮为蓝色

我的问题是，每次更改颜色集时，多边形的边界似乎已损坏，例如使用的边界颜色相互混合。每次调整窗口大小时，都会调整绘制的多边形的大小。所以当我调整尺寸时，我相信它是被重新绘制的。颜色在那一点上是固定的

我的问题是：有没有办法禁用重叠，或者有没有办法手动强制重画项目中的所有画布

Ucolors.qml：

import QtQuick 2.9

/**
 * @brief   Holds the color parameters of the whole UI
 *
 */
Item
{
    property var canvas
    property var text
    property var spiderBckgrnd
    property var spiderLines
}

main.qml

Ucolors
{
    id: colDay

    canvas: "#eaedf1"
    text: "#0e0e12"
    spiderBckgrnd: "#f7fbff"
    spiderLines: "#C8CBD0"
}

Ucolors
{
    id: colNight

    canvas: "#22212c"
    text: "#ffffff"
    spiderBckgrnd: "#0e0e12"
    spiderLines: "#3C3C3F"
}

property var colGlob: colDay

Button
{
    id: btn1
    anchors.left: parent.left
    text: "button1"

    onClicked:
    {
        colGlob = colNight;
    }
}

Button
{
    id: btn2
    anchors.left: btn1.right
    text: "button2"

    onClicked:
    {
        colGlob = colDay;
    }
}

---

然后在代码中设置如下颜色：some_property:colGlob.spiderLines

如果未在画布的上下文对象上显式调用clearRect，则任何绘图都将绘制在现有内容上

由于正在绘制多边形，因此会在边上添加一些抗锯齿像素以获得平滑线。这些像素是半透明的，因此当您使用另一种颜色在现有多边形上绘制相同的多边形时，边上会发生颜色混合；因此出现了腐败现象

更改画布的高度或宽度时，上下文将被隐式清除，因此损坏的边将消失

一个简单的修复方法是在画布的onPaint处理程序中调用clearRect

下面是一个小例子，它再现了您的问题，并展示了如何通过调用clearRect来解决这个问题

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: root
    visible: true
    width: 400
    height: 200

    property string color: "red"
    onColorChanged: {
        canvas.requestPaint()
    }

    ColumnLayout
    {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RowLayout
        {
            Layout.alignment: Qt.AlignHCenter
            Repeater
            {
                model: ["red", "blue", "yellow"]
                Button
                {
                    text: modelData
                    highlighted: root.color == modelData
                    onClicked: {
                        root.color = modelData
                    }
                }
            }
            CheckBox
            {
                id: clearBeforeRepaintCb
                text: "Clear before paint"
            }
        }

        Canvas
        {
            id: canvas
            Layout.fillHeight: true
            Layout.fillWidth: true
            onPaint: {
                var ctx = getContext("2d")
                if(clearBeforeRepaintCb.checked)
                    ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.strokeStyle = root.color
                ctx.lineWidth = 10
                ctx.beginPath()
                ctx.moveTo(10, height/2)
                ctx.lineTo(width-10, height/2+3)
                ctx.stroke()
            }
        }
    }
}

---

你的代码没有运行。这不是全部代码，只是我解释如何运行的部分。我不想为了不模糊问题而粘贴所有内容。您应该始终发布复制问题的最小代码量。这意味着减少代码并确保其运行，以便其他人能够真正帮助您。

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: root
    visible: true
    width: 400
    height: 200

    property string color: "red"
    onColorChanged: {
        canvas.requestPaint()
    }

    ColumnLayout
    {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        RowLayout
        {
            Layout.alignment: Qt.AlignHCenter
            Repeater
            {
                model: ["red", "blue", "yellow"]
                Button
                {
                    text: modelData
                    highlighted: root.color == modelData
                    onClicked: {
                        root.color = modelData
                    }
                }
            }
            CheckBox
            {
                id: clearBeforeRepaintCb
                text: "Clear before paint"
            }
        }

        Canvas
        {
            id: canvas
            Layout.fillHeight: true
            Layout.fillWidth: true
            onPaint: {
                var ctx = getContext("2d")
                if(clearBeforeRepaintCb.checked)
                    ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.strokeStyle = root.color
                ctx.lineWidth = 10
                ctx.beginPath()
                ctx.moveTo(10, height/2)
                ctx.lineTo(width-10, height/2+3)
                ctx.stroke()
            }
        }
    }
}