【QT】QT的学习：在qml的地图中如何让某一个图标旋转

56 阅读 0 评论 37 点赞

我是靠谱客的博主典雅酸奶，最近开发中收集的这篇文章主要介绍【QT】QT的学习：在qml的地图中如何让某一个图标旋转，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在地图中，如何让marker旋转，例如：地图中车辆的朝向的变化意味着图标要进行旋转。


import QtQuick 2.4
import QtQuick.Window 2.2
import QtPositioning 5.5
import QtQuick.Controls 1.4
import QtLocation 5.9
import QtPositioning 5.5
Window {
width: 700
height: 500
visible: true
Map {
id: mapOfEurope
anchors.centerIn: parent;
anchors.fill: parent
plugin: Plugin {
name: "mapboxgl"
PluginParameter {
name: "mapboxgl.mapping.items.insert_before"
value: "road-label-small"
}
PluginParameter {
name: "mapboxgl.access_token"
value: "pk.eyJ1IjoidG1wc2FudG9zIiwiYSI6ImNqMWVzZWthbDAwMGIyd3M3ZDR0aXl3cnkifQ.FNxMeWCZgmujeiHjl44G9Q"
}
PluginParameter {
name: "mapboxgl.mapping.additional_style_urls"
value: "mapbox://styles/mapbox/navigation-guidance-day-v2,mapbox://styles/mapbox/navigation-guidance-night-v2,mapbox://styles/mapbox/navigation-preview-day-v2,mapbox://styles/mapbox/navigation-preview-night-v2"
}
}
center: QtPositioning.coordinate(52.5175, 13.384)
MapQuickItem {
id: qmlPlane1
coordinate: QtPositioning.coordinate(52.5175, 13.384)
anchorPoint.x: image1.width/2
anchorPoint.y: image1.height/2
sourceItem: Image
{
id:image1
transformOrigin:Item.Center
source:"qrc:/heavyTruck.png"}
}
}
Button{
id:buuu
text: "press"
onClicked: {
image1.rotation = Math.random()*100
}}
}

使用上面的例子发现，图标旋转都是以左上角为原点进行旋转，不能以中心旋转，自己怎么修改都有问题。因此在原有代码的基础上修改MapQuickItem，加上Grid。即：

MapQuickItem {
id: qmlPlane1
coordinate: QtPositioning.coordinate(52.5175, 13.384)
anchorPoint.x: image1.width/2
anchorPoint.y: image1.height/2
sourceItem: Grid{
Image
{
id:image1
transformOrigin:Item.Center
source:"qrc:/heavyTruck.png"}
}
}

图标可以以中心旋转。欢迎指正。