Qt 模擬乙個導航定位系統

軟體結構

現在開始講一下原始碼吧

重點：anchors錨布局

discover

qml的布局方式一般採用兩種，一種就是直接設定x與y座標的值。一種是採用相對位置布局，anchors錨布局，使用錨布局能夠使介面更緊湊，更有整體化，我們將這種機制成為錨點（anchor）。錨點允許我們靈活地設定兩個元素的相對位置。它使兩個元素之間形成一種類似於錨的關係，也就是兩個元素之間形成乙個固定點。

錨點的行為類似於一種鏈結，它要比單純地計算座標改變更強。由於錨點描述的是相對位置，所以在使用錨點時，我們必須指定兩個元素，宣告其中乙個元素相對於另外乙個元素。錨點是item元素的基本屬性之一，因而適用於所有 qml 可視元素。

用錨定位

除了更傳統的網格，行和列之外，qt quick還提供了一種使用錨點概念布局專案的方法。每個專案可以被認為具有一組7個不可見的「錨線」：left，horizontalcenter，right，top，verticalcenter，baseline和bottom。

基線（上圖未顯示）對應於文字所在的虛線。對於沒有文字的專案，它與頂部相同。qt快速錨定系統允許您定義不同專案的錨線之間的關係。

用法有如下，這裡不一一介紹。

anchors.baseline : anchorline

anchors.baselineoffset : real

anchors.bottom : anchorline

anchors.bottommargin : real

anchors.centerin : item

anchors.fill : item

anchors.horizontalcenter : anchorline

anchors.horizontalcenteroffset : real

anchors.left : anchorline

anchors.leftmargin : real

anchors.margins : real

anchors.mirrored : boolanchors.right : anchorline

anchors.rightmargin : real

anchors.top : anchorline

anchors.topmargin : realanchors.verticalcenter : anchorline

anchors.verticalcenteroffset : real

看看這個demo的程式吧，放一些固定的定位節點，將此設定在座標下

property var positions: [qt.point(80, 190), qt.point(180, 90),
qt.point(280, 390), qt.point(480, 90),
qt.point(80, 590)]

定位節點如圖所示

將其畫出來，這裡在qt 純屬娛樂-繪製乙個模擬時鐘講過，大家可以參考一下。

function drawline(ctx, color, width, startx, starty, endx, endy)

繪製影象

//繪製網格豎線
for(var i = 0; i < width; i += 20)
drawline(ctx, "#7266fc", 0.5,i + 0.5, 0, i + 0.5, height);
//繪製網格橫線
for(var j = 0; j < height; j += 20)
drawline(ctx, "#7266fc", 0.5, 0, j + 0.5, width, j + 0.5);
//繪製地圖標記
positions.foreach(function(point, i) );

繪製掃瞄圓，這個算是精髓吧

for(var k = 0; k < 5; k += 0.5)

最後，點選("scan") 開始定時畫掃瞄圓，就出現這個畫面了，還是有點炫酷的.

推薦閱讀

（點選標題可跳轉閱讀）

Qt 模擬乙個導航定位系統

導航定位系統的原理解析（乙個小白寫給另乙個小白）

Python模擬乙個使用者登入系統

乙個完美的導航樹

Qt 模擬乙個導航定位系統

導航定位系統的原理解析（乙個小白寫給另乙個小白）

Python模擬乙個使用者登入系統

乙個完美的導航樹

相關推薦