官方解析

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的官方解析及实例相关推荐

Qt文档阅读笔记-QML RotationAnimation官方解析及实例
目录官方解析博主例子官方解析 RotationAnimation是一个属性动画,这个属性控制图片的旋转. 默认情况下,他在给定的数值方向上旋转,比如从0度顺时针旋转到240度,也可以逆时针旋转比 ...
Qt文档阅读笔记-Simple Anchor Layout Example解析
这个例子展示了锚布局在视图场景中的使用. 此篇例子其实就是教QGraphicsAnchorLayout类的使用. 首先创建了QGraphicScene(场景),3个widgets(a,b,c),以及一 ...
Qt文档阅读笔记-QtConcurrent Progress Dialog Example解析
这篇展示了如何监听任务的进度. QtConcurrent Progress Dialog使用QFutrueWathcer类去监听任务进程进展. 代码如下: progressdialog.pro QT ...
Qt文档阅读笔记-QtConcurrent Map Example官方实例解析
这个例子对数据处理有很大的用处,在此记录下. 官方对应这个例子解析如下: QtConcurrent Map exapmle展示了使用QtConcurrent API的同步(阻塞)接口对图片进行拉伸.这 ...
Qt文档阅读笔记-最简单的动态3D圆环实例
程序的逻辑如下: 正常显示逻辑: 1.场景中要存在一个根实体: 2.为根实体加载材质: 3.在根实体下添加其他实体: 4.为其他实体添加额外的数据(比如画圆环等): 5.放置摄像机,设置前景等属性. ...
Qt文档阅读笔记-Threaded Fortune Server Example解析
Fortune服务端展示了如何去创建一个多线程服务端.此实例与Fortune客户端运行. 首先继承QTcpServer重写下子类,方便实现多线程. 这里需要两个类:一个是QTcpServer的子类,一 ...
Qt文档阅读笔记-OpenGL Window Example的解析笔记
目录 OpenGLWindow Super Class Example OpenGL Rendering Sub Class 注意: 这是一个辣鸡用法他是在QWindow中使用OpenGL,在以后的练 ...
Qt文档阅读笔记-QVariant::value()与qvariant_cast解析及使用
目录官方解析博主栗子 QVariant::value()的小栗子 qvariant_cast小栗子 QVariant在容器中的使用官方解析 QVariant::value()与qvariant_ ...
Wireshark文档阅读笔记-TCP 4 times close解析与实例
先介绍一个知识点: 当TCP最后一次握手结束后,也就是客户端发送ACK后,客户端不会立即释放资源.会先将状态转换为TIME-WAIT然后等到2-MSL(Maximum Segment Lifetime ...

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

官方解析

博主例子

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

最新文章

热门文章