画布绘制（Canvas Paint）

在这个例子中我们将使用画布（Canvas）创建一个简单的绘制程序。

画布绘制（Canvas Paint） - 图1

在我们场景的顶部我们使用行定位器排列四个方形的颜色块。一个颜色块是一个简单的矩形，使用鼠标区域来检测点击。

  1.     Row {
  2.         id: colorTools
  3.         anchors {
  4.             horizontalCenter: parent.horizontalCenter
  5.             top: parent.top
  6.             topMargin: 8
  7.         }
  8.         property variant activeSquare: red
  9.         property color paintColor: "#33B5E5"
  10.         spacing: 4
  11.         Repeater {
  12.             model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]
  13.             ColorSquare {
  14.                 id: red
  15.                 color: modelData
  16.                 active: parent.paintColor == color
  17.                 onClicked: {
  18.                     parent.paintColor = color
  19.                 }
  20.             }
  21.         }
  22.     }

颜色存储在一个数组中，作为绘制颜色使用。当用户点击一个矩形时，矩形内的颜色被设置为colorTools的paintColor属性。

为了在画布上跟踪鼠标事件，我们使用鼠标区域（MouseArea）覆盖画布元素，并连接点击和移动操作。

  1.     Canvas {
  2.         id: canvas
  3.         anchors {
  4.             left: parent.left
  5.             right: parent.right
  6.             top: colorTools.bottom
  7.             bottom: parent.bottom
  8.             margins: 8
  9.         }
  10.         property real lastX
  11.         property real lastY
  12.         property color color: colorTools.paintColor
  14.         onPaint: {
  15.             var ctx = getContext('2d')
  16.             ctx.lineWidth = 1.5
  17.             ctx.strokeStyle = canvas.color
  18.             ctx.beginPath()
  19.             ctx.moveTo(lastX, lastY)
  20.             lastX = area.mouseX
  21.             lastY = area.mouseY
  22.             ctx.lineTo(lastX, lastY)
  23.             ctx.stroke()
  24.         }
  25.         MouseArea {
  26.             id: area
  27.             anchors.fill: parent
  28.             onPressed: {
  29.                 canvas.lastX = mouseX
  30.                 canvas.lastY = mouseY
  31.             }
  32.             onPositionChanged: {
  33.                 canvas.requestPaint()
  34.             }
  35.         }
  36.     }

鼠标点击存储在laxstX与lastY属性中。每次鼠标位置的改变会触发画布的重绘，这将会调用onPaint操作。

最后绘制用户的笔划，在onPaint操作中，我们绘制从最近改变的点上开始绘制一条新的路径，然后我们从鼠标区域采集新的点，使用选择的颜色绘制线段到新的点上。鼠标位置被存储为新改变的位置。