关于Canvas绘图的一些问题

adadadda

贴出两段代码，第一段代码保存在MyCanvas.qml文件中。

1. import QtQuick 2.6
   
2. 
   
3. Rectangle{
   
4.     id:rect
   
5.     readonly property color color_normal:  "white"//Qt.rgba(0.8824,0.8824,0.8824,1.0)//Qt.rgba(0.9412,0.9412,0.9412,1.0)
   
6.     readonly property color color_hover: Qt.rgba(0.898,0.9451,0.9843,1.0)
   
7.     readonly property color color_click: Qt.rgba(0.8039,0.8941,0.9686,1.0)
   
8.     readonly property color color_border: Qt.rgba(0,0.4706,0.8431,1.0)
   
9.     property var dat: [151,0.0489,0.1]
   
10.     property int acous: 0
    
11.     property int datastream: 0
    
12.     property real percent: 1.0
    
13.     property point nextUp
    
14.     property point  nextDown
    
15.     property bool paintFlag: false
    
16.     signal clicked
    
17.     signal deletemyself
    
18. 
    
19.     function painting(){
    
20.         rect.width=400*percent*dat[2]+6
    
21.         rect.height=400*percent*dat[1]+6
    
22.         plate.width=width-4
    
23.         plate.height=height-4
    
24.         plate.x=2
    
25.         plate.y=2
    
26.         plate.canvasSize.width=plate.width
    
27.         plate.canvasSize.height=plate.height
    
28.         paintFlag=true
    
29.         plate.requestPaint()
    
30.         console.log("3"+rect.paintFlag)
    
31.     }
    
32. 
    
33.     onPercentChanged: {
    
34.         console.log("1"+rect.paintFlag)
    
35.         painting()
    
36.     }
    
37. 
    
38. 
    
39.     width: 10
    
40.     height: 10
    
41.     border.color: color_border
    
42.     border.width: focus?1:0
    
43.     color: color_normal
    
44. 
    
45.     MouseArea{
    
46.         anchors.fill: parent
    
47.         hoverEnabled: true
    
48.         acceptedButtons: Qt.LeftButton|Qt.RightButton
    
49. 
    
50.         onClicked: parent.clicked()
    
51. 
    
52.         onPressed: {
    
53.             parent.color=parent.color_click
    
54.             parent.focus=true
    
55.         }
    
56.         onReleased: parent.color=parent.color_hover
    
57.         onEntered: {
    
58.             parent.color=parent.color_hover;
    
59.             parent.border.width=1
    
60.         }
    
61.         onExited: {
    
62.             parent.color=parent.color_normal;
    
63.             parent.border.width=Qt.binding(function(){return parent.focus?1:0})
    
64.         }
    
65.     }
    
66. 
    
67.     Canvas{
    
68.         id:plate
    
69.         contextType: "2d"
    
70.         onPaint: {
    
71.             console.log("2"+rect.paintFlag)
    
72.             context.clearRect(0,0,plate.width,plate.height)
    
73.             if(rect.paintFlag){
    
74.                 context.lineWidth=2
    
75.                 context.strokeStyle="red"
    
76.                 var d=rect.dat[1]
    
77.                 var L=rect.dat[2]
    
78.                 var pe=400*rect.percent
    
79.                 context.moveTo(1,1)
    
80.                 context.lineTo(L*pe+1,1)
    
81.                 context.moveTo(1,d*pe+1)
    
82.                 context.lineTo(L*pe+1,d*pe+1)
    
83.                 context.stroke()
    
84.                 rect.paintFlag=false
    
85.             }
    
86.         }
    
87.     }
    
88. }

复制代码

第二段代码，保存在Canva.qml文件中。

1. import QtQuick 2.6
   
2. import QtQuick.Window 2.2
   
3. 
   
4. Window {
   
5.     visible: true
   
6.     width: 640
   
7.     height: 480
   
8.     MyCanvas{
   
9.         id:mycan
   
10.         x:100
    
11.         y:50
    
12.     }
    
13. 
    
14.     MouseArea{
    
15.         anchors.fill: parent
    
16.         z:-1
    
17.         onClicked: mycan.percent+=1
    
18.     }
    
19. }

复制代码

第二段代码对第一段代码进行了简单的调用。但是对于输出结果我有些不明白！
问题一：注意输出窗口的输出顺序：

   为什么先输出3，在输出2？？
问题二：多次点击界面空白部分，界面显示如下：

为什么两根长的红线之间的短的红线没有被清除？？如果想要清除，应该如何处理？

求大神解答。。。。万分感谢

adadadda

第二个问题我已经解决了，第一个问题如何解决？

adadadda

第一个问题我也已经解决了。。。。我能自己给自己解题么？

adadadda

我自己都解决了。。。。这论坛。。。。叫论坛？？？

adadadda

我来把这两个问题的解决思路说一说，以免后来的人走弯路。

第一个问题：Canvas的绘图策略不是立即绘制，是系统选择在某个合适的时候绘制，并且绘制结束了会发出Painted信号，如果需要绘图后的相关参数计算，可以在onPainted事件中处理

第二个问题：每次需要重新绘制canvas上面的图像时，加入beginpath指令。