Question

我正在开发一个QML程序，其中我更改了在Canvas上绘制的多边形的颜色和边框颜色。我有2个按钮可以更改颜色，即。 1个按钮，边框颜色为红色，另一个为蓝色。我的问题是，每次更改颜色集时，多边形的边界似乎“损坏”，例如使用的边界颜色相互混合。每次调整窗口大小时，都会调整绘制的多边形的大小。因此，当我调整大小时，我相信它会重新粉刷。此时的颜色已经固定。

我的问题是：有没有办法禁用重叠或有办法手动强制重新绘制项目中所有Canvas的画布？我将不胜感激。

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

我将不胜感激。

Answer 1

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

由于您正在绘制多边形，因此在边缘上添加了一些抗锯齿像素，以获得平滑的线条。这些像素是半透明的，因此当您在现有的多边形上用另一种颜色绘制相同的多边形时，边缘会发生颜色融合。因此外观“损坏”。

当您更改画布的高度或宽度时，上下文会隐式清除，因此“损坏的”边缘会消失。

一个简单的解决方法是在clearRect的{{1}}处理程序中调用onPaint。

Canvas

这是一个重现您的问题的小示例，并通过调用clearRect展示如何解决此问题

Canvas
{
    id: canvas
    onPaint: {
        var ctx = getContext("2d")

        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        // Draw anything you want
        ...
    }
}

更改时线条颜色重叠

1 个答案: