What is the best way to draw graphic elements with QML?

Question

In my QML application, I need the common features of QGraphicsScene and QGraphicsObject, such as detecting conflicts, movable and selectable flags, drag and drop, etc. Should I inherit my classes from QQuickItem or use QML Canvas? Of course, I would like to write less code and choose the “QML path”.

Answer 1

You can use the Box 2D QML plugin to detect collisions in QML. It has many good features and can be downloaded from here .

You can also implement collision detection yourself. For example, by checking this:

Math.sqrt((ball1.x-ball2.x)*(ball1.x-ball2.x)+(ball1.y-ball2.y)*(ball1.y-ball2.y))<epsilon

To make the QML element movable, you can do something like:

Image {
    id: icon
    width: 64
    height: 64
    source: "liverbird.gif"

    MouseArea {
        id: liverbirdMouseArea
        anchors.fill: parent

        property variant iconObj
        property int startX
        property int startY

        onPressed: {
            startX = mouseX
            startY = mouseY
            var iconComp = Qt.createComponent("icon.qml");
            iconObj = iconComp.createObject(parent);
            iconObj.x = mouseX - iconObj.width/2
            iconObj.y = mouseY - iconObj.height/2
        }
        onPositionChanged: {
            iconObj.x += mouseX - startX
            iconObj.y += mouseY - startY
            startX = mouseX
            startY = mouseY
        }
        onReleased: {
            iconObj.destroy()
        }
    }
}