Unsolved How can i make the carousel scale
-
I'm trying to learn qml.
I would like to make the carousel scale as the window is resized.
How can i achieve this?// Carousel0.qml import QtQuick 2.1 Rectangle { id:root width: 1024 height: 768 Component { id: delegate Item { width: 50; height: 50 scale: PathView.iconScale opacity: PathView.iconOpacity z: PathView.iconOrder Image { anchors.fill: parent; source: modelData } MouseArea { anchors.fill: parent onClicked: { var component = Qt.createComponent("Carousel1.qml") var window = component.createObject(root,{"x":800, "y": 250}) //window.show() } } } } PathView { id: view anchors.fill: parent anchors.bottomMargin: 150 anchors.topMargin: 50 pathItemCount: 16 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(), "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 { id: p property real width: 720 property real height: 480 property real margin: 50 property real cx: width / 2 property real cy: height / 2 property real rx: width / 2 - margin property real ry: height / 2 - margin property real mx: rx * magic property real my: ry * magic property real magic: 0.551784 startX: p.cx; startY: p.cy + p.ry PathCubic { // second quadrant arc control1X: p.cx - p.mx; control1Y: p.cy + p.ry control2X: p.cx - p.rx; control2Y: p.cy + p.my x: p.cx - p.rx; y: p.cy } PathCubic { // third quadrant arc control1X: p.cx - p.rx; control1Y: p.cy - p.my control2X: p.cx - p.mx; control2Y: p.cy - p.ry x: p.cx; y: p.cy - p.ry } PathCubic { // forth quadrant arc control1X: p.cx + p.mx; control1Y: p.cy - p.ry control2X: p.cx + p.rx; control2Y: p.cy - p.my x: p.cx + p.rx; y: p.cy } PathCubic { // first quadrant arc control1X: p.cx + p.rx; control1Y: p.cy + p.my control2X: p.cx + p.mx; control2Y: p.cy + p.ry x: p.cx; y: p.cy + p.ry } } } }
-
Could you upload an image of your solution and pinpoint more exactly what you want to scale and what not?
There are 2 spots where you could use a formule instead of numbers
id: delegate Item { width: 50; height: 50
and
path: Path { id: p property real width: 720 property real height: 480
-
I am having some setup issues at home. the project will compile and run but nothing appears on screen for some reason. will get back once i can get an app running.