PyQt点击图片不同部分有各自的功能

Question

我正在为我的摩托车创建一个车间手册，我的计划是让主要 window 显示自行车的绘制图像（参见下面的示例，图片来自 google），我将能够单击自行车的某些部分。比方说我想查看有关引擎的信息，我可以单击引擎，它会打开。

我应该为每个部分创建一个透明背景的图像并将它们放在软件中的正确位置吗？如果是这样，我如何通过“忽略”背景使它们可点击，以便只有可见部分可点击？

Answer 1

这是我对@ekhumoro

建议的方法进行编码的结果

import sys
from PySide2.QtWidgets import QWidget, QVBoxLayout, QApplication, QLabel
from PySide2.QtGui import QPixmap, QPolygon
from PySide2.QtCore import QPoint
from PySide2.QtCore import Qt as Qt

class TextEditDemo(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.setWindowTitle("Motorbike Workshop")
        
        # create the image
        self.bike_img = QPixmap("bike.jpg")
        self.pixmap_label = QLabel()
        self.pixmap_label.setPixmap(self.bike_img)

        # connect the mouse press event on the image to the img_click function
        self.pixmap_label.mousePressEvent = self.img_click

        # create the polygons
        first_polygon = QPolygon() << QPoint(0, 0) << QPoint(10, 0) << QPoint(10, 10) << QPoint(0, 10)
        second_polygon = QPolygon() << QPoint(20, 20) << QPoint(30, 20) << QPoint(30, 30) << QPoint(20, 30)

        # create a dictionary containing the name of the area, the polygon and the function to be called when
        # the polygon is clicked
        self.clickable_areas = {
            "first": {
                "polygon": first_polygon,
                "func": self.func1
            },
            "second": {
                "polygon": second_polygon,
                "func": self.func2
            }
        }

        layout = QVBoxLayout()
        layout.addWidget(self.pixmap_label)
        self.setLayout(layout)


    def img_click(self, event):
        # get the position of the click
        pos = event.pos()

        # iterate over all polygons
        for area in self.clickable_areas:
            # if the point is inside one of the polygons, call the function associated with that polygon
            if self.clickable_areas[area]["polygon"].containsPoint(pos, Qt.FillRule.OddEvenFill):
                self.clickable_areas[area]["func"]()
                return
            self.func3()


    # the functions to be called when specific polygons are clicked
    def func1(self):
        print("first polygon clicked!")

    def func2(self):
        print("second polygon clicked!")

    def func3(self):
        print("no polygon was clicked")



def main():
    app = QApplication(sys.argv)
    win = TextEditDemo()
    win.show()

    sys.exit(app.exec_())

if __name__ == "__main__":
    main()

解释:

self.clickable_areas是一个字典，包含所有可以点击的多边形及其各自的功能。每次单击图像时，都会保存单击图像的位置。然后我们遍历每个多边形并使用 containsPoint 来检查该位置是否在多边形内部。如果是这种情况，则调用多边形的相应函数。

为此，您必须手动定义所有应该触发功能的多边形。为此，我建议使用您选择的图像编辑器来创建多边形，然后将这些点复制到您的代码中。

参考资料： QPolygon QPoint

PyQt点击图片不同部分有各自的功能

PyQt click different parts of the image to have their own functions

python

pyqt

pyqt5