नोड इंटरफ़ेस बनाने के लिए WxPython का उपयोग करने का एक उदाहरण। भाग 5: नोड कनेक्ट करें

धीरे-धीरे लेकिन निश्चित रूप से, मैं WxPython पर ट्यूटोरियल की एक श्रृंखला करना जारी रखता हूं, जहां मैं खरोंच से नोड इंटरफ़ेस बनाने और कुछ पूरी तरह कार्यात्मक और काम करने के लिए एक रूपरेखा विकसित करने पर विचार करना चाहता हूं। पिछले भागों में यह पहले ही बताया जा चुका है कि नोड्स को कैसे जोड़ा जाता है, उसी भाग में, हम उन्हें कनेक्ट करेंगे, और यह चित्र उस परिणाम को दिखाता है जो हमें इस लेख में मिलेगा:

अभी भी सही नहीं है, लेकिन कुछ काफी उपयोगी और काम पहले से ही कर रहे हैं।

पिछले भाग यहां रहते हैं:
भाग 1: ड्रा करना सीखना
भाग 2: माउस ईवेंट्स को हैंडल करना
भाग 3: सुविधाओं + कीबोर्ड प्रसंस्करण को जोड़ने के लिए जारी है
भाग 4: ड्रैग एंड ड्रॉप को लागू करना
भाग 5: नोड कनेक्ट करें

13. सरलतम कनेक्शन बनाएं

नोड कनेक्शन की खोज में, हम एक प्रमुख घटक, एक कनेक्शन वर्ग के साथ शुरू करेंगे, जो अपने सरलतम रूप में इस तरह दिखता है:

class Connection(CanvasObject): def __init__(self, source, destination, **kwargs): super(Connection, self).__init__(**kwargs) self.source = source self.destination = destination def Render(self, gc): gc.SetPen(wx.Pen('#000000', 1, wx.SOLID)) gc.DrawLines([self.source.position, self.destination.position]) def RenderHighlighting(self, gc): return def ReturnObjectUnderCursor(self, pos): return None 

सब कुछ सरल और तुच्छ है, हमारे पास शुरुआती और समाप्त होने वाली वस्तुएं हैं और हम सिर्फ इन वस्तुओं की स्थिति के बीच एक रेखा खींचते हैं। अन्य तरीकों के बजाय, स्टब्स अभी भी उपयोग में हैं।

अब हमें नोड्स को जोड़ने की प्रक्रिया को लागू करने की आवश्यकता है। उपयोगकर्ता इंटरफ़ेस सरल होगा: Shift पकड़ते समय, उपयोगकर्ता स्रोत नोड पर क्लिक करता है और अंतिम एक से कनेक्शन खींचता है। कार्यान्वयन के लिए, जब हम उस पर क्लिक करते हैं, तो हम स्रोत ऑब्जेक्ट को याद रखेंगे, निम्न कोड को "OnMouseLeftDown" में जोड़ देंगे:

  if evt.ShiftDown() and self._objectUnderCursor.connectableSource: self._connectionStartObject = self._objectUnderCursor 

जब आप बटन जारी करते हैं, तो हम यह भी जांचेंगे कि कर्सर के नीचे की वस्तु आने वाले कनेक्शन को स्वीकार कर सकती है और यदि सब ठीक है तो उन्हें कनेक्ट कर सकती है। ऐसा करने के लिए, "OnMouseLeftUp" की शुरुआत में हम उचित कोड जोड़ेंगे:

  if (self._connectionStartObject and self._objectUnderCursor and self._connectionStartObject != self._objectUnderCursor and self._objectUnderCursor.connectableDestination): self.ConnectNodes(self._connectionStartObject, self._objectUnderCursor) 

ConnectNodes विधि एक कनेक्शन बनाती है और इसे दोनों जुड़े नोड्स में पंजीकृत करती है:

  def ConnectNodes(self, source, destination): newConnection = Connection(source, destination) self._connectionStartObject.AddOutcomingConnection(newConnection) self._objectUnderCursor.AddIncomingConnection(newConnection) 

यह जुड़ा हुआ है नोड्स सिखाने के लिए बनी हुई है। ऐसा करने के लिए, हम एक उपयुक्त इंटरफ़ेस पेश करेंगे, न कि केवल एक के रूप में, बल्कि 3. "ConnectableObject" एक ऑब्जेक्ट के लिए एक सामान्य इंटरफ़ेस होगा जो किसी अन्य ऑब्जेक्ट से जोड़ा जा सकता है। इस मामले में, इसे एक कनेक्शन बिंदु और एक नोड केंद्र (थोड़ी देर बाद, हम इसका उपयोग करेंगे) प्रदान करने की आवश्यकता है।

 class ConnectableObject(CanvasObject): def __init__(self, **kwargs): super(ConnectableObject, self).__init__(**kwargs) def GetConnectionPortForTargetPoint(self, targetPoint): """ GetConnectionPortForTargetPoint method should return an end point position for a connection object. """ raise NotImplementedError() def GetCenter(self): """ GetCenter method should return a center of this object. It is used during a connection process as a preview of a future connection. """ raise NotImplementedError() 

आवक और जावक कनेक्शन के लिए उपयुक्त वस्तुओं के लिए हमें "ConnectableObject" से दो वर्ग भी प्राप्त होते हैं:

 class ConnectableDestination(ConnectableObject): def __init__(self, **kwargs): super(ConnectableDestination, self).__init__(**kwargs) self.connectableDestination = True self._incomingConnections = [] def AddIncomingConnection(self, connection): self._incomingConnections.append(connection) def DeleteIncomingConnection(self, connection): self._incomingConnections.remove(connection) class ConnectableSource(ConnectableObject): def __init__(self, **kwargs): super(ConnectableSource, self).__init__(**kwargs) self.connectableSource = True self._outcomingConnections = [] def AddOutcomingConnection(self, connection): self._outcomingConnections.append(connection) def DeleteOutcomingConnection(self, connection): self._outcomingConnections.remove(connection) def GetOutcomingConnections(self): return self._outcomingConnections 

ये दोनों कक्षाएं बहुत समान हैं और आपको क्रमशः आने वाले और बाहर जाने वाले कनेक्शनों की सूचियों को संग्रहीत करने की अनुमति देती हैं। इसके अलावा, वे उचित झंडे सेट करते हैं ताकि कैनवास को पता चले कि इस तरह के और इस तरह के ऑब्जेक्ट को जोड़ा जा सकता है।

अंतिम चरण शेष है: अपने माता-पिता के लिए उपयुक्त आधार वर्गों को जोड़कर हमारी नोड को थोड़ा संशोधित करें और प्रतिपादन प्रक्रिया को संशोधित करें। रेंडरिंग के साथ सब कुछ दिलचस्प है, आप कैनवास में नोड्स को स्टोर कर सकते हैं और उन्हें उसी स्थान पर रेंडर कर सकते हैं, या आप इस कार्य को नोड को सौंप सकते हैं और इसे आउटगोइंग कनेक्शन प्रदान कर सकते हैं। हम निम्नलिखित कोड को नोड रेंडरिंग कोड में जोड़कर ऐसा करेंगे:

  for connection in self.GetOutcomingConnections(): connection.Render(gc) 

इसलिए, यदि आप इस व्यवसाय को शुरू करते हैं और थोड़ा खेलते हैं, तो आप इस तरह से कुछ प्राप्त कर सकते हैं:

बहुत सुंदर नहीं, लेकिन पहले से ही कार्यशील :) कोड का वर्तमान संस्करण यहां रहता है ।

14. सुंदर तीर बनाना

नोड्स के कोनों को जोड़ने वाली रेखाएं परीक्षण के लिए अच्छी हैं, लेकिन बहुत सुंदर और सौंदर्यवादी रूप से प्रसन्न नहीं हैं। खैर, यह डरावना नहीं है, अब हम सुंदर और सौंदर्यपूर्ण तीर बनाएंगे। शुरू करने के लिए, हमें तीर खींचने की एक विधि की आवश्यकता होगी, जिसे मैंने जल्दी से स्कूल ज्यामिति को याद करते हुए और NumPy का उपयोग करते हुए लिखा था:

  def RenderArrow(self, gc, sourcePoint, destinationPoint): gc.DrawLines([sourcePoint, destinationPoint]) #Draw arrow p0 = np.array(sourcePoint) p1 = np.array(destinationPoint) dp = p0-p1 l = np.linalg.norm(dp) dp = dp / l n = np.array([-dp[1], dp[0]]) neck = p1 + self.arrowLength*dp lp = neck + n*self.arrowWidth rp = neck - n*self.arrowWidth gc.DrawLines([lp, destinationPoint]) gc.DrawLines([rp, destinationPoint]) 

यहाँ हम तीर के अंत से शुरुआत तक "self.arrowLength" की गणना करते हैं और फिर सामान्य से दूरी के साथ दोनों दिशाओं में चलते हैं "self.arrowWidth"। इसलिए हम तीर के छोर को जोड़ने वाले खंडों के सिरों के बिंदुओं को पाते हैं ... मुझे नहीं पता कि इसे क्या कहते हैं, टिप के सिरों के साथ या कुछ और।
यह एरो ड्राइंग के साथ लाइन ड्राइंग को बदलने के लिए रेंडरिंग विधि में रहता है और निम्नलिखित चित्र पर विचार करना संभव होगा:

यहां कोड रहता है ।

15. हमें कनेक्शन के सिरों के सही बिंदु मिलते हैं

यह पहले से ही बेहतर लग रहा है, लेकिन अभी भी बहुत सुंदर नहीं है, क्योंकि तीर के छोर अस्पष्ट दिखाई देते हैं जहां। सबसे पहले, हम इसे और अधिक सार्वभौमिक बनाने के लिए अपने कनेक्शन के वर्ग को संशोधित करते हैं और कनेक्शन की शुरुआत और समाप्ति बिंदुओं की गणना करने के लिए तरीके जोड़ते हैं:

  def SourcePoint(self): return np.array(self.source.GetConnectionPortForTargetPoint(self.destination.GetCenter())) def DestinationPoint(self): return np.array(self.destination.GetConnectionPortForTargetPoint(self.source.GetCenter())) 

इस मामले में, हम प्रत्येक नोड को यह इंगित करने के लिए कहते हैं कि यह कनेक्शन शुरू करने के लायक कहां है, दूसरे छोर के रूप में विपरीत नोड के केंद्र को पारित करना। यह एक आदर्श और सबसे सार्वभौमिक तरीका नहीं है, लेकिन एक शुरुआत के लिए यह करेगा। कनेक्शन रेंडरिंग अब इस तरह दिखता है:

  def Render(self, gc): gc.SetPen(wx.Pen('#000000', 1, wx.SOLID)) self.RenderArrow(gc, self.SourcePoint(), self.DestinationPoint()) 

यह नोड पर GetConnectionPortForTargetPoint विधि को लागू करने के लिए बनी हुई है, जो उस नोड की सीमा पर बिंदु की गणना करेगा जहां कनेक्शन शुरू होना चाहिए। गोल कोनों के बिना एक आयत के लिए, आप निम्न विधि का उपयोग कर सकते हैं:

  def GetConnectionPortForTargetPoint(self, targetPoint): targetPoint = np.array(targetPoint) center = np.array(self.GetCenter()) direction = targetPoint - center if direction[0] > 0: #Check right border borderX = self.position[0] + self.boundingBoxDimensions[0] else: #Check left border borderX = self.position[0] if direction[0] == 0: t1 = float("inf") else: t1 = (borderX - center[0]) / direction[0] if direction[1] > 0: #Check bottom border borderY = self.position[1] + self.boundingBoxDimensions[1] else: #Check top border borderY = self.position[1] if direction[1] == 0: t2 = float("inf") else: t2 = (borderY - center[1]) / direction[1] t = min(t1, t2) boundaryPoint = center + t*direction return boundaryPoint 

यहां हम नोड के केंद्र से गंतव्य बिंदु और आयत के किनारों पर आने वाली किरण के बीच निकटतम चौराहा पाते हैं। इस तरह से यह बिंदु आयत की सीमा पर स्थित है, और सामान्य तौर पर, यह हमें सूट करता है। तो हम कुछ इस तरह प्राप्त कर सकते हैं:

या लेख के बहुत शुरुआत में चित्र के समान कुछ, जो एक पाठ नोड की कक्षाओं का एक पदानुक्रम है, जो पहले से ही काफी उपयोगी कुछ के करीब है।

यहां कोड रहता है ।

पुनश्च: टाइपो के बारे में एक व्यक्तिगत में लिखें।