【问题标题】:A ball rotating inside a rectangle, a QML project一个在矩形内旋转的球,一个 QML 项目
【发布时间】:2017-12-10 07:51:49
【问题描述】:

我在 QML 项目中的 Rectangle 内有一个球动画,如下所示,我希望当它碰到 Rectangle 的边界时,它会返回内部,直到碰到另一个边界,然后再返回,依此类推。

我为此编写了这段代码,但不知道使用什么代码让球在击中边界时返回!
你能帮帮我吗?

ma​​in.qml:

import QtQuick 2.6
import QtQuick.Window 2.2

 Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Ball_in_Room")

    Rectangle {
        id: root
        width: 700; height: 500
        border.width: 10
        border.color: "gray"
        color: "moccasin"
        property real xPos: root.width
        property real yPos: Math.random() * root.height

        Ball { id: ball }

        ParallelAnimation {
           id: anim
               NumberAnimation {
                        target: ball
                        properties: "x"
                        to: root.xPos
                        duration: 1000
                        easing.type: Easing.Linear
                    }
               NumberAnimation {
                        target: ball
                        properties: "y"
                        to: root.yPos
                        duration: 1000
                        easing.type: Easing.Linear
                    }
        }

         MouseArea {
             anchors.fill: ball
             onClicked: anim.start()
         }
       }
     }

Ball.qml:

import QtQuick 2.8

Rectangle {
    width: 20; height: 20
    x: 250; y: 250
    color: "blue"
    radius: width/2
}

【问题讨论】:

  • “返回”是什么意思?你想在这里实现反射效果吗?我认为这个问题与 QML 无关。我不只是计算,你只需要实现一些已知的算法来获得正确的方向和碰撞检测。顺便说一句,您为什么不直接获得一些 2D 引擎而不是自己实现呢?看看qml-box2d Box2D QML 插件。
  • 谢谢。 (+1)。是的,我的意思是反思。考虑一下你在一个房间里,用你的脚射球。它朝房间的墙壁移动,然后反射回来并撞到房间的另一面墙壁,然后再次发生,直到球停止。我的意思是如何让球触到人墙并反弹等等。我想解决这个练习。

标签: animation qml qtquick2 qtquickcontrols2


【解决方案1】:

弹跳球的非常简单的实现:

Rectangle {
    id: container
    anchors.fill: parent
    border.color: "orange"
    border.width: 3

    Rectangle {
        id: ball
        property double xincrement: Math.random() + 0.5
        property double yincrement: Math.random() + 0.5
        width: 50
        height: width
        radius: width / 2
        color: "lightgreen"
        x: 300
        y: 300

        Timer {
            interval: 1
            repeat: true
            running: true
            onTriggered: {
                ball.x = ball.x + (ball.xincrement * 2.0);
                ball.y = ball.y + (ball.yincrement * 2.0);
                if(ball.x <= 0 || ball.x + ball.width >= container.width)
                    ball.xincrement *= (-1);
                if(ball.y <= 0 || ball.y + ball.height >= container.height)
                    ball.yincrement *= (-1);
            }
        }

    }
}

【讨论】:

  • 感谢您的回答。我可能有更多问题要问您,如果可能,请继续指导我。
  • 我的问题是关于 timer 正文中的最后一个 if 。当 ball.y 时,表示球正在接触容器的顶部,因此我们将 ball.yincrement 乘以 -1 使其为负数。那是减少球的y坐标。但是为什么在这种情况下球仍然向下移动(“增加” y 坐标)!?
  • 正如我所说,这是非常简单的实现,可能会忽略一些特定情况。如果您的目标当然不是​​自己发明,我仍然建议您使用一些 2D 引擎。
  • 我需要这样完成这个游戏。我不了解 2D 游戏引擎,但这个简单的游戏对我来说就像是一个练习。如果可能,请告诉我为什么当 ball.y 为零时,减小其 y 坐标会使其向下移动!?它应该使它在逻辑上向上移动。
  • 好吧,我猜你做到了。无论如何,您可以使用调试器对其进行检查。对我来说,这段代码运行良好,也许你的用例不同。
猜你喜欢
  • 2018-12-06
  • 2021-10-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多