Qt 模擬一個導航定位系統

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接和本聲明。

本文連接：https://www.cnblogs.com/lihuidashen/p/11539755.html

https://mp.weixin.qq.com/s/b-DK1ndudiPtyFpbE8lseQ

效果視頻

 

 

軟件結構

 

 

 

如今開始講一下源碼吧

重點：anchors錨佈局

Discover
{
    id: discover
    anchors.fill: parent//填充滿父項 }

 

    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 : bool anchors.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) {
    ctx.strokeStyle = color; ctx.lineWidth = width; ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.closePath(); ctx.stroke(); }

 

繪製圖像

//繪製網格豎線 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) { ctx.drawImage("qrc:/images/map_marker.ico", point.x, point.y); });

 

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

for(var k = 0; k < 5; k += 0.5) { ctx.beginPath(); ctx.arc(halfWidth, halfHeight, r1 + k, 0, Math.PI * 2); ctx.closePath(); ctx.stroke(); ctx.beginPath(); if(!first) ctx.arc(halfWidth, halfHeight, r2 + k, 0, Math.PI * 2); ctx.closePath(); ctx.stroke(); }

 

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

 

 

推薦閱讀

（點擊標題可跳轉閱讀）

Qt 學習筆記-強勢入門

Qt 學習筆記-Qt中添加背景圖片的方法

Qt 學習筆記-處理鼠標響應事件

Qt 純屬娛樂-繪製一個模擬時鐘

Qt 學習筆記-中秋節，QPainter畫一顆當心心送給你