目錄

?

官方解析

博主例子

---

官方解析

? ? ? ? Canvas可以用于畫直線或曲線，簡單或復雜的形狀，圖形，圖片，并且他能加文字，顏色，陰影，和顏色梯度，和其他的裝飾，可以進行低像素操作。Canvas可以保存成圖像文件，或者有序列號的URL。

? ? ? ? 使用Context2D對Canvas進行渲染，通常是寫到信號paint中。
? ? ? ? 通過Canvas的width和height屬性可設置繪畫區域，舉個例子，下面的這個例子創建了一個Canvas，并且這個Canvas畫了一個區域，這個區域height為100像素，width為200像素。

import QtQuick 2.0Canvas {id: mycanvaswidth: 100height: 200onPaint: {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.0ApplicationWindow {visible: truewidth: 800height: 600MyCanvas{id: myCanvas}MyCanvas2{id: myCanvas2anchors.centerIn: parent} }

MyCanvas.qml

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

MyCanvas2.qml

import QtQuick 2.0Canvas{property real radius: 100property color arcColor: "#EE3A8C"id: myCanvas2width: 2 * radius + 5height: 2 * radius + 5Text{anchors.centerIn: parentfont.pointSize: 15text: qsTr("中文")}onPaint: {var ctx = getContext("2d")ctx.clearRect(0, 0, width, height);ctx.beginPath()ctx.strokeStyle = arcColorctx.lineWidth = 2ctx.arc(width/2, height/2, radius, 0, Math.PI*2, true)ctx.stroke()} }

?

總結

以上是生活随笔為你收集整理的Qt文档阅读笔记-QML Canvas的官方解析及实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。