qml基础学习 Canvas画笔

一、画布元素

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

二、效果预览

qml基础学习 Canvas画笔

图1 canvas画布

三、源码分析

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

 import QtQuick 2.2

 Rectangle{

     width: ;

     height: ;

     //自定义画布

     Canvas {

         id: root;

         anchors.fill: parent;

         //再次函数中绘制图形

         onPaint: {

             var ctx = getContext("2d");

             draw(ctx);

         }

         function draw (ctx) {

             ctx.fillRect(, , , );

             for (var i = ; i < ; i++) {

                 for (var j = ; j < ; j++) {

                     ctx.save();

                     ctx.strokeStyle = "#9CFF00";

                     ctx.translate( + j * ,  + i * );

                     drawSpirograph(ctx,  * (j + ) / (j + ), - * (i + ) / (i + ), );

                     ctx.restore();

                 }

             }

         }

         function drawSpirograph (ctx, R, r, O) {

             var x1 = R - O;

             var y1 = ;

             var i  = ;

             ctx.beginPath();

             ctx.moveTo(x1, y1);

             do {

                 if (i > ) break;

                 var x2 = (R + r) * Math.cos(i * Math.PI / ) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / ))

                 var y2 = (R + r) * Math.sin(i * Math.PI / ) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / ))

                 ctx.lineTo(x2, y2);

                 x1 = x2;

                 y1 = y2;

                 i++;

             } while (x2 != R-O && y2 !=  );

             ctx.stroke();

         }

     }

 }