qml基础学习 Canvas画笔

一、画布元素

自qt4.7发布qml以来，qml也在一直不断的完善中，在qt4时代使用qml时如果需要异形图，那我们只能让设计师来切图，这样的感觉是很不爽的，总感觉开发没有那么犀利。但是到了qt5这一点有所改变，qt引入了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();
         }
     }
 }

四、相关文章

　　qml基础学习 基础概念

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

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

---

 

---

很重要--转载声明

1. 本站文章无特别说明，皆为原创，版权所有，转载时请用链接的方式，给出原文出处。同时写上原作者：朝十晚八 or Twowords
2. 如要转载，请原文转载，如在转载时修改本文，请事先告知，谢绝在转载时通过修改本文达到有利于转载者的目的。

---

奋斗中的无名小卒。。。