Difference between revisions of "QML Maps with Pinch Zoom/bg"

From Qt Wiki
Jump to: navigation, search
 
Line 5: Line 5:
 
= Използване на PinchArea за увеличение и MouseArea за движение в карти на QML =
 
= Използване на PinchArea за увеличение и MouseArea за движение в карти на QML =
  
Плъгина на Qt Mobility за географски карти предоставя много удобен QML елемент "Map:"http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html , но оставя навигирането в ръцете на разработчика. Два често срещани методи за навигация са използването на бутане с пръст, за да се придвижите по картата, и приближаване/отдалечеване на два пръста, за да увеличите/намалите картата.
+
Плъгина на 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.
+
Тъй като не съм намерил никакви добри примери как да се направят тези две неща заедно, реших да покажа код, който постига това. Той използва "PinchArea:"http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html елемента, който съществува от Qt Quick 1.1.
  
 
Надявам се, че това ще ви е полезно!
 
Надявам се, че това ще ви е полезно!
  
<code><br />import QtQuick 1.1<br />import QtMobility.location 1.2
+
<code>
 +
import QtQuick 1.1
 +
import QtMobility.location 1.2
  
Rectangle {<br /> id: pinchmap
+
Rectangle {
 +
id: pinchmap
  
property double defaultLatitude: 37.69<br /> property double defaultLongitude: –97.33<br /> property int defaultZoomLevel: 7
+
property double defaultLatitude: 37.69
 +
property double defaultLongitude: –97.33
 +
property int defaultZoomLevel: 7
  
 
property alias mapType: map.mapType
 
property alias mapType: map.mapType
  
width: 640<br /> height: 350
+
width: 640
 +
height: 350
  
Map {<br /> id: map
+
Map {
 +
id: map
  
anchors.fill: parent<br /> zoomLevel: pinchmap.defaultZoomLevel<br /> plugin: Plugin { name: &quot;nokia&amp;quot; }<br /> mapType: Map.StreetMap
+
anchors.fill: parent
 +
zoomLevel: pinchmap.defaultZoomLevel
 +
plugin: Plugin { name: "nokia" }
 +
mapType: Map.StreetMap
  
center: Coordinate {<br /> latitude: pinchmap.defaultLatitude<br /> longitude: pinchmap.defaultLongitude<br /> }<br /> }
+
center: Coordinate {
 +
latitude: pinchmap.defaultLatitude
 +
longitude: pinchmap.defaultLongitude
 +
}
 +
}
  
PinchArea {<br /> id: pincharea
+
PinchArea {
 +
id: pincharea
  
 
property double _''oldZoom
 
property double _''oldZoom
<br /> anchors.fill: parent
+
 
<br /> function calcZoomDelta(zoom, percent) {<br /> return zoom + Math.log(percent)/Math.log(2)<br /> }
+
anchors.fill: parent
<br /> onPinchStarted: {<br />oldZoom = map.zoomLevel<br /> }
+
 
<br /> onPinchUpdated: {<br /> map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)<br /> }
+
function calcZoomDelta(zoom, percent) {
<br /> onPinchFinished: {<br /> map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)<br /> }<br /> }
+
return zoom + Math.log(percent)/Math.log(2)
<br /> MouseArea {<br /> id: mousearea
+
}
<br /> property boolisPanning: false<br /> property intlastX: –1<br /> property intlastY: –1
+
 
<br /> anchors.fill : parent
+
onPinchStarted: {
<br /> onPressed: {<br />isPanning = true<br />lastX = mouse.x<br />lastY = mouse.y<br /> }
+
oldZoom = map.zoomLevel
<br /> onReleased: {<br />isPanning = false<br /> }
+
}
<br /> onPositionChanged: {<br /> if (isPanning) {<br /> var dx = mouse.x -lastX<br /> var dy = mouse.y -lastY<br /> map.pan(-dx, -dy)<br />lastX = mouse.x<br />lastY = mouse.y<br /> }<br /> }
+
 
<br /> onCanceled: {<br />''_isPanning = false;<br /> }<br /> }<br />}<br /></code>
+
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;
 +
}
 +
}
 +
}
 +
</code>

Revision as of 12:38, 25 February 2015


Български | 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" }
 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;
 }
 }
}