qml基础学习 Canvas画笔

最新推荐文章于 2024-04-07 17:52:53 发布

一窝蜂117

最新推荐文章于 2024-04-07 17:52:53 发布

阅读量490

点赞数

分类专栏： qml学习文章标签： qml画笔 Canvas

本文链接：https://blog.csdn.net/qq_30392343/article/details/97611259

版权

qml学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、画布元素

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

二、效果预览

三、源码分析

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

import QtQuick 2.2

Rectangle{
    width: 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();
        }
    }
}