[C++,QT/Qml]7.Qml프로그래밍Image추가하기3(이미지에 마우스 이벤트 주기 press,release)

[C++,QT/Qml]5.Qml프로그래밍Image추가하기3(이미지에 마우스 이벤트 주기 press,release)

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다.

 

오늘은 qml에 이미지를 추가후 press 및 release 이벤트를 주는 방법을 포스팅 하겠습니다.

 

press와 release를 실무에서 엄청 많이 쓰는 이벤트로 버튼 말고도 리스트를 push(press)했을때나 리스트를

 

release 했을때 많이 쓰는 속성입니다.

 

리스트를 push했을때 어떤 리스트가 push되었는지 파악하기 위해서 많이쓰는 표현으로 이글을 읽으시는 분들이

 

qml을 실무에 쓰게되면 무조건 쓰게되는 속성중에 하나 입니다.

 

 

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import "."
 
Window {
    property bool mbImageClicked : true
    property int mCount : 0
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Image
    {
        id:testImage
        x:0
        y:0
        width:100
        height:100
        source:"./image/icons8-pause-button-96.png"
        MouseArea{
            anchors.fill: parent
            onReleased: {
                if(!mbImageClicked){
                     console.log("onReleased!!! mbImageClicked == false")
                     mbImageClicked = true;
                     testImage.source = "./image/icons8-pause-button-96.png"
                     testCount.text = "onReleased!!";
                 }
            }
            onPressed:{
                if(mbImageClicked){
                    console.log("onPressed!!! mbImageClicked == true")
                    mbImageClicked = false;
                    testImage.source = "./image/icons8-circled-play-96.png"
                    testCount.text = "onPressed!!";
                }
            }
        }
    }
    Text
    {
        id:testCount
        anchors.left:testImage.right
        anchors.leftMargin: 30
        text:"Mouse state"
        font.pixelSize: 80
        font.bold: true
    }
 
    CustomText
    {
        id:customtext1
        rTextGeometry: Qt.rect(0,150,300,100)
        text:"cutom text1"
    }
    CustomText
    {
        id:customtext2
        rTextGeometry: Qt.rect(0,300,300,100)
        text:"cutom text2"
        bold:false
    }
}
 
 
 

위의 예제를 보시면 pressed와 Released 이벤트에 이미지가 가뀌면서 텍스트도 같이 바뀌게되는 예제 입니다.

 

마우스를 클릭을 유지하면 pressed가 되고 마우스 push에서 손을 떼면 Released가 되어서 이미지와

 

텍스트가 바뀌게 됩니다.

 

여기까지 이미지에 mous이벤트를 주는 방법을 설명 드렸렸는데요 이번 예제에서는 qml Button이라는 속성을 써서

 

위 예제와 같은 로직을 구현해 보도록 하겠습니다.

 

이미지를 이용한 방법 말고도 버튼이라는 타입을 이용하는 것도 있으니 참고로 봐주시면 좋습니다. 

 

Button 타입을 이용해서 클릭 이벤트 구현 하기

 

 

import QtQuick 2.9
import QtQuick.Controls 2.0 //button 의 background를 사용하기 위해 import시켜준다.
import QtQuick.Window 2.2
import "."
 
Window {
    property bool mbImageClicked : true
    property int mCount : 0
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Button
    {
        id:testButton
        x:0
        y:0
        width:100
        height:100
 
        background: Image
        {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            source: mbImageClicked ? "./image/icons8-circled-play-96.png" : "./image/icons8-pause-button-96.png"; //3항 연산자
        }
 
 
        onClicked: {
            if(mbImageClicked){
                console.log("onClicked!!! mbImageClicked == true")
                mCount++;
                mbImageClicked = false;
                testCount.text = "click count:" + mCount;
            }else{
                console.log("onClicked!!! mbImageClicked == false")
                mCount++;
                mbImageClicked = true;
                testCount.text = "click count:" + mCount;
            }
        }
 
    }
    Text
    {
        id:testCount
        anchors.left:testButton.right
        anchors.leftMargin: 30
        text:"click count:"
        font.pixelSize: 80
        font.bold: true
    }
 
    CustomText
    {
        id:customtext1
        rTextGeometry: Qt.rect(0,150,300,100)
        text:"cutom text1"
    }
    CustomText
    {
        id:customtext2
        rTextGeometry: Qt.rect(0,300,300,100)
        text:"cutom text2"
        bold:false
    }
}
 
 
 

 

 

위 예제를 보시면 이미지를 쓰는것 대신에 Button을 사용 하고 있다. 

 

Button의 배경화면은 Background속성에 image객체를 넣어서 이미지를 출력해주고 있고 

 

click이벤트가 발생했을때 mbImageClicked  전역 변수가 바뀌면서 이미지가 바뀝니다.

 

중간에 3항 연산자를 표현하는 곳에서 mbImageClicked  값에 따라 이미지가 바뀝니다.

 

3항 연산자란 위예제를 예로들면 mbImageClicked ? A : B 즉 mbImageClicked  가 true이면 A고

 

mbImageClicked 가 false이면 B를 표현해 주는것 입니다.

 

3항 연산자는 많이 쓰는 문법으로 꼭 알아두시면 좋습니다.

 

여기 까지 qml에서 이미지를 출력하고 그 이미지에 마우스 이벤트를 주는 방법에 대해 알아보았습니다.

 

다음 시간에는 화면을 이동시키는 stackView를 사용하는 방법에 대해 포스팅 하겠습니다.

 

감사합니다.