Qt 模擬一個導航定位系統

本文轉載自查看原文 2019-09-18 09:50 641 Qt

本文鏈接：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") 開始定時畫掃描圓，就出現這個畫面了，還是有點炫酷的.

推薦閱讀

（點擊標題可跳轉閱讀）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

Qt 模擬一個導航定位系統

Qt 學習筆記-強勢入門

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

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

Qt 純屬娛樂-繪制一個模擬時鍾

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

免責聲明！