Question

应用程序绘制弧形。我希望应用程序在单击mouseArea10后删除弧。是否可以在Canvas之外进行，如下？我该怎么做？

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1


ApplicationWindow {
    visible: true
    width: 1050
    height: 700
    color: "#b09273"
    title: qsTr("Hello World")

    MainForm {
        anchors.fill: parent
        id: mainform
        mouseArea10.onClicked: {mojCanvas.context.clearRect(0, 0, mojCanvas.width, mojCanvas.height)}
    }

    Canvas {
        id:mojCanvas
        width: 1050
        height: 590
        anchors.top: parent.top
        anchors.topMargin: 55
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 55
        anchors.left: parent.left
        anchors.right: parent.right
        contextType: "2d"

        Path {
            id: myPath
            startX: 450; startY: 590

            PathArc {
                x: 0; y: 269.30848034096934944;
                radiusX:625; radiusY: 625;
                useLargeArc: false
                direction: PathArc.Counterclockwise
            }
        }
        onPaint: {
            context.strokeStyle = "indigo";
            context.lineWidth = 3;
            context.path = myPath;
            context.stroke();
        }
    }
}

Answer 1

这只是一个选项，但您可以将mojCanvas.visible设置为false作为快速解决方案。

无论如何，如果您需要更改画布，当然可以在点击mouseArea后执行此操作。

我们的想法是根据您的背景颜色为您的笔划选择正确的颜色，并再次绘制调用requestPaint()

的圆弧。

示例：

<强> main.qml

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 1050
    height: 700
    color: "#b09273"
    title: qsTr("Hello World")

    MainForm {
        anchors.fill: parent
        id: mainform
        // mouseArea10.onClicked: {mojCanvas.context.clearRect(0, 0, mojCanvas.width, mojCanvas.height)}

        mouseArea1.onClicked: {
            mojCanvas.visible = true;

            var context = mojCanvas.getContext("2d");

            // Make canvas all white
            context.beginPath();
            context.clearRect(0, 0, mojCanvas.width, mojCanvas.height);
            context.fill();

            // Draw a line (just for testing)
            context.beginPath();
            context.lineWidth = 2;
            context.moveTo(30, 30);
            context.strokeStyle = "red"
            context.lineTo(width-30, height-30);
            context.stroke();

            // New arc colour
            mojCanvas.myColor = "cyan";

            mojCanvas.requestPaint();
        }

        mouseArea2.onClicked: {
            mojCanvas.visible = false
        }
    }

    Canvas {
        id:mojCanvas
        width: 1050
        height: 590
        anchors.top: parent.top
        anchors.topMargin: 55
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 55
        anchors.left: parent.left
        anchors.right: parent.right
        contextType: "2d"

        property color myColor: "indigo"

        Path {
            id: myPath
            startX: 450; startY: 590

            PathArc {
                x: 0; y: 269.30848034096934944;
                radiusX:625; radiusY: 625;
                useLargeArc: false
                direction: PathArc.Counterclockwise
            }
        }

        onPaint: {
            context.strokeStyle = myColor;
            context.lineWidth = 3;
            context.path = myPath;
            context.stroke();
        }
    }
}

<强> MainForm.qml

import QtQuick 2.5

Rectangle {
    property alias mouseArea1: mouseArea1
    property alias mouseArea2: mouseArea2

    width: 360
    height: 360
    color: "cyan"

    Rectangle {
        width: 100;
        height: 100;
        color: "white"

        MouseArea {
            id: mouseArea1
            anchors.fill: parent
        }

        Text {
            anchors.centerIn: parent
            text: "repaint"
        }
    }

    Rectangle {
        width: 100;
        height: 100;
        x: 150
        color: "white"

        MouseArea {
            id: mouseArea2
            anchors.fill: parent
        }

        Text {
            anchors.centerIn: parent
            text: "visible = false"
        }
    }
}

在Canvas外部使用clearRect

1 个答案: