How can i make the carousel scale

rafael

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
          }
        }
}
}

Eddy

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

rafael

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.