파이썬으로 구현한 그림판앱

이번에 만들어 본 예제는 Python + PyQt5 를 이용한 그림판 (Painter) 입니다.

주요 기능은

1. 직선, 곡선, 사각형, 원 그리기

2. 선색, 도형 내부 색 변경 가능

3. 지우개 기능

정도 입니다.

주석 포함 300라인이 채 안되는 코드로 최대한 간단히 구현해 보았습니다.

구글을 열심히 검색해봐도 파이썬+PyQt를 이용한 그림판 예제는 거의 없어 직접 만들어 보았습니다.

먼저 이 코드를 이해하기 위해 요구되는 배경 지식입니다.

1. Python 의 기본 자료형 (정수, 문자, 리스트)

2. Python 클래스의 이해 (클래스의 개념,  객체 변수, 함수, 상속)

3. PyQt5, 특히 Qt 클래스에 대한 사용법, 이해 정도 입니다. (가장 중요)

PyQt5 설치 및 소개글 링크


PyQt5는 C++의 크로스 플랫폼 프레임워크인 Qt를 파이썬에 사용가능하도록 만든 파이썬 패키지 입니다.

PyQt는 Riverbankcomputing 이라는 영국회사에서 만들었습니다.

Qt는 C++기반의 멋진 클래스들을 가진 GUI 프레임워크이며, GUI 이외에도 자료형, 네트워크, 3D, 등의 분야에 사용가능한 클래스를 제공해 줍니다.

아래 예제의 Q로 시작하는 모든 타입은 Qt에서 제공되는 클래스입니다.

앞으로 우리는 Qt에서 제공하는 클래스를 가져와 사용하는 방식으로 코드를 만들어 갈 계획입니다.

그럼 본론으로 들어가 보겠습니다.

그림판은 크게 2개의 클래스로 구성되어 있으며, 첫번째는 메인 윈도우 창을 구성하는 CWidget클래스, 두번째는 그림을 표시하는 CView 클래스 입니다.

그리고 클래스를 인스턴스화 시켜 동작하는 메인 함수의 형태로 코드는 구성되어 있습니다.

먼저, 아래는 그림판 전체 코드 입니다.

[전체 코드]

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

QApplication.setAttribute(Qt.AA_EnableHighDpiScaling, True)

class CWidget(QWidget): 

    def __init__(self):

        super().__init__()

        # 전체 폼 박스
        formbox = QHBoxLayout()
        self.setLayout(formbox)

        # 좌, 우 레이아웃박스
        left = QVBoxLayout()
        right = QVBoxLayout()

        # 그룹박스1 생성 및 좌 레이아웃 배치
        gb = QGroupBox('그리기 종류')        
        left.addWidget(gb)

        # 그룹박스1 에서 사용할 레이아웃
        box = QVBoxLayout()
        gb.setLayout(box)        

        # 그룹박스 1 의 라디오 버튼 배치
        text = ['line', 'Curve', 'Rectange', 'Ellipse']
        self.radiobtns = []

        for i in range(len(text)):
            self.radiobtns.append(QRadioButton(text[i], self))
            self.radiobtns[i].clicked.connect(self.radioClicked)
            box.addWidget(self.radiobtns[i])

        self.radiobtns[0].setChecked(True)
        self.drawType = 0
        
        # 그룹박스2
        gb = QGroupBox('펜 설정')        
        left.addWidget(gb)        

        grid = QGridLayout()      
        gb.setLayout(grid)        

        label = QLabel('선굵기')
        grid.addWidget(label, 0, 0)

        self.combo = QComboBox()
        grid.addWidget(self.combo, 0, 1)       

        for i in range(1, 21):
            self.combo.addItem(str(i))

        label = QLabel('선색상')
        grid.addWidget(label, 1,0)        
        
        self.pencolor = QColor(0,0,0)
        self.penbtn = QPushButton()        
        self.penbtn.setStyleSheet('background-color: rgb(0,0,0)')
        self.penbtn.clicked.connect(self.showColorDlg)
        grid.addWidget(self.penbtn,1, 1)
        

        # 그룹박스3
        gb = QGroupBox('붓 설정')        
        left.addWidget(gb)

        hbox = QHBoxLayout()
        gb.setLayout(hbox)

        label = QLabel('붓색상')
        hbox.addWidget(label)                

        self.brushcolor = QColor(255,255,255)
        self.brushbtn = QPushButton()        
        self.brushbtn.setStyleSheet('background-color: rgb(255,255,255)')
        self.brushbtn.clicked.connect(self.showColorDlg)
        hbox.addWidget(self.brushbtn)

        # 그룹박스4
        gb = QGroupBox('지우개')        
        left.addWidget(gb)

        hbox = QHBoxLayout()
        gb.setLayout(hbox)        
        
        self.checkbox  =QCheckBox('지우개 동작')
        self.checkbox.stateChanged.connect(self.checkClicked)
        hbox.addWidget(self.checkbox)

      
        left.addStretch(1)        
         
        # 우 레이아웃 박스에 그래픽 뷰 추가
        self.view = CView(self)       
        right.addWidget(self.view)        

        # 전체 폼박스에 좌우 박스 배치
        formbox.addLayout(left)
        formbox.addLayout(right)

        formbox.setStretchFactor(left, 0)
        formbox.setStretchFactor(right, 1)
        
        self.setGeometry(100, 100, 800, 500) 
        
    def radioClicked(self):
        for i in range(len(self.radiobtns)):
            if self.radiobtns[i].isChecked():
                self.drawType = i                
                break

    def checkClicked(self):
        pass
            
    def showColorDlg(self):       
        
        # 색상 대화상자 생성      
        color = QColorDialog.getColor()

        sender = self.sender()

        # 색상이 유효한 값이면 참, QFrame에 색 적용
        if sender == self.penbtn and color.isValid():           
            self.pencolor = color
            self.penbtn.setStyleSheet('background-color: {}'.format( color.name()))
        else:
            self.brushcolor = color
            self.brushbtn.setStyleSheet('background-color: {}'.format( color.name()))


        
# QGraphicsView display QGraphicsScene
class CView(QGraphicsView):
   
    def __init__(self, parent):

        super().__init__(parent)       
        self.scene = QGraphicsScene()        
        self.setScene(self.scene)

        self.items = []
        
        self.start = QPointF()
        self.end = QPointF()

        self.setRenderHint(QPainter.HighQualityAntialiasing)
       

    def moveEvent(self, e):
        rect = QRectF(self.rect())
        rect.adjust(0,0,-2,-2)

        self.scene.setSceneRect(rect)

    def mousePressEvent(self, e):

        if e.button() == Qt.LeftButton:
            # 시작점 저장
            self.start = e.pos()
            self.end = e.pos()        

    def mouseMoveEvent(self, e):  
        
        # e.buttons()는 정수형 값을 리턴, e.button()은 move시 Qt.Nobutton 리턴 
        if e.buttons() & Qt.LeftButton:           

            self.end = e.pos()

            if self.parent().checkbox.isChecked():
                pen = QPen(QColor(255,255,255), 10)
                path = QPainterPath()
                path.moveTo(self.start)
                path.lineTo(self.end)
                self.scene.addPath(path, pen)
                self.start = e.pos()
                return None

            pen = QPen(self.parent().pencolor, self.parent().combo.currentIndex())

            # 직선 그리기
            if self.parent().drawType == 0:
                
                # 장면에 그려진 이전 선을 제거            
                if len(self.items) > 0:
                    self.scene.removeItem(self.items[-1])
                    del(self.items[-1])                

                # 현재 선 추가
                line = QLineF(self.start.x(), self.start.y(), self.end.x(), self.end.y())                
                self.items.append(self.scene.addLine(line, pen))

            # 곡선 그리기
            if self.parent().drawType == 1:

                # Path 이용
                path = QPainterPath()
                path.moveTo(self.start)
                path.lineTo(self.end)
                self.scene.addPath(path, pen)

                # Line 이용
                #line = QLineF(self.start.x(), self.start.y(), self.end.x(), self.end.y())
                #self.scene.addLine(line, pen)
                
                # 시작점을 다시 기존 끝점으로
                self.start = e.pos()

            # 사각형 그리기
            if self.parent().drawType == 2:
                brush = QBrush(self.parent().brushcolor)

                if len(self.items) > 0:
                    self.scene.removeItem(self.items[-1])
                    del(self.items[-1])


                rect = QRectF(self.start, self.end)
                self.items.append(self.scene.addRect(rect, pen, brush))
                
            # 원 그리기
            if self.parent().drawType == 3:
                brush = QBrush(self.parent().brushcolor)

                if len(self.items) > 0:
                    self.scene.removeItem(self.items[-1])
                    del(self.items[-1])


                rect = QRectF(self.start, self.end)
                self.items.append(self.scene.addEllipse(rect, pen, brush))


    def mouseReleaseEvent(self, e):        

        if e.button() == Qt.LeftButton:

            if self.parent().checkbox.isChecked():
                return None

            pen = QPen(self.parent().pencolor, self.parent().combo.currentIndex())

            if self.parent().drawType == 0:

                self.items.clear()
                line = QLineF(self.start.x(), self.start.y(), self.end.x(), self.end.y())
                
                self.scene.addLine(line, pen)

            if self.parent().drawType == 2:

                brush = QBrush(self.parent().brushcolor)

                self.items.clear()
                rect = QRectF(self.start, self.end)
                self.scene.addRect(rect, pen, brush)

            if self.parent().drawType == 3:

                brush = QBrush(self.parent().brushcolor)

                self.items.clear()
                rect = QRectF(self.start, self.end)
                self.scene.addEllipse(rect, pen, brush)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = CWidget()
    w.show()
    sys.exit(app.exec_())

[CWidget 클래스]
먼저 기본 윈도우 창 및 컨트롤(라디오버튼, 체크 박스, 콤보박스 등)을 구성하는 CWidget 클래스 설명입니다.

[1~4번 라인]
sys 모듈과 PyQt5의 모듈을 불러오는 부분입니다.

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

[6번 라인]
제가 사용하는 모니터가 4K 해상도라 고해상도를 지원하는 설정 코드입니다.

QApplication.setAttribute(Qt.AA_EnableHighDpiScaling, True)

[8번 라인]
Qt의 QWidget (윈도우 창)에서 상속받은 나만의 클래스를 만드는 부분입니다.

class CWidget(QWidget):

[10번 라인]
제가 만든 CWidget 클래스의 생성자 함수 입니다.

def __init__(self):

        super().__init__()

먼저, CWidget의 생성자 함수에서 부모 클래스(QWidget)의 생성자를 super()를 통해 호출해 주고 있습니다.

[15~20번 라인]
그 다음은 컨트롤 배치를 위한 박스 레이아웃을 잡습니다.

# 전체 폼 박스
        formbox = QHBoxLayout()
        self.setLayout(formbox)

        # 좌, 우 레이아웃박스
        left = QVBoxLayout()
        right = QVBoxLayout()

붉은 색 테두리가 가장 바깥쪽 formbox (QHboxLayout 클래스) 변수이며, 좌, 우로 보이는 파란색 테두리 2개가 각각 left(컨트롤 배치용), right(그림그리기용) 로 각각 구성됩니다.

[22~40번 라인]
첫번째 그룹박스인 그리기 종류를 구성하는 부분입니다.

# 그룹박스1 생성 및 좌 레이아웃 배치
        gb = QGroupBox('그리기 종류')        
        left.addWidget(gb)

        # 그룹박스1 에서 사용할 레이아웃
        box = QVBoxLayout()
        gb.setLayout(box)        

        # 그룹박스 1 의 라디오 버튼 배치
        text = ['line', 'Curve', 'Rectange', 'Ellipse']
        self.radiobtns = []

        for i in range(len(text)):
            self.radiobtns.append(QRadioButton(text[i], self))
            self.radiobtns[i].clicked.connect(self.radioClicked)
            box.addWidget(self.radiobtns[i])

        self.radiobtns[0].setChecked(True)
        self.drawType = 0

사용되는 그룹박스를 만들고 라디오버튼(QRadioButton 클래스) 4개의 이름을 정한 후 for 반복문을 통해 수직 박스에 추가하는 코드입니다.

마지막 39번 라인은 기본 그리기 종류를 line으로 설정하고, 40라인에서 어떤 그리기 종류가 현재 선택되어 있는지 저장할 변수 drawType을 만들어 0(직선)으로 초기화 합니다.

[42~65번 라인]
두번째 그룹박스인 펜설정을 정하는 부분입니다.

# 그룹박스2
        gb = QGroupBox('펜 설정')        
        left.addWidget(gb)        

        grid = QGridLayout()      
        gb.setLayout(grid)        

        label = QLabel('선굵기')
        grid.addWidget(label, 0, 0)

        self.combo = QComboBox()
        grid.addWidget(self.combo, 0, 1)       

        for i in range(1, 21):
            self.combo.addItem(str(i))

        label = QLabel('선색상')
        grid.addWidget(label, 1,0)        
        
        self.pencolor = QColor(0,0,0)
        self.penbtn = QPushButton()        
        self.penbtn.setStyleSheet('background-color: rgb(0,0,0)')
        self.penbtn.clicked.connect(self.showColorDlg)
        grid.addWidget(self.penbtn,1, 1)

역시 사용되는 그룹박스를 만든 후, 그 이름을 펜설정으로 정하고 left라는 이름의 왼쪽 레이아웃 박스에 추가합니다.

이후, 선 굵기로 표시되는 라벨(QLabel 클래스)을 추가하고, 이에 1~20범위의 값을 가지는 콤보 박스(QComboBox 클래스)를 추가합니다.

58라인부터 선 색상으로 표시되는 라벨을 추가한 후 버튼(QPushButton 클래스) 의 배경색을 변경해 해당 버튼이 눌러지면 색상창을 열어서 색을 정한 후 다시 버튼을 색을 바꾸어 표시되는 방식으로 구현합니다.

64번라인은 선색상 버튼을 눌렀을 때 발생되는 signal을 showColorDlg 함수가 호출 되도록 slot으로 연결시키는 코드입니다.

[68~82번 라인]
세번째 그룹박스인 붓 색상 설정부분입니다.

# 그룹박스3
        gb = QGroupBox('붓 설정')        
        left.addWidget(gb)

        hbox = QHBoxLayout()
        gb.setLayout(hbox)

        label = QLabel('붓색상')
        hbox.addWidget(label)                

        self.brushcolor = QColor(255,255,255)
        self.brushbtn = QPushButton()        
        self.brushbtn.setStyleSheet('background-color: rgb(255,255,255)')
        self.brushbtn.clicked.connect(self.showColorDlg)
        hbox.addWidget(self.brushbtn)

위의 펜 설정과 유사한 부분이 많으므로 설명은 생략하겠습니다.

[84~96번 라인]
마지막 그룹박스인 지우개 설정입니다.

# 그룹박스4
        gb = QGroupBox('지우개')        
        left.addWidget(gb)

        hbox = QHBoxLayout()
        gb.setLayout(hbox)        
        
        self.checkbox  =QCheckBox('지우개 동작')
        self.checkbox.stateChanged.connect(self.checkClicked)
        hbox.addWidget(self.checkbox)

      
        left.addStretch(1)

역시 그룹박스를 left 레이아웃에 추가하고 체크박스(QCheckBox 클래스)를 추가하고, 이름은 지우개 동작으로 지었습니다.

체크여부를 판단해 차후 그림을 그릴 때 지우개 용도로 쓸 계획입니다.

96번 라인의 addStretch(1) 함수는 왼쪽 레이아웃 영역이 수직으로 모든 영역을 다 차지하는 것을 방지하기 위해 왼쪽 레이아웃에 여분의 레이아웃을 추가하는 코드입니다.

해당 라인의 맨 앞줄에 주석(#)처리를 해 보면 차이점을 바로 느낄 수 있습니다.

[98~100번 라인]
코드 실행 후 보이는 화면에서 붉은색 테두리로 표시한 흰색 그리기 영역을 잡아주는 부분입니다.

# 우 레이아웃 박스에 그래픽 뷰 추가
        self.view = CView(self)       
        right.addWidget(self.view)

이전까지 코드는 왼쪽에 보이는 영역에 컨트롤을 추가하는 작업이고, 현재 코드는 오른쪽 영역에 QGraphicsView에서 상속받은 CView라는 이름의 클래스를 추가하는 부분입니다.

이 클래스는 뒤에서 자세히 설명하도록 하겠습니다.

[102~109번 라인]
완성된 좌(컨트롤), 우(그림그리는곳) 측 레이아웃을 전체 formbox에 배치하는 코드입니다.

# 전체 폼박스에 좌우 박스 배치
        formbox.addLayout(left)
        formbox.addLayout(right)

        formbox.setStretchFactor(left, 0)
        formbox.setStretchFactor(right, 1)
        
        self.setGeometry(100, 100, 800, 500)

[111~115번 라인]
그룹박스 1번, 그리기 종류를 변경했을때 호출되는 CWidget 클래스의 멤버함수이며, 선택된 라디오 버튼의 번호를 알아내어 drawType 변수에 저장합니다.

    def radioClicked(self):
        for i in range(len(self.radiobtns)):
            if self.radiobtns[i].isChecked():
                self.drawType = i                
                break

drawType은 0번 실선, 1번 곡선, 2번 사각형, 3번 원 으로 지정하였습니다.

[117~118번 라인]
그룹박스 4번, 지우개를 체크했을때, 쓸려고 만들어 둔 함수인데, 그냥 체크 버튼의 상태값을 바로 읽어서 쓰는 형태라 별 필요는 없네요. (삭제해도 무관합니다)

    def checkClicked(self):
        pass

파이썬에서 뭔가 할일이 없을때는 pass를 적어두면 들여쓰기 문법 오류를 방지합니다.

[120~133번 라인]
선 또는 붓 색을 변경할때 호출되는 함수이며, 선색인지 붓색인지 구분하기 위해 시그널을 보낸 sender를 찾아 구분하는 코드로 구성되어 있습니다.

def showColorDlg(self):       
        
        # 색상 대화상자 생성      
        color = QColorDialog.getColor()

        sender = self.sender()

        # 색상이 유효한 값이면 참, QFrame에 색 적용
        if sender == self.penbtn and color.isValid():           
            self.pencolor = color
            self.penbtn.setStyleSheet('background-color: {}'.format( color.name()))
        else:
            self.brushcolor = color
            self.brushbtn.setStyleSheet('background-color: {}'.format( color.name()))

확인 후 색을 저장해 두고 버튼의 색을 바꾸는 방식입니다.

Qt의 QColorDialog 라는 공통 대화상자 클래스를 모달 방식(닫기전까지 블럭됨)으로 호출해 사용하는 형태입니다.

여기까지가 CWidget 클래스 코드이며, 요약하면 메인 윈도우를 생성해 Qt컨트롤들을 배치하는 역할을 담당합니다.


[CView 클래스]

실제 그림이 그려지는 역할을 담당하는 클래스이며, 아래 그림의 오른쪽 흰색 부분에 해당합니다.

class CView(QGraphicsView):

Qt의 QGraphicsView 클래스를 상속받아 구현되어 있습니다.


[140~151번 라인]
QGraphicsView의 생성자 함수이며, 이 클래스는 QGraphicsScene클래스에 그려진 그래픽 아이템들(직선, 곡선, 사각형, 원 등)을 화면에 표시하는 역할을 담당합니다.

def __init__(self, parent):

        super().__init__(parent)       
        self.scene = QGraphicsScene()        
        self.setScene(self.scene)

        self.items = []
        
        self.start = QPointF()
        self.end = QPointF()

        self.setRenderHint(QPainter.HighQualityAntialiasing)

QGraphicsScene는 실제 눈에 보이지 않지만 실제 그래픽 아이템들(QGraphicsItem)을 포함하고, 관리하는 클래스 입니다.

쉽게 설명하자면, QGraphicsView는 화면에 그림을 그리는 역할, QGraphicsScene은 그려지는 요소들을 관리하는 역할, QGraphicsItem은 하나의 그래픽 요소(선, 곡선 등) 입니다.

여기서 그래픽 씬 변수을 만들고, 그래픽 씬이 가지는 그래픽 아이템들을 저장할 리스트를 선언합니다.

또한, 시작점 좌표와 끝점 좌표를 저장할 변수(QPointF 클래스) 도 선언합니다.

[154~158번 라인]
QGraphicScene의 크기를 좌, 우 스크롤바가 나타나지 않도록 2픽셀 작게 조정하는 부분입니다.

def moveEvent(self, e):
        rect = QRectF(self.rect())
        rect.adjust(0,0,-2,-2)

        self.scene.setSceneRect(rect)

[160~165번 라인]
마우스 클릭시 호출되는 함수이며, 마우스 좌클릭시 시작점, 끝점 좌표를 저장합니다.

def mousePressEvent(self, e):

        if e.button() == Qt.LeftButton:
            # 시작점 저장
            self.start = e.pos()
            self.end = e.pos() 

[167~235번 라인]
마우스 이동 시 호출되는 함수이며, 실제 마우스 이동시 그림이 그려지므로 그리기에 대한 대부분의 처리가 이곳에 집중되어 있습니다.

def mouseMoveEvent(self, e):  
        
        # e.buttons()는 정수형 값을 리턴, e.button()은 move시 Qt.Nobutton 리턴 
        if e.buttons() & Qt.LeftButton:           

            self.end = e.pos()

            if self.parent().checkbox.isChecked():
                pen = QPen(QColor(255,255,255), 10)
                path = QPainterPath()
                path.moveTo(self.start)
                path.lineTo(self.end)
                self.scene.addPath(path, pen)
                self.start = e.pos()
                return None

            pen = QPen(self.parent().pencolor, self.parent().combo.currentIndex())

            # 직선 그리기
            if self.parent().drawType == 0:
                
                # 장면에 그려진 이전 선을 제거            
                if len(self.items) > 0:
                    self.scene.removeItem(self.items[-1])
                    del(self.items[-1])                

                # 현재 선 추가
                line = QLineF(self.start.x(), self.start.y(), self.end.x(), self.end.y())                
                self.items.append(self.scene.addLine(line, pen))

            # 곡선 그리기
            if self.parent().drawType == 1:

                # Path 이용
                path = QPainterPath()
                path.moveTo(self.start)
                path.lineTo(self.end)
                self.scene.addPath(path, pen)

                # Line 이용
                #line = QLineF(self.start.x(), self.start.y(), self.end.x(), self.end.y())
                #self.scene.addLine(line, pen)
                
                # 시작점을 다시 기존 끝점으로
                self.start = e.pos()

            # 사각형 그리기
            if self.parent().drawType == 2:
                brush = QBrush(self.parent().brushcolor)

                if len(self.items) > 0:
                    self.scene.removeItem(self.items[-1])
                    del(self.items[-1])


                rect = QRectF(self.start, self.end)
                self.items.append(self.scene.addRect(rect, pen, brush))
                
            # 원 그리기
            if self.parent().drawType == 3:
                brush = QBrush(self.parent().brushcolor)

                if len(self.items) > 0:
                    self.scene.removeItem(self.items[-1])
                    del(self.items[-1])


                rect = QRectF(self.start, self.end)
                self.items.append(self.scene.addEllipse(rect, pen, brush))

174~181번 라인은 지우개 체크 버튼이 체크되어 있을때 배경과 같은 흰색 펜을 만들어 곡선을 그려 지우개 처럼 동작하도록 하는 코드입니다.

지우개 모드인 경우 흰선을 그리고 바로 리턴해 아래에 위치한 다른 그리기 코드들이 수행되지 않도록 해야 합니다.

183번 라인은 현재 설정된 두께와 색을 가져와 펜을 만드는 부분입니다.

186~195번 라인은 만약 그리기 설정이 0번, 즉 직선인 경우 마우스가 이동하면, 시작점 좌표는 변하지 않고, 끝점인 현재의 마우스 좌표를 기준으로 선을 그리는 코드입니다.

 다만, 마우스 이동시 마다 기존에 그려진 선(이전 마우스 이동시 그려놓았던)을 지우는 작업을, 현재 선을 그리기 전에 해주어야 합니다.

self.items[-1] 리스트의 마지막 그려진 선을 찾아와 삭제하는 것이죠.

198~211번 라인은 만약 그리기 설정이 1번, 즉 곡선인 경우 마우스가 이동하면, 현재의 시작점을 기준으로, 끝점인 현재의 마우스 좌표를 기준으로 짧은 직선을 그리는 코드입니다.

사실 곡선은 짧은 직선의 연속이기 때문에, 여기서는 직선처럼 이전 그려진 선을 지울 필요가 없습니다.

다만, 짧은 직선을 그린 후, 다음 마우스 이동시 시작점이 현재의 끝점으로 변경하는 코드가 211번 라인에 구현되어 있습니다.

213~223번 라인은 만약 그리기 설정이 2번, 즉 사각형인 경우 마우스가 이동하면, 현재의 시작점을 사각형의 왼쪽 윗점으로 정하고, 끝점을 사각형의 오른쪽 아래점으로 설정해 사각형을 그리는 코드입니다.

실제 사각형은 왼쪽 윗점의 좌표와 오른쪽 아래점의 좌표 2개만 알아도 그려낼 수 있습니다.

다만, 마우스 이동시 마다 직선 그리기와 마찬가지로 기존에 그려진 마지막 사각형을 찾아 삭제하고, 현재의 사각형을 새로 그리는 방식으로 구성되어 있습니다.

225~235번 라인의 원그리기는 사각형 그리기와 동일합니다.

차이가 있다면, QGraphicsScene 클래스가 제공하는 사각형 그리는 함수는 addRect() 이고, 원은 addEllipse() 라는 부분외에는 동일합니다.

왜냐하면 Qt에서 원을 그리는 방법은 사각형 영역을 설정하고 그 사각형에 내접하는 원을 그려내는 방식으로 구현되어 있기 때문입니다.

[238~268번 라인]
마우스 클릭을 해제했을때 호출되는 함수입니다.

def mouseReleaseEvent(self, e):        

        if e.button() == Qt.LeftButton:

            if self.parent().checkbox.isChecked():
                return None

            pen = QPen(self.parent().pencolor, self.parent().combo.currentIndex())

            if self.parent().drawType == 0:

                self.items.clear()
                line = QLineF(self.start.x(), self.start.y(), self.end.x(), self.end.y())
                
                self.scene.addLine(line, pen)

            if self.parent().drawType == 2:

                brush = QBrush(self.parent().brushcolor)

                self.items.clear()
                rect = QRectF(self.start, self.end)
                self.scene.addRect(rect, pen, brush)

            if self.parent().drawType == 3:

                brush = QBrush(self.parent().brushcolor)

                self.items.clear()
                rect = QRectF(self.start, self.end)
                self.scene.addEllipse(rect, pen, brush)

242~243번 라인은 지우개 모드인 경우, 바로 리턴해서 다음 그리기 동작이 일어나지 않도록 해 두었습니다.

마우스 클릭 해지시 하는 행동은 곡선을 제외한 그리기 모드에서 최종적으로 마우스를 클릭 해지시 완성된 그림을 그리는 방식입니다.

곡선의 경우는 마우스를 움직일 때마다 짧은 선을 이어 붙여 곡선을 그려가므로, 굳이 마우스 클릭 해지 시 새로 그릴 필요는 없습니다.

다만, 직선이나, 사각형, 원의 경우는 클릭 해지 시 기존에 그려진 것들을 삭제하고 최종적으로 다시 한번 그려지는 방식으로 구현하였습니다.

즉, 마우스 이동시에는 그리는 과정을 눈으로 보여주기 위한 중간 단계였다면, 마우스 클릭해지는 마지막 단계인 셈이죠.


[메인 함수]
실제 프로그램의 시작점 입니다.

if __name__ == '__main__':
    app = QApplication(sys.argv)
    w = CWidget()
    w.show()
    sys.exit(app.exec_())

클래스에 대부분의 코드가 있으므로 메인에는 앱을 만들고 클래스를 생성하는 행동이 전부입니다.

[271~275번 라인]
모듈 형태로 불려져 실행되는 것을 막기 위해 파이썬에서는 __name__이 __main__인지 비교하는 방식을 많이 사용합니다.

QApplication을 현재의 파이썬 코드 파일(sys.argv 사용) 로 설정해 만든 후, CWidget 클래스의 객체(변수)인 w를 생성합니다.

show()함수를 통해 윈도우 창을 띄운 후, 앱을 실행시키는 방식입니다.

마지막으로 pyinstaller 로 제작한 실행파일 링크 입니다.

링크 : 그림판 실행파일


궁금한 점은 댓글이나 문의 주시면 좀 더 자세히 설명드리도록 하겠습니다.

• 개발 환경

1. 운영체제 : MS Windows 10 Pro
2. 개발 언어 : Python 3.7 (32bit), PyQt5 (5.11.3)
3. 개발 도구 : MS Visual Studio 2017 Pro

감사합니다.