便捷的接口(Convenient API)

在绘制矩形时,我们提供了一个便捷的接口,而不需要调用stroke或者fill来完成。

  1. // convenient.qml
  2. import QtQuick 2.0
  3. Canvas {
  4. id: root
  5. width: 120; height: 120
  6. onPaint: {
  7. var ctx = getContext("2d")
  8. ctx.fillStyle = 'green'
  9. ctx.strokeStyle = "blue"
  10. ctx.lineWidth = 4
  11. // draw a filles rectangle
  12. ctx.fillRect(20, 20, 80, 80)
  13. // cut our an inner rectangle
  14. ctx.clearRect(30,30, 60, 60)
  15. // stroke a border from top-left to
  16. // inner center of the larger rectangle
  17. ctx.strokeRect(20,20, 40, 40)
  18. }
  19. }

便捷的接口(Convenient API) - 图1

注意

画笔的绘制区域由中间向两边延展。一个宽度为4像素的画笔将会在绘制路径的里面绘制2个像素,外面绘制2个像素。