qml基础学习 Canvas画笔

一、画布元素

自qt4.7发布qml以来，qml也在一直不断的完善中，在qt4时代使用qml时如果需要异形图，那我们只能让设计师来切图，这样的感觉是很不爽的，总感觉开发没有那么犀利。但是到了qt5这一点有所改变，qt引入了canvas画图，我们可以在程序中自定义一个画布来绘制自己想要的图形，然后达到我们自己想要的效果。

二、效果预览

图1 canvas画布

三、源码分析

代码量都是算法，这个我就不解释了(主要是看不懂)，控件中就包含了一个Canvas画布，然后在画布的onPaint函数中绘制图形

 1 import QtQuick 2.2
 2 
 3 Rectangle{
 4      300;
 5     height: 300;
 6 
 7     //自定义画布
 8     Canvas {
 9         id: root;
10         anchors.fill: parent;
11 
12         //再次函数中绘制图形
13         onPaint: {
14             var ctx = getContext("2d");
15             draw(ctx);
16         }
17 
18         function draw (ctx) {
19             ctx.fillRect(0, 0, 300, 300);
20             for (var i = 0; i < 3; i++) {
21                 for (var j = 0; j < 3; j++) {
22                     ctx.save();
23                     ctx.strokeStyle = "#9CFF00";
24                     ctx.translate(50 + j * 100, 50 + i * 100);
25                     drawSpirograph(ctx, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
26                     ctx.restore();
27                 }
28             }
29         }
30 
31         function drawSpirograph (ctx, R, r, O) {
32             var x1 = R - O;
33             var y1 = 0;
34             var i  = 1;
35             ctx.beginPath();
36             ctx.moveTo(x1, y1);
37             do {
38                 if (i > 20000) break;
39                 var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
40                 var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
41                 ctx.lineTo(x2, y2);
42                 x1 = x2;
43                 y1 = y2;
44                 i++;
45             } while (x2 != R-O && y2 != 0 );
46             ctx.stroke();
47         }
48     }
49 }

四、相关文章

　　qml基础学习基础概念

　　qml基础学习模型视图(一)

如果您觉得文章不错，不妨给个打赏，写作不易，感谢各位的支持。您的支持是我最大的动力，谢谢！！！

很重要--转载声明

如要转载，请原文转载，如在转载时修改本文，请事先告知，谢绝在转载时通过修改本文达到有利于转载者的目的。

奋斗中的无名小卒。。。