QML之Canvas(画布元素)

原创 2015年11月20日 11:59:42
Qt5中引进了画布元素(canvas element),允许脚本绘制。画布元素canvas element) 提供了一个依赖于分辨率的位图画布,你可以使JavaScript脚本来绘制图形,制作游戏或者其它的动态图像。画布元素canvas element)是基于HTML5的画布元素来完成的。

   画布元素( canvas element)的基本思想是使一个2D对象来渲染路径。这2D对象包括了必要的绘图函数,画布元素(canvas element)充当绘制画布。2D对象持画笔,填充,渐变,文本和绘制路径创建命令。

   在QML中,画布元素(canvas element)充当了绘制的容器。2D绘制对象提供了实际绘制的方法。绘制需要在onPaint事件中完成。

画布的绘制使用:

1. 装载画笔或者填充模式
2. 创建绘制路径
3. 使用画笔或者填充绘制路径

使用一个简单的例子说明这个过程

onPaint: {
var ctx = getContext("2d")
ctx.strokeStyle = "red"//画笔的样式
ctx.beginPath()//绘制开始路径,
ctx.moveTo(50,50)//设置一个开始的点
ctx.lineTo(150,50)//设置结束的点
ctx.closePath()//
ctx.stroke()//画路径
}

这样子就画好了一条线。路径的设置,也就是在坐标系中找好点,一个开始点,一个结束点,这样点点之间就是画笔的路径。使用stroke就把路径线画好了。这里面的坐标是二维笛卡尔坐标系统,左上角是( 0,0)坐标。Y轴坐标轴向下,X轴坐标轴向右。






版权声明:本文为博主原创文章,未经博主允许不得转载。

qml学习--------------利用Canvas绘制简单图形

在qml中,要实现绘图,就必须要用到下面的东西: Canvas: 画布 context: 画师 Pen: 画笔 Brush: 画刷 坐标系: qml中,画布的原点是在左上角的。在qml中...
  • u011619422
  • u011619422
  • 2015年09月23日 11:19
  • 2480

QML画图-Canvas

定义画笔 Canvas     {         id: canvas;         width: 100; height: 100 //画布需要定义面积             onPaint...
  • u012419303
  • u012419303
  • 2015年07月02日 17:11
  • 2394

在QML应用中使用Canvas来画图

我们知道画图应用设计中比较重要,虽然QML有很多可以帮我们渲染的控件。我们可以在QML应用中使用Canvas来画我们所需要的图。比如我们可以利用Canvas来画股票的曲线。事实上,我们很容易使用这个A...
  • UbuntuTouch
  • UbuntuTouch
  • 2015年06月05日 13:46
  • 4150

QML中使用canvas简单绘图

看到QT那么多元素都懒得说了,今天看到了Canvas,必须一说。 当然,QML我也在学习中,此博客是我的学习记录。 Canvas的中文翻译是帆布,也就是说它其实相当于我们的画布,这么一想,画图也就...
  • xuancailinggan
  • xuancailinggan
  • 2016年03月12日 10:53
  • 2887

qml学习---------------利用Canvas绘制文本

在利用Canvas绘制文本的时候,可以指定文本不同的风格。 Context2D中和文本相关的方法有3个: fillText() , strokeText() , text();使用方法就下面两种: ...
  • u011619422
  • u011619422
  • 2015年09月23日 11:23
  • 1393

qml中使用Canvas绘制饼状图

  • 2017年08月09日 21:16
  • 2KB
  • 下载

QML类型说明-Canvas

Canvas ImportStatement:   import QtQuick 2.2 Since:  Qt 5.0 Inherits:      Item   Properties a...
  • Vampire_Armand
  • Vampire_Armand
  • 2014年08月29日 16:44
  • 2220

QML中的Canvas绘图---渐变

QML中的Canvas的画布功能其实和js以及h5的Canvas基本一样,以下是我使用QML的Canvas绘出渐变效果的代码,在过程中出现的几个问题,都是由几个关键的数据控制的,这个一般在网上和帮助文...
  • xi__q
  • xi__q
  • 2017年02月07日 16:53
  • 759

QML类型说明-Canvas

Canvas ImportStatement:   import QtQuick 2.2 Since:  Qt 5.0 Inherits:      Item   Properties a...
  • wyhang0
  • wyhang0
  • 2016年09月06日 11:23
  • 735

QML中绘图(1、Canvas 2、QPainter与QML结合)

QML中的Canvas和HTML5中Canvas是一样的,可以参考W3CSchool中的学习方法:HTML 5 Canvas 参考手册 画线、删除线、删除全部实例: 不过,QML中的Canv...
  • u014597198
  • u014597198
  • 2016年09月05日 09:07
  • 3356
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:QML之Canvas(画布元素)
举报原因:
原因补充:

(最多只允许输入30个字)