Рисование линии в зависимости от ввода пользователя

Question

У меня есть следующая проблема, связанная с использованием PyQt5: я создал GUI с меткой (которая представляет собой png-карту со станциями, которые соединены синими и зелеными линиями), textEdit и pushButton в QtDesigner и PyQt5.

Теперь я хотел бы ввести число от 1 до 4 в textEdit. В зависимости от пользовательского ввода, части синей линии на прикрепленном изображении должны быть нарисованы красным.

Полагаю, пример объясняет это лучше: если пользовательский ввод в TextEdit равен 2 и нажата кнопка, синяя линия от S1 до S3 должна быть нарисована красным. Если пользовательский ввод в TextEdit равен 1 и кнопка нажимается снова, синяя линия от S1 до S2 должна быть нарисована красным, поэтому красная линия от S2 до S3 должна снова стать синей.

mapDrawer.py

from PyQt5 import uic
from PyQt5.QtWidgets import QLabel, QMainWindow, QApplication, QWidget, QVBoxLayout
from PyQt5.QtGui import QPixmap
import sys


class MainWindow(QMainWindow):

    def __init__(self):
        super(MainWindow, self).__init__()  # Call the inherited classes __init__ method
        uic.loadUi('DesignerGUI.ui', self)  # Load the .ui file
        self.setWindowTitle("GUI for user defined track drawing")

        pixmap = QPixmap('mapRail.png')
        self.pic_label.setPixmap(pixmap)
        self.pic_label.setScaledContents(True)

        self.show()  # Show the GUI


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec_())

---

Дизайнер GUI .ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>577</width>
    <height>347</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
       <spacer name="horizontalSpacer">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
        </property>
        <property name="sizeType">
         <enum>QSizePolicy::Fixed</enum>
        </property>
        <property name="sizeHint" stdset="0">
         <size>
          <width>5</width>
          <height>30</height>
         </size>
        </property>
       </spacer>
      </item>
      <item>
       <widget class="QLabel" name="label">
        <property name="sizePolicy">
         <sizepolicy hsizetype="Minimum" vsizetype="Fixed">
          <horstretch>0</horstretch>
          <verstretch>0</verstretch>
         </sizepolicy>
        </property>
        <property name="minimumSize">
         <size>
          <width>0</width>
          <height>30</height>
         </size>
        </property>
        <property name="font">
         <font>
          <pointsize>12</pointsize>
         </font>
        </property>
        <property name="text">
         <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;&lt;span style=&quot; color:#0055ff;&quot;&gt;Blue Line&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QTextEdit" name="textEdit">
        <property name="sizePolicy">
         <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
          <horstretch>0</horstretch>
          <verstretch>0</verstretch>
         </sizepolicy>
        </property>
        <property name="minimumSize">
         <size>
          <width>0</width>
          <height>0</height>
         </size>
        </property>
        <property name="maximumSize">
         <size>
          <width>11515151</width>
          <height>30</height>
         </size>
        </property>
        <property name="font">
         <font>
          <pointsize>12</pointsize>
         </font>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="pushButton">
        <property name="sizePolicy">
         <sizepolicy hsizetype="Expanding" vsizetype="Fixed">
          <horstretch>0</horstretch>
          <verstretch>0</verstretch>
         </sizepolicy>
        </property>
        <property name="minimumSize">
         <size>
          <width>0</width>
          <height>30</height>
         </size>
        </property>
        <property name="font">
         <font>
          <pointsize>12</pointsize>
         </font>
        </property>
        <property name="text">
         <string>PushButton</string>
        </property>
       </widget>
      </item>
      <item>
       <spacer name="horizontalSpacer_2">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
        </property>
        <property name="sizeType">
         <enum>QSizePolicy::Fixed</enum>
        </property>
        <property name="sizeHint" stdset="0">
         <size>
          <width>5</width>
          <height>30</height>
         </size>
        </property>
       </spacer>
      </item>
     </layout>
    </item>
    <item>
     <widget class="QLabel" name="pic_label">
      <property name="sizePolicy">
       <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
        <horstretch>0</horstretch>
        <verstretch>0</verstretch>
       </sizepolicy>
      </property>
      <property name="minimumSize">
       <size>
        <width>183</width>
        <height>50</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>1460</width>
        <height>400</height>
       </size>
      </property>
      <property name="text">
       <string>TextLabel</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>577</width>
     <height>21</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

Answer 1

Поскольку вы используете .png для отображения своей сети, вероятно, проще всего создать отдельные .png, по одному для каждой опции, и соответствующим образом изменить растровое изображение. Рассмотрим, например, следующие четыре изображения, которые я сохранил как "squares0.png" в "squares3.png".

Чтобы изменить отображаемое растровое изображение при нажатии кнопки, вы можете сделать что-то вроде

class MainWindow(QMainWindow):

    def __init__(self):
        super(MainWindow, self).__init__()  # Call the inherited classes __init__ method
        uic.loadUi('laser.ui', self)  # Load the .ui file
        self.setWindowTitle("GUI for user defined track drawing")
        self.pixmaps = {'1':'squares1.png', '2':'squares2.png', '3':'squares3.png'}
        self.default_pixmap = 'squares0.png'
        self.pic_label.setScaledContents(True)

        self.pushButton.clicked.connect(self.set_pixmap)
        self.set_pixmap()

        self.show()  # Show the GUI

    def set_pixmap(self, strng = ''):
        text = self.textEdit.toPlainText().strip()
        file = self.pixmaps.get(text, self.default_pixmap)
        pixmap = QPixmap(file)
        self.pic_label.setPixmap(pixmap)

Кстати, для более удобного использования вы можете использовать QSpinBox или QComboBox вместо QTextEdit для ввода чисел.