Использование 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()

Пример:

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