QML Maps with Pinch Zoom/bg

From Qt Wiki
< QML Maps with Pinch Zoom
Revision as of 06:48, 24 February 2015 by Maintenance script (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search


Български | English

Използване на PinchArea за увеличение и MouseArea за движение в карти на QML

Плъгина на Qt Mobility за географски карти предоставя много удобен QML елемент "Map:"http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html , но оставя навигирането в ръцете на разработчика. Два често срещани методи за навигация са използването на бутане с пръст, за да се придвижите по картата, и приближаване/отдалечеване на два пръста, за да увеличите/намалите картата.

Тъй като не съм намерил никакви добри примери как да се направят тези две неща заедно, реших да покажа код, който постига това. Той използва "PinchArea:"http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html елемента, който съществува от Qt Quick 1.1.

Надявам се, че това ще ви е полезно!


import QtQuick 1.1
import QtMobility.location 1.2

Rectangle {
id: pinchmap

property double defaultLatitude: 37.69
property double defaultLongitude: –97.33
property int defaultZoomLevel: 7

property alias mapType: map.mapType

width: 640
height: 350

Map {
id: map

anchors.fill: parent
zoomLevel: pinchmap.defaultZoomLevel
plugin: Plugin { name: "nokia&quot; }
mapType: Map.StreetMap

center: Coordinate {
latitude: pinchmap.defaultLatitude
longitude: pinchmap.defaultLongitude
}
}

PinchArea {
id: pincharea

property double _oldZoom
anchors.fill: parent
function calcZoomDelta(zoom, percent) {
return zoom + Math.log(percent)/Math.log(2)
}
onPinchStarted: {
oldZoom = map.zoomLevel
}
onPinchUpdated: {
map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)
}
onPinchFinished: {
map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)
}
}
MouseArea {
id: mousearea
property boolisPanning: false
property intlastX: –1
property intlastY: –1
anchors.fill : parent
onPressed: {
isPanning = true
lastX = mouse.x
lastY = mouse.y
}
onReleased: {
isPanning = false
}
onPositionChanged: {
if (isPanning) {
var dx = mouse.x -lastX
var dy = mouse.y -lastY
map.pan(-dx, -dy)
lastX = mouse.x
lastY = mouse.y
}
}
onCanceled: {
_isPanning = false;
}
}
}