キャンバスの外側で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.visiblefalseにを設定することができます。

キャンバスを変更する必要がある場合は、もちろん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(); 
     } 
    } 
} 

メインフォーム.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" 
     } 
    } 
}