Javascript 在画布外部使用clearRect

应用程序绘制一条弧。我希望应用程序在单击

mouseArea10

后删除弧。是否可以在

画布

之外执行此操作，例如在下面？我该怎么做

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

---

这只是一个选项，但您可以将

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

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

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

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