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 }
]
}
}
Related
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've just started programming in QML and I need to make a simple Carousel with some images. I've found that the simplest way to do that is to use a PathView. According to that I've tried to make my current item on the center of the view,failing. Here's the code I've done.
Rectangle {
id: rectangle
height: 200
color: "#00000000"
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillWidth: true
PathView {
id: carouselView
anchors.fill: parent
model: listModel
delegate: Image {
width: PathView.isCurrentItem ? 256 : 128
height: PathView.isCurrentItem ? 256 : 128
source: iconSource
}
path: Path {
startX: 0
PathLine {
x: 800
y: 0
}
}
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
}
}
ListModel {
id: listModel
ListElement {
iconSource: "qrc:///images/chair.svg"
}
ListElement {
iconSource: "qrc:///images/chair.svg"
}
ListElement {
iconSource: "qrc:///images/chair.svg"
}
ListElement {
iconSource: "qrc:///images/chair.svg"
}
}
The desired effect is a simple horizontal carousel with a centered current item.
Current version used : 5.6
Here is a simple carousel example using PathView:
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 640
Component {
id: delegate
Item {
width: 200; height: 200
scale: PathView.iconScale
opacity: PathView.iconOpacity
z: PathView.iconOrder
Image { anchors.fill: parent; source: modelData }
}
}
PathView {
id: view
anchors.fill: parent
anchors.bottomMargin: 150
anchors.topMargin: 50
pathItemCount: 7
preferredHighlightBegin: 0.5 //
preferredHighlightEnd: 0.5 // That should center the current item
highlightRangeMode: PathView.StrictlyEnforceRange //
model:
[
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
"http://placeimg.com/200/200/any?rand=" + Math.random(),
]
delegate: delegate
path: Path {
startX: 0; startY: view.height/2
PathAttribute { name: "iconScale"; value: 0.2 }
PathAttribute { name: "iconOpacity"; value: 10.2 }
PathAttribute { name: "iconOrder"; value: 0 }
PathLine {x: view.width / 2; y: view.height/2 }
PathAttribute { name: "iconScale"; value: 1.2 }
PathAttribute { name: "iconOpacity"; value: 1 }
PathAttribute { name: "iconOrder"; value: 8 }
PathLine {x: view.width; y: view.height/2 }
}
}
}
Sure, if you really want to place current item in the center of the view you just have to change the path, i.e. move start point to the center etc.
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
}
I want to implement a coverflow in QML but having a problem with the angle animation.
Scrolling to the left (from number 1→18→17→...) works great, but right scrolling is not behaving as expected. I'm not sure I got the angles right but they seem to animate from -40°→0° which looks odd (correct would be from 40°→0).
Is there a way to correct this behavior?
Here is a working example of my code:
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
visible: true
width: 1280
height: 800
MouseArea {
anchors.fill: parent
onWheel: {
if (wheel.angleDelta.y < 0)
{
view.incrementCurrentIndex()
}
else if (wheel.angleDelta.y > 0)
{
view.decrementCurrentIndex()
}
}
}
PathView {
id: view
property int itemAngle: 40.0
property int itemSize: width/3.5
anchors.fill: parent
pathItemCount: 10
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
interactive: true
model: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
delegate: viewDelegate
path: Path {
startX: 0
startY: height / 2
PathPercent { value: 0.0 }
PathAttribute { name: "z"; value: 0 }
PathAttribute { name: "angle"; value: view.itemAngle }
PathAttribute { name: "origin"; value: 0 }
PathLine {x: view.width*0.4; y: view.height / 2}
PathPercent { value: 0.45 }
PathAttribute { name: "angle"; value: view.itemAngle }
PathAttribute { name: "origin"; value: 0 }
PathAttribute { name: "z"; value: 10 }
PathLine { relativeX: 0; relativeY: 0 }
PathAttribute { name: "angle"; value: 0.0 }
PathAttribute { name: "origin"; value: 0 }
PathAttribute { name: "z"; value: 10 }
PathLine {x: view.width*0.6; y: view.height / 2}
PathPercent { value: 0.55 }
PathAttribute { name: "angle"; value: 0.0 }
PathAttribute { name: "origin"; value: 0 }
PathAttribute { name: "z"; value: 10 }
PathLine { relativeX: 0; relativeY: 0 }
PathAttribute { name: "angle"; value: -view.itemAngle }
PathAttribute { name: "origin"; value: view.itemSize }
PathAttribute { name: "z"; value: 10 }
PathLine {x: view.width; y: view.height / 2}
PathPercent { value: 1 }
PathAttribute { name: "angle"; value: -view.itemAngle }
PathAttribute { name: "origin"; value: view.itemSize }
PathAttribute { name: "z"; value: 0 }
}
}
Component {
id: viewDelegate
Rectangle {
id: flipItem
width: view.itemSize
height: view.height
color: "white"
z: PathView.z
property var rotationAngle: PathView.angle
property var rotationOrigin: PathView.origin
transform:
Rotation {
id: rot
axis { x: 0; y: 1; z: 0 }
angle: rotationAngle
origin.x: rotationOrigin
origin.y: width
Behavior on angle { PropertyAnimation{} }
}
Rectangle {
border.color: "black"
border.width: 2
color: (index%2 === 0) ? "yellow" : "royalblue"
anchors.top: flipItem.top
anchors.topMargin: 100
anchors.left: flipItem.left
anchors.right: flipItem.right
width: flipItem.width
height: flipItem.height*0.55
smooth: true
antialiasing: true
Text {
text: model.modelData
color: "gray"
font.pixelSize: 30
font.bold: true
anchors.centerIn: parent
}
}
}
}
}
I have been trying to implement a scroll kind of thing using the Pathview element of QML.Below image shows the progress
I want the reduce the distance between the Calendar and the Messaging element. Please help.
Below is my code of the scroll.
import QtQuick 2.0
Rectangle {
// property real rotationOrigin: PathView.origin
id: scroll
width: 800; height: 480
color: "white"
// property real rotationAngle
ListModel {
id: appModel
ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
/*ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }*/
}
Component {
id: appDelegate
Item {
id: item
width: 240; height: 80
scale: PathView.iconScale
property real rotationAngle: PathView.angle
transform: Rotation {
id: rotation
origin.x: item.width/2
origin.y: item.height/2
axis.x: 1; axis.y:0 ; axis.z: 0
angle: rotationAngle
}
Image {
id: myIcon
y: 20; anchors.verticalCenter: parent.verticalCenter
source: icon
smooth: true
}
Text {
anchors {
leftMargin: 10
left: myIcon.right; verticalCenter: parent.verticalCenter }
text: name
font.pointSize: 25
smooth: true
}
MouseArea {
anchors.fill: parent
onClicked: {
view.currentIndex = index
console.log("onClicked" + index);
}
}
}
}
Component {
id: appHighlight
Rectangle { width: 240; height: 80; color: "lightsteelblue" }
}
PathView {
Keys.onRightPressed: if (!moving) { incrementCurrentIndex(); console.log(moving) }
Keys.onLeftPressed: if (!moving) decrementCurrentIndex()
id: view
anchors.fill: parent
highlight: appHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
model: appModel
delegate: appDelegate
path: Path {
startX: scroll.width/2
startY: 0
PathAttribute { name: "z"; value: 0 }
PathAttribute { name: "angle"; value: 75 }
PathAttribute { name: "iconScale"; value: 0.85 }
PathLine { x: scroll.width / 2; y: scroll.height / 4; }
PathAttribute { name: "z"; value: 50 }
PathAttribute { name: "angle"; value: 70 }
PathAttribute { name: "iconScale"; value: 0.85 }
PathLine { x: scroll.width /2; y: scroll.height/2; }
PathAttribute { name: "z"; value: 100 }
PathAttribute { name: "angle"; value: 0 }
PathAttribute { name: "iconScale"; value: 1.0 }
PathLine { x: scroll.width /2; y: 3*(scroll.height/4); }
PathAttribute { name: "z"; value: 50 }
PathAttribute { name: "angle"; value: -70 }
PathAttribute { name: "iconScale"; value: 0.85 }
PathLine { x: scroll.width /2; y: scroll.height; }
PathAttribute { name: "z"; value: 0 }
PathAttribute { name: "angle"; value: -75 }
PathAttribute { name: "iconScale"; value: 0.85 }
}
}
}
Did you try with PathPercent? Take a look here:
http://qmlbook.github.io/en/ch06/index.html#the-pathview