在画布外使用 clearRect

Question

Application draws an arc. I would like application to remove the arc after clicking on mouseArea10 . Is it possible to do it outside Canvas , like under? How should I do this?

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

It's just an option, but you could set your mojCanvas.visible to false as a quick solution.

Anyway, if you need to change your canvas, of course you can do it after clicking the mouseArea .

The idea is to choose the right colour for your stroke depending on your background colour and to paint again the arc calling requestPaint()

Example:

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"
        }
    }
}