PyQt: Move an image around a canvas and save canvas image as PNG

Question

I am a beginner in PyQt and I am trying to create a canvas where I could place multiple PNG images and move it around the canvas. (Pretty much like the Photoshop/GIMP). May I have any pointers on how to realize these?

Dragging actual image from the list to place on canvas
Move images around the canvas
Save the whole canvas (including the images placed on the canvas) as a single PNG file with transparent background

Here is a diagram illustrating what I am trying to achieve: the green arrows are the drag actions and the images are free to move around the canvas upon selection.

https://i.imgur.com/ArjGHJl.png

I have tried to create the image list but I am not sure how to drag the image out. I would also like to know the correct way of implementating a canvas which allow image to place on it. I have tried QPainter but it seems irrelevant to the task i am trying to achieve.

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import * 
import sys
import os
from PIL import Image, ImageQt

class DragDropListWidget(QListWidget):
    def __init__(self):
        super().__init__()
        self.setAcceptDrops(True)
        self.setIconSize(QSize(72, 72))
        print(self.size())
        print(self.sizeHint())
        self.resize(self.sizeHint())

        folder_path = 'dummy_folder'
        list_files = self.get_img_list(folder_path)
        for file in list_files:
            in_path = os.path.join(folder_path, file)
            self.put_into_img_list(in_path)

    def put_into_img_list(self, path):
        picture = Image.open(path)
        picture.thumbnail((71, 71), Image.Resampling.LANCZOS)
        icon = QIcon(QPixmap.fromImage(ImageQt.ImageQt(picture)))
        item = QListWidgetItem(path, self)
        item.setStatusTip(path)
        item.setIcon(icon)

    def get_img_list(self, path):
        IMG_FORMATS = 'png', 'PNG'
        list_img = [img for img in os.listdir(path) if (img.split(".")[-1] in IMG_FORMATS) ==True]
        return list_img

class MyCanvas(QWidget):
    def __init__(self):
        super().__init__()
        # creating canvas
        self.image = QImage(self.size(), QImage.Format_ARGB32)
        self.image.fill(Qt.black)

# creating class for window
class Window(QMainWindow):
    def __init__(self):
        super().__init__()
        title = "Dummy GIMP"
        top = 0
        left = 0
        width = 800
        height = 450
        self.setWindowTitle(title)
        self.setGeometry(top, left, width, height)

        box = QHBoxLayout()
        self.canvas = MyCanvas()
        self.image_list = DragDropListWidget()
        wid = QFrame(self)
        self.setCentralWidget(wid)
        box.addWidget(self.image_list)
        box.addWidget(QPushButton("Save as PNG"))
        box.addWidget(self.canvas)
        wid.setLayout(box)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = Window()
    window.show()
    sys.exit(app.exec())

Code output: https://i.imgur.com/Fkt8Yjc.png

PyQt: Move an image around a canvas and save canvas image as PNG

0 Answers