Qt開發Quick模闆-Rectangle和坐标系統

可視化畫布 （The visual Canvas）

在前面的示例中我們已經看到，Qt Quick界面的左上角的坐标為 (0, 0) ，也就是常說的原點。在這裡我們做一個規範點的總結：

Qt Quick提供了一個擁有 z 排序的二維可視畫布，它包含兩個坐标系統，分别是項目坐标和場景坐标。

• 項目坐标（Item Coordinates）
• Qt Quick中使用的預設可視化坐标系統是項目坐标，這是一個笛卡爾坐标系統，在項目的左上角是原點 (0, 0)，X軸向右增大，Y軸向下增大，是以項目的右下角是坐标 (width, height) 。而一個獨立的項目的位置是由其父項目來指定的，簡單來說，其父項目的左上角是其原點。
• 場景坐标（Scene Coordinates）
• 渲染場景的視窗的左上角是場景的原點 (0, 0)，一般來說，場景坐标與視窗中的根項目的坐标相同。如果需要進行坐标轉換，可以使用 Item::mapFromItem 和 Item::mapToItem 方法進行。

下面再通過一段代碼來具體看一下坐标系統：

Window {
    visible: true
    width: 200
    height: 200

    Rectangle {
        width: 200
        height: 200
        color: "red"

        Rectangle {
            x: 100
            y: 100
            width: 100
            height: 100
            color: "blue"

            Rectangle {
                width: 50
                height: 50
                color: "green"
            }
        }
    }
}           

代碼運作效果如下圖所示。

紅色矩形沒有指定x、y屬性，預設值均為0，是以其原點就在視窗的左上角，這時左上角也是場景的原點；藍色矩形放置在了其父項目也就是紅色矩形的 (100, 100) 點；綠色矩形也沒有指定x、y屬性，是以預設也會放置在(0, 0)點，但是因為它的父項目為藍色矩形，是以它在藍色矩形的左上角。

Rectangle

Rectangle可以說是Qt Quick中最簡單的可視化項目之一，它可以使用純色或漸變色來填充一個區域，并且可以提供一個矩形的邊框。在幫助文檔中索引關鍵字 Rectangle ，可以檢視該項目的的介紹，開頭如下圖所示：

這裡的 Import Statement: import QtQuick 2.12 表明要使用該項目需要添加 import QtQuick 2.12 導入語句；而 Inherits: Item 表明該項目繼承自 Item ； 下面的 List of all members, including inherited members 表明可以點選檢視該項目的包括從父項目繼承過來的所有成員；而下面 Properties 中是Rectangle特有的屬性。可以看到除了從Item繼承過來的屬性之外，它隻包含下面幾個屬性：

• antialiasing : bool
• borderborder.width : intborder.color : color
• color : color
• gradient : any
• radius : real

先看 color 和 gradient 屬性，前者用來設定純色，後者用來設定漸變色；border 是屬性組，包括邊框寬度 border.width 和邊框顔色 border.color ，預設是沒有邊框的，除非設定了邊框寬度，但如果邊框寬度設定為很大的值會怎樣呢？大家先思考下；然後是 radius，用于繪制圓角矩形的角半徑，四個角會同時使用相同的角半徑，角半徑要設定為多少合适呢？這個大家也可以自己研究下；當繪制圓角矩形時 antialiasing 屬性預設為 true，用于抗鋸齒，否則為 false，是以一般這個屬性不用設定。

下面來看一個例子：

Window {
    visible: true
    width: 700
    height: 500

    Rectangle {
        anchors.fill: parent
        color: "red"

        Rectangle {
            x: 200
            y: 100
            width: 300
            height: 300
            color: "blue"
            border { color: "white"; width: 10 }

            Rectangle {
                width: 300
                height: 300
                color: "green"
                radius: 150
            }
        }
    }
}           

代碼運作效果如下圖所示。

這裡大家主要看一下綠色圓形的邊界和藍色正方形的邊界，邊框會繪制在矩形的邊界之内，是以邊框的寬度并不影響矩形的位置和布局。

結語

本篇的内容比較簡單，不過裡面也包含了一些重要的技能，比如在幫助中檢視一個項目的文檔，以及如何來研究一個屬性的具體使用及一些模糊問題。

點選領取Qt學習資料+視訊教程~「連結」