QML Canvas基础概念 qml mvvm

阅读本文大概需要3分钟

QML中绘图方式有多种，Canvas(QML)是一种,当然使用QQuickPaintedItem(C++实现)也是可以的.

使用

Canvas绘图核心部分如下所示:

Canvas{
    id: vanvas
    //画布尺寸
    width: 300
    height: 300

    onPaint: {
        var ctx = getContext("2d")
        //....下面需要调用js进行绘图
    }
}

Canvas所有的绘图都在onPaint中进行,并且Canvas是透明的，默认没有背景色.

基本属性

Canvas 就像一块画布，在某个范围内我们可以随意进行绘制。不要超过自己定义的画布范围哦，否则会出现一些Warning,亲测.

QSGThreadedRenderLoop: expose event received for window QQuickWindow(0x183a51a0)
 with invalid geometry: QRect(533,219 140x0) on QScreen(0x3ed18, name=\\.\DISPLAY8)

• 画布大小范围

    width: 300
    height: 300

• 画布对象

//方法原型
object getContext(string contextId, ... args)
//使用
var ctx = getContext("2d")

目前只支持 2d 类型，使用时直接传递2d参数即可.

刚看了下文档，Qt5.10 有了3D类型了,Qt Canvas 3D,走的是WebGL方式，以后在研究……

• 坐标系 Canvas 坐标系和我们平时使用的基本一致，原点在左上角，水平向右为X轴，垂直向下为Y轴，单位都是像素

• 画直线

    //移动到起点
    ctx.moveTo(0,0)
    //画线
    ctx.lineTo(200,200)
    //描边
    ctx.stroke()

• 画矩形

绘制矩形可以有两种方式

1. 填充并绘制
2. 先绘制再填充

    onPaint: {
        var ctx = getContext("2d")
        //设置填充颜色
        ctx.fillStyle = "#19E5DF"
        ctx.strokeStyle = "#F8B50D";
        ctx.fillRect(10,10,100,100)
        ctx.strokeRect(10,10,100,100)
    }

如果没有设置填充颜色，默认会是黑色.

    onPaint: {
        var ctx = getContext("2d")
        //设置填充颜色
        ctx.fillStyle = "#19E5DF"
        ctx.rect(20,10,180,180)
        ctx.fillStyle = "#19E5DF"
        ctx.stroke()
        ctx.fill()
    }

注:Canvas绘图时填充和描边是非常消耗资源的，一个节省资源提高效率的办法就是先绘制好所有的路径，最后一次性填充或者描边.

例如上述绘制矩形方式2中就是先绘制路径，最后填充.

• 画圆

arc() 方法创建弧/曲线(用于创建圆或部分圆)

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
counterclockwise: False = 顺时针，true = 逆时针。

• 画曲线

函数原型

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

参数 anticlockwise 表示是否是逆时针，默认为false,即默认顺时针绘制!

    var ctx = getContext("2d")
    ctx.arc(100,100,50,0,Math.PI*2)
    ctx.fill()
    ctx.stroke()
}

贝赛尔曲线

一个控制点

object quadraticCurveTo(real cpx, real cpy, real x, real y)

两个控制点

object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

x和y均为终点坐标

绘制图像

绘制图像直接可以使用外部传递一个url，然后进行加载，这也是比较常用的一种方法。

    property var m_picturePath: "./Config/Skins/Default/Icons/head_picture.png"

    Canvas
    {
        id: canvas
        anchors.fill: parent

        onPaint:
        {
            var ctx = canvas.getContext("2d");
            ctx.drawImage(m_picturePath,0,0,width,height);
        }

        Component.onCompleted:
        {
            loadImage(m_picturePath)
        }

        onImageLoaded:
        {
            requestPaint();
            //其他处理
        }
    }

参考文章

• w3school
• 贝塞尔曲线体验