qml基礎學習 Canvas畫筆

一、畫布元素

    自qt4.7發布qml以來，qml也在一直不斷的完善中，在qt4時代使用qml時如果需要異形圖，那我們只能讓設計師來切圖，這樣的感覺是很不爽的，總感覺開發沒有那么犀利。但是到了qt5這一點有所改變，qt引入了canvas畫圖，我們可以在程序中自定義一個畫布來繪制自己想要的圖形，然后達到我們自己想要的效果。

二、效果預覽

圖1 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();
        }
    }
}

四、相關文章

　　qml基礎學習 基礎概念

　　qml基礎學習 模型視圖(一)

 

如果您覺得文章不錯，不妨給個 打賞，寫作不易，感謝各位的支持。您的支持是我最大的動力，謝謝！！！ 

---

 

  

---

很重要--轉載聲明

1. 本站文章無特別說明，皆為原創，版權所有，轉載時請用鏈接的方式，給出原文出處。同時寫上原作者：朝十晚八 or Twowords
2. 如要轉載，請原文轉載，如在轉載時修改本文，請事先告知，謝絕在轉載時通過修改本文達到有利於轉載者的目的。 

---

奮斗中的無名小卒。。。