Qt文档阅读笔记-QML Canvas的官方解析及实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq78442761/article/details/86161675

目录

 

官方解析

博主例子

---

官方解析

        Canvas可以用于画直线或曲线，简单或复杂的形状，图形，图片，并且他能加文字，颜色，阴影，和颜色梯度，和其他的装饰，可以进行低像素操作。Canvas可以保存成图像文件，或者有序列号的URL。

        使用Context2D对Canvas进行渲染，通常是写到信号paint中。
        通过Canvas的width和height属性可设置绘画区域，举个例子，下面的这个例子创建了一个Canvas，并且这个Canvas画了一个区域，这个区域height为100像素，width为200像素。

  import QtQuick 2.0
  Canvas {
      id: mycanvas
      width: 100
      height: 200
      onPaint: {
          var ctx = getContext("2d");
          ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
          ctx.fillRect(0, 0, width, height);
      }
  }

目前(Qt5.8的文档)的Canvas只支持2D渲染。

博主例子

这里提供两个例子，一个例子是官方例子，一个是自己写的小栗子

例子运行截图如下：

程序的结构如下：

源码如下：

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl("qrc:/main.qml"));

    if(engine.rootObjects().isEmpty()){

        qDebug() << "engine load failed!";
        return -1;
    }

    return a.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {

    visible: true
    width: 800
    height: 600

    MyCanvas{

        id: myCanvas
    }

    MyCanvas2{

        id: myCanvas2
        anchors.centerIn: parent
    }
}

MyCanvas.qml

import QtQuick 2.0

Canvas{

    id: myCanvas
    width: 100
    height: 200

    onPaint: {

        var ctx = getContext("2d");
        ctx.fillStyle = Qt.rgba(1, 1, 0, 1);
        ctx.fillRect(0, 0, width, height);
    }
}

MyCanvas2.qml

import QtQuick 2.0

Canvas{

    property real radius: 100
    property color arcColor: "#EE3A8C"

    id: myCanvas2
    width: 2 * radius + 5
    height: 2 * radius + 5


    Text{
        anchors.centerIn: parent
        font.pointSize: 15
        text: qsTr("中文")
    }

    onPaint: {

        var ctx = getContext("2d")
        ctx.clearRect(0, 0, width, height);

        ctx.beginPath()
        ctx.strokeStyle = arcColor
        ctx.lineWidth = 2
        ctx.arc(width/2, height/2, radius, 0, Math.PI*2, true)
        ctx.stroke()
    }
}