在畫布外使用 clearRect

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()繪制圓弧

例子：

主文件

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();
        }
    }
}

主窗體.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"
        }
    }
}