QML进阶(四)-绘制自定义控件

在Qt中我们通过paintEvent和QPainter的组合可以在控件中进行各种绘制操作, 包括绘制各种图形和文字。同样在QML中引入了画布元素(canvas element)，通过使用画布元素我们也可以画出各种各样的图形，同时这个元素允许脚本绘制。画布元素提供了一个依赖于分辨率的位图画布，你可以使用JavaScript脚本来绘制图形，制作游戏或者其它的动态图像。QML中的画布元素是基于HTML5的画布元素来完成的。

画布元素的基本思想是使用一个2D对象来渲染路径。这个2D对象包括了必要的绘图函数，画布元素充当绘制的画布。

下面分几类使用场景来介绍QML的画布元素的使用。

绘制基本元素

基本元素包括矩形、圆弧、圆角矩形、贝塞尔曲线、文本、渐变色、阴影效果、图片。

在Canvas控件中我们通过getContext("2d")接口可以获得绘制的上下文来进行绘制。

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("QML Canvas")

    Canvas{
           id: root
           width: 600; height: 600
           onPaint: {
               var ctx = getContext("2d")

               ctx.lineWidth = 3            //画笔的宽度
               ctx.strokeStyle = "#0000FF"  //画笔的颜色
               ctx.fillStyle = "#4D9CF8"    //填充的颜色

               /**