qml基础学习 Canvas画笔

一、画布元素

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

二、效果预览

图1 canvas画布

三、源码分析

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

import QtQuick 2.2

Rectangle{
     300;
    height: 300;

    //自定义画布
    Canvas {
        id: root;
        anchors.fill: parent;

        //再次函数中绘制图形
        onPaint: {
            var ctx = getContext("2d");
            draw(ctx);
        }

        function draw (ctx) {
            ctx.fillRect(0, 0, 300, 300);
            for (var i = 0; i < 3; i++) {
                for (var j = 0; j < 3; j++) {
                    ctx.save();
                    ctx.strokeStyle = "#9CFF00";
                    ctx.translate(50 + j * 100, 50 + i * 100);
                    drawSpirograph(ctx, 20 * (j + 2) / (j + 1), -8 * (i + 3) / (i + 1), 10);
                    ctx.restore();
                }
            }
        }

        function drawSpirograph (ctx, R, r, O) {
            var x1 = R - O;
            var y1 = 0;
            var i  = 1;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            do {
                if (i > 20000) break;
                var x2 = (R + r) * Math.cos(i * Math.PI / 72) - (r + O) * Math.cos(((R + r) / r) * (i * Math.PI / 72))
                var y2 = (R + r) * Math.sin(i * Math.PI / 72) - (r + O) * Math.sin(((R + r) / r) * (i * Math.PI / 72))
                ctx.lineTo(x2, y2);
                x1 = x2;
                y1 = y2;
                i++;
            } while (x2 != R-O && y2 != 0 );
            ctx.stroke();
        }
    }
}

四、相关文章

　　qml基础学习 基础概念

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

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

---

 

  

---

很重要--转载声明

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

---

奋斗中的无名小卒。。。