[C++,QT/Qml]6.Qml프로그래밍Image추가하기2(이미지에 마우스 이벤트 주기 hover,onclick)

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

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

 

오늘은 지난 포스팅에서 추가한 이미지를 이용해서 클릭할때마다 이미지가 바뀌게끔 하는 로직을

 

적용 해보겠습니다.

 

이미지를 클릭할때마다 이미지가 바뀌게 하려면 이미지에다 마우스 클릭 이벤트를 주어야 합니다.

 

마우스 클릭 이벤트는 onclick,shortclick,longclick 등이 있습니다.

 

onClick의 일반적으로 클릭 했을때 발생하는 이벤트이고 shortclick은 짧게 클릭했을때 발생하는 이벤트고

 

longClick은 길게 클릭했을때 발생하는 이벤트 입니다.

 

이외에도 press,Release등도 있습니다.

 

press는 마우스를 클릭한 상태였을때 발생하고 Release를 클릭하고 마우스에 손을 떼었을때 발생하는 이벤트 입니다.

 

press나 Release는 이미지에 클릭 이벤트를 표현해주고 싶을때 많이 이용 합니다.

 

사용자가 버튼이 눌렸는지 안눌렸는지를 표현해주고 싶을때 주로 사용하는 방법으로 실무에서 아주 많이 쓰는

 

이벤트중에 하나 입니다.

 

 

 

1. 클릭했을때 이미지가 변하게하는 로직 적용

클릭전 이미지

클릭 후 이미지

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import "."
 
Window {
    property bool mbImageClicked : true //이미지 클릭여부를 체크할 전역변수
    property int mCount : 0 //이지리가 몇번 클릭되었는지 count를 체크하는 전역변수
    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 // 마우스 이벤트를 parent 측 이미지 전체 넓이에 적용 시킨다.
            onClicked:{
                if(mbImageClicked){
                    console.log("onclicked!!! mbImageClicked == true") //qml에서 로그를 찍는 코드
                    mCount++; //이미지가 클릭 될때마다 count가 올라간다.
                    mbImageClicked = false; //클릭 되는 순간 상태값이 바뀌면서 다음 클릭시 다른 이미지를 출력하게 해줌
                    testImage.source = "./image/icons8-circled-play-96.png"
                    testCount.text = "click count:" + mCount; //이미지를 클릭할때마다 카운트를 텍스트에 붙혀넣기한다.
                }else{
                    console.log("onclicked!!! mbImageClicked == false")
                    mCount++;
                    mbImageClicked = true;
                    testImage.source = "./image/icons8-pause-button-96.png"
                    testCount.text = "click count:" + mCount;
                }
            }
        }
    }
    Text
    {
        id:testCount
        anchors.left:testImage.right
        anchors.leftMargin: 30
        text:"click count:0"
        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
    }
}
 
 
 

 

 

위의 예제를 보겠습니다. 위의 예제는 재생 및 일시정지 이미지를 클릭하면 미지가 변하고 몇번 클릭했는지를

 

텍스트로 출력하는 예제 입니다.

 

위처럼 MouseArea라는는 타입을 써서 이 타입을 클릭 이벤트가 적용될 이미지의 전체 영역으로 잡아준 뒤에 

 

각 이벤트에 이미지가 바뀌는 로직가 클릭했을 때마다 클릭한 count를 텍스트로 보여주는 예제를 코딩한 내용 입니다.

 

각 이미지들은 상대 경로를 이용해서 적용을 하였습니다.

 

이번에는 마우스가 이미지의 클릭이아닌 위에 있을때 이미지가 바뀌는 예제를 보겠습니다.

 

구현하기에 앞서 MouseArea 타입의 설명 문서를 보겠습니다.

 

https://doc.qt.io/qt-5/qml-qtquick-mousearea.html

MouseArea QML Type | Qt Quick 5.12.3

위의 사이트를 가보시면 MouseArea의  hoverEnabled라는 속성이 있습니다. 이 속성을 보면 true로 해주면

 

onEntered, onExited 시그널을 받을수 있다고하네요 즉 이미지에 마우스를 가져가면 onEntered

 

이미지에서 마우스를 다른영역으로 옮기면 onExited 이벤트가 불려진다는 것입니다.

 

아래 예제를 보겠습니다.

 

이미지 hover이벤트 시작

 

이이미지 위에 마우스를 올렸을때

이미지밖 영역에 마우스를 옮겼을때

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
            hoverEnabled :true // hover 이벤트를 받기위해서 추가해준 속성
            onEntered: {
                if(mbImageClicked){   //hoverEnabled true로 해줌으로써 마우스가 MouseArea 위에있으면 불려지는 이벤트
                    console.log("onEntered!!! mbImageClicked == true")
                    mbImageClicked = false;
                    testImage.source = "./image/icons8-circled-play-96.png"
                    testCount.text = "onEntered!!";
                }
            }
            onExited: {
               if(!mbImageClicked){   //hoverEnabled true로 해줌으로써 마우스가 MouseArea 영역 위에서 밖으로 옮겨지면 불려지는 이벤트
                    console.log("onExited!!! mbImageClicked == false")
                    mbImageClicked = true;
                    testImage.source = "./image/icons8-pause-button-96.png"
                    testCount.text = "onExited!!";
                }
            }
        }
    }
    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
    }
}
 
 
 

위 예제를 보면 이미지위에 마우스를 갖다대면 onEntered가 불려져서 이미지가 바뀌는 동시에 텍스트도

 

onEntered로 바뀐다.

 

그리고 마우스를 갖다된상태에서 마우스를 이미지 영역 밖으로 이동시키면 onExited가 불려져서 이미지가

 

다른 이미지로 바뀌고 텍스트도도 onExited로 바뀌게 됩니다.

 

press이벤트와 release이벤트는 다음 포스팅에 말씀 드리겠습니다.

 

감사합니다.!!