QML Maps with Pinch Zoom/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
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;
 }
 }
}