QML Coverflow非常慢

时间:2016-05-31 12:50:14

标签: c++ qt qml

我想为非触摸应用程序实现CoverFlow。就像是: https://www.youtube.com/watch?v=0MT58xIzp5c

我掌握了基础知识但有两个问题:

  1. 与轻弹相比,使用鼠标滚轮非常慢,特别是如果我滚动得非常快。如何让incrementCurrentIndex()decrementCurrentIndex()函数与轻弹一样快?
  2. 当从一个项目滚动到下一个项目时,我可以看到白色背景一秒钟(项目不会同时移动)。有没有办法解决这个问题?
  3. 以下是我的代码的一个工作示例:

    import QtQuick 2.4
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 1280
        height: 800
        MouseArea {
            //the mouse events will be replaced with c++ events later
            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.48 }
                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.52 }
                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
                }
    
    
                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
                    }
                }
            }
        }
    }
    

    我想要实现的目标是控制来自c ++端的滚动(使用事件),并使其与使用鼠标轻弹一样快。

1 个答案:

答案 0 :(得分:2)

这是您的代码,(我希望)按预期工作:

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1280
    height: 800
    MouseArea {
        //the mouse events will be replaced with c++ events later
        anchors.fill: parent
        onWheel: {
            if (wheel.angleDelta.y < 0)
            {
                if (scrollViewAnimation.running) {
                    scrollViewAnimation.stop()
                    scrollViewAnimation.to--
                    scrollViewAnimation.start()
                }
                else {
                    scrollViewAnimation.to = Math.round(view.offset - 1)
                    scrollViewAnimation.start()
                }
            }
            else if (wheel.angleDelta.y > 0)
            {
                if (scrollViewAnimation.running) {
                    scrollViewAnimation.stop()
                    scrollViewAnimation.to++
                    scrollViewAnimation.start()
                }
                else {
                    scrollViewAnimation.to = Math.round(view.offset + 1)
                    scrollViewAnimation.start()
                }
            }
        }
    }

    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

        onDragStarted: {
            scrollViewAnimation.stop()
        }

        NumberAnimation on offset {
            id: scrollViewAnimation
            duration: 250
            easing.type: Easing.InOutQuad
        }

        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
            }


            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
                }
            }
        }
    }
}
  1. 滚动问题是函数PathView.incrementCurrentIndex()PathView.decrementCurrentIndex()仅将PathView移动到下一个元素。例如,你在索引1上,快速调用PathView.incrementCurrentIndex() 4次,结果就是你只移动到索引2而不是5.我做了Animation移动PathView(不确定)如果它正朝着正确的方向移动)。另请注意onDragStarted: { scrollViewAnimation.stop() }
  2. 要在滚动时摆脱空白,我只需将PathPercent { value: 0.48 }PathPercent { value: 0.52 }修改为PathPercent { value: 0.45 }PathPercent { value: 0.55 }