I can draw a polygon on a map, this polygon is a rectangular which I can rotate it or rescale it.
The point is that I want to draw a qpixmap in this rectangular as background but I have no idea how to do it, Is it even possible?there is not any property in MapPolygon which I can assign an qpixmap into it.
Map {
id: mapBase
gesture.enabled: true
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(45,10)
zoomLevel: 4
z: parent.z + 1
MapPolygon {
color: 'green'
path: [
{ latitude: -27, longitude: 153.0 },
{ latitude: -27, longitude: 154.1 },
{ latitude: -28, longitude: 153.5 }
]
}
}
You could use an OpacityMask, conjointly with a QML Image
MapPolygon {
id: polygon
color: 'white' // Any color, only alpha channel will be used
path: [
{ latitude: -27, longitude: 153.0 },
{ latitude: -27, longitude: 154.1 },
{ latitude: -28, longitude: 153.5 }
]
visible: false
}
Image {
id: image
source: "myImage.png"
visible: false // hide it so it does not appear over the masked image
}
OpacityMask // Actual masked image
{
source: image
maskSource: polygon
anchors.fill: polygon
}
Related
I have QQuickWidget and QML in it
Plugin {
id: mapPlugin
objectName: "mapPlugin"
name: "osm"
...
}
Map {
id: map
objectName: "map"
....
MapItemView {
id: mapItemPath
model: mapProxyModel
delegate: MapPolyline {
path: pathRole
line.color: "red"
line.width: 10
// opacity: 0.5
}
opacity: 0.5
}
actually opacity not working. Why that could be?
To make opacity work on the MapPolyLine you either should set opacity or use Qt.rgba() to create a color with an alpha value appropriate to use your opacity you want to get.
Plugin {
id: mapPlugin
name: "osm"
}
Map {
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(-27, 153.0)
zoomLevel: 8
MapPolyline {
line.width: 10
line.color: Qt.rgba(0, 1, 0, 0.5)
//opacity: 0.5
path: [
{ latitude: -27, longitude: 153.0 },
{ latitude: -27, longitude: 154.1 },
{ latitude: -28, longitude: 153.5 },
{ latitude: -29, longitude: 153.5 }
]
}
}
I want to drag a two MapQuickItem which is declare inside the component and gets real time coordinates from map. MapQuickItem component is a rectangle having red and green colour. I want two drag both rectangle at same time when they are at same coordinates. How to drag both component at same time on map with same coordinates.
Map {
id: map
anchors.fill: parent
activeMapType: supportedMapTypes[1];
zoomLevel: 18
plugin: hereMaps
center: QtPositioning.coordinate(19.997454, 73.789803)
MapItemView {
id: markerItem
model: [
{ id: "marker1", color: "red" },
{ id: "marker2", color: "green" },
]
delegate: mapMarkerComponent
}
Component {
id : mapMarkerComponent
MapQuickItem {
id: mapMarker
coordinate: QtPositioning.coordinate(19.997454, 73.789803)
sourceItem: Rectangle {
id: handle
color: modelData.color
width: 40
height: 40
MouseArea {
drag.target: parent
anchors.fill: parent
}
onXChanged: {
mapMarker.x += x
}
onYChanged: {
mapMarker.y += y
}
}
}
}
}
Here the code that works for me, i.e. dragging marker2 implicitly drags marker1.
Map {
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 14
MapQuickItem {
id: marker1
anchorPoint.x: 15
anchorPoint.y: 15
sourceItem: Rectangle {
id: rect1
width: 30
height: 30
radius: 15
color: "#8000FF00"
}
coordinate: QtPositioning.coordinate(marker2.coordinate.latitude + 0.005, marker2.coordinate.longitude)
}
MapQuickItem {
id: marker2
anchorPoint.x: 10
anchorPoint.y: 10
sourceItem: Rectangle {
id: rect2
width: 20
height: 20
radius: 10
color: "#800000FF"
MouseArea {
drag.target: parent
anchors.fill: parent
}
onXChanged: marker2.x += x;
onYChanged: marker2.y += y;
}
coordinate: QtPositioning.coordinate(59.91, 10.75)
}
}
I am having a code like this
Map {
id: map
anchors.fill: parent
plugin: Plugin {
name: "osm"
}
center: QtPositioning.coordinate(59.91, 10.75)
zoomLevel: 10
MapQuickItem {
id: transMarker
sourceItem: Image {
id: transImage
width: 50
height: 50
source: "trans.png"
}
}
MouseArea{
anchors.fill: parent
onClicked: {
var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
transMarker.coordinate = coord;
console.log(coord.latitude, coord.longitude)
}
}
}
So on each click now the image moves from one coordinate to next coordinate, i would like to create a copy of the image in each place i click, How can i implement that?
You have to create a model(like ListModel) with a MapItemView that you use as a delegate to the MapQuickItem:
ListModel {
id: markermodel
dynamicRoles: true
}
Map {
id: map
anchors.fill: parent
plugin: Plugin {
name: "osm"
}
center: QtPositioning.coordinate(59.91, 10.75)
zoomLevel: 10
MapItemView{
model: markermodel
delegate: MapQuickItem {
coordinate: model.position
sourceItem: Image {
width: 50
height: 50
source: "trans.png"
}
}
}
MouseArea{
anchors.fill: parent
onClicked: {
var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
markermodel.append({"position": coord})
}
}
}
I am trying to animate a property within my PathView delegate once it comes into view.
Component {
id: pathViewDelegate
Item {
Text {
id: tempText
color: "red"
text: "test"
}
function intoView() {
myAnimation.start()
}
SequentialAnimation {
id: myAnimation
PropertyAnimation {duration: 1000; target: tempText; properties: "color"; to: "green"}
PropertyAnimation {duration: 1000; target: tempText; properties: "color"; to: "yellow"}
}
}
}
The only way I know how to display my PathView correctly (like a linear carousel) is to have the currentItem clipped off screen. In other words, the displayed item is always currentIndex+1 in my PathView.
PathView {
id: mainCarousel
width: parent.width
height: parent.height
interactive: false
highlightMoveDuration: 300
clip: true
model: pathViewModel
delegate: pathViewDelegate
path: Path {
startX: -mainCarousel.width*0.5
startY: mainCarousel.height/2
PathLine { x: mainCarousel.width*0.5; y: mainCarousel.height/2 }
PathLine { x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 }
}
}
}
So, when I try to implement a function with "mainCarousel.currentItem.intoView()", it animates the item clipped off screen. I know there isn't a way to do "currentItem+1", but is there some other workaround?
EDIT: Full example code
ListModel {
id: pathViewModel
ListElement {header: "text 1"}
ListElement {header: "text 2"}
ListElement {header: "text 3"}
ListElement {header: "text 4"}
}
Component {
id: pathViewDelegate
Item {
width: mainCarousel.width
height: mainCarousel.height
Text {
color: "red"
text: header
}
function runAnimation() {
myAnimation.start()
}
SequentialAnimation {
id: myAnimation
PropertyAnimation {property: "color"; to: "green"; duration: 1000}
PropertyAnimation {property: "color"; to: "yellow"; duration: 1000}
PropertyAnimation {property: "color"; to: "purple"; duration: 1000}
}
}
}
PathView {
id: mainCarousel
width: 500
height: 500
interactive: false
highlightMoveDuration: 300
clip: true
model: pathViewModel
delegate: pathViewDelegate
path: Path {
startX: -mainCarousel.width*0.5
startY: mainCarousel.height/2
PathLine { x: mainCarousel.width*0.5; y: mainCarousel.height/2 }
PathLine { x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 }
}
}
MouseArea {
id: telltaleMouseArea
anchors.fill: mainCarousel
onClicked: {
mainCarousel.incrementCurrentIndex()
mainCarousel.currentItem.runAnimation()
}
}
The initial item displayed is "text 2". The currentItem is "text 1", initially. In the code, when the MouseArea is clicked, "text 2" animates, but it is off screen. I am just trying to animate the item that is in view, when it becomes into view.
Change the animation to the following:
Text {
color: "red"
text: header
SequentialAnimation on color{
id: myAnimation
ColorAnimation {
to: "green"
duration: 1000
}
ColorAnimation {
to: "yellow"
duration: 1000
}
ColorAnimation {
to: "purple"
duration: 1000
}
}
}
and make sure your currentItem is in view with : startX: mainCarousel.width*0.5
I have a PathView with Rectangle as the delegate. I change the PathView.path to another path and I want to play animation of moving PathView items to their new positions. Something like this:
PathView {
id: pathView
delegate: Rectangle {
Behavior on x {
NumberAnimation {
duration: 5000
}
}
}
path: path1
}
But it doesn't work. Is it possible to do somehow?
Unfortunately, changing the "PathView.path" to another "Path" will destroy and recreate delegates just like changing a model.
A workaround can be done with "states". You create multiple blank PathLine and set its x and y values from states. You give the animation from "transitions"
This Sample code will initially have 3 data items in the model. In between the animation, it reloads the model with 5 data and still works in a continuous fashion without any glitch to the animation.
PathView {
id: pathView
anchors.fill: parent
anchors.margins: 100
model: 3
path: Path {
id: pathLines
PathLine { id: pl1 }
PathLine { id: pl2 }
PathLine { id: pl3 }
PathLine { id: pl4 }
PathLine { id: pl5 }
}
state: 'zigzag'
states: [
State {
name: "zigzag"
PropertyChanges { target: pathLines; startX: 0; startY: 100; }
PropertyChanges { target: pl1; x: 200; y: 300; }
PropertyChanges { target: pl2; x: 500; y: 100; }
PropertyChanges { target: pl3; x: 600; y: 300; }
PropertyChanges { target: pl4; x: 800; y: 100; }
PropertyChanges { target: pl5; x: 1000; y: 300; }
},
State {
name: "close"
PropertyChanges { target: pathLines; startX: pathView.width/2; startY: pathView.height/2; }
PropertyChanges { target: pl1; x: pathView.width/2; y: pathView.height/2; }
PropertyChanges { target: pl2; x: pathView.width/2; y: pathView.height/2; }
PropertyChanges { target: pl3; x: pathView.width/2; y: pathView.height/2; }
PropertyChanges { target: pl4; x: pathView.width/2; y: pathView.height/2; }
PropertyChanges { target: pl5; x: (pathView.width/2) + 1; y: pathView.height/2; } // Note: "+1" to fix disappearance bug
},
State {
name: "open"
PropertyChanges { target: pathLines; startX: pathView.width/2; startY: pathView.height/4; }
PropertyChanges { target: pl1; x: pathView.width/2; y: pathView.height/4; }
PropertyChanges { target: pl2; x: pathView.width/2; y: pathView.height/4; }
PropertyChanges { target: pl3; x: pathView.width/2; y: pathView.height/4; }
PropertyChanges { target: pl4; x: pathView.width/2; y: pathView.height/4; }
PropertyChanges { target: pl5; x: pathView.width/2 + 1; y: pathView.height/4; } // Note: "+1" to fix disappearance bug
},
State {
name: "triangle"
PropertyChanges { target: pathLines; startX: 200; startY: 500; }
PropertyChanges { target: pl1; x: 400; y: 700; }
PropertyChanges { target: pl2; x: 600; y: 500; }
PropertyChanges { target: pl3; x: 350; y: 500; }
PropertyChanges { target: pl4; x: 300; y: 500; }
PropertyChanges { target: pl5; x: 250; y: 500; }
}
]
transitions: [
Transition {
to: 'zigzag'
SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; onFinished: pathView.state = 'triangle' }
},
Transition {
to: 'triangle'
SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; }
},
Transition {
to: 'close'
SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; }
onRunningChanged: {
if (!running) {
pathView.model = 5
pathView.state = 'open'
}
}
},
Transition {
from: "close"
to: 'open'
SmoothedAnimation { properties: "x,y,startX,startY"; easing.type: Easing.InOutQuad; duration: 2000; }
onRunningChanged: !running ? pathView.state = 'triangle' : ''
}
]
delegate: Rectangle {
width: 20
height: 20
radius: 20
color: 'green'
}
}
Controls.Button {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: 'Start Animation'
onClicked: pathView.state = 'close'
}
The state names like "zigzag" and "triangle" does not resemble its real shape, just some random shape for test purposes.