[QML] MouseArea / 마우스 이벤트

폴더 구조

├ ─QML/

│       ├ ─ qml/

│               └ view.qml

└ main.py

# main.py

import sys

from PySide6.QtCore import QUrl
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load(QUrl("qml/view.qml"))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec())

 

 

 

마우스가 이동시 사각형을 마우스 위치로 이동시키는 코드

 

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    
    property int rectX : 0
    property int rectY : 0

    Rectangle{
        id : rect
        x : rectX
        y : rectY
        width : 15
        height : 15
        color : "lightcoral"
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPositionChanged: {
            rectX = mouseX - rect.width/2
            rectY = mouseY - rect.height/2
        }
    }
}

 

마우스가 움직이면 빨간색 사각형도 따라오는것을 확인할수 있다.

 

 

마우스 클릭시 사각형을 마우스 위치로 이동

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    
    property int rectX : 0
    property int rectY : 0

    Rectangle{
        id : rect
        x : rectX
        y : rectY
        width : 15
        height : 15
        color : "lightcoral"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            rectX = mouseX - rect.width/2
            rectY = mouseY - rect.height/2
        }
    }
}

 

마우스 클릭시 메시지 출력

 

// view.qml

import QtQuick 2.9
import QtQuick.Controls 2.9

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    
    property int rectX : 0
    property int rectY : 0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("click ddatg !")
        }
    }
}