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

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

पिछले भाग में, मैंने कार्य के बारे में बात की और कार्यान्वयन प्रक्रिया, या वस्तुओं के प्रतिपादन का वर्णन करना शुरू किया। अब यह उपयोगकर्ता इंटरैक्शन को लागू करने का समय है।

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

कौन परवाह करता है, बिल्ली के नीचे आपका स्वागत है ...


आपको याद दिला दूं कि पिछली बार हमें एक सरल प्रोग्राम मिला था, जो कैनवास पर सरल नोड्स बनाता है (पाठ के साथ आयतें)। यह नोड्स को जंगम बनाने का समय है।

4. जब आप उन पर मंडराते हैं तो हाईलाइटिंग ऑब्जेक्ट

लेकिन नोड्स के आंदोलन को लागू करने से पहले, हम एक उपयोगी विशेषता बनाएंगे: किसी वस्तु को उजागर करना जब आप उस पर मंडराते हैं। बाकी कार्यक्षमता को लागू करते समय इस सुविधा के भाग बाद में काम आएंगे। कार्यान्वयन के लिए, हमें 3 कार्य करने होंगे:
1) ट्रैक कर्सर आंदोलन
2) कर्सर के नीचे सबसे ऊपरी ऑब्जेक्ट को ढूंढें और सहेजें
3) इस वस्तु का रेंडर चयन

कर्सर आंदोलन को ट्रैक करने के लिए, हमें कैनवास क्लास में संबंधित ईवेंट हैंडलर को जोड़ना होगा:

self.Bind(wx.EVT_MOTION, self.OnMouseMotion) 

अब, कर्सर को ले जाते समय, विधि को बुलाया जाएगा:

  def OnMouseMotion(self, evt): pos = self.CalcUnscrolledPosition(evt.GetPosition()).Get() self._objectUnderCursor = self.FindObjectUnderPoint(pos) self.Render() 

यहां तीन क्रियाएं होती हैं: चूंकि हमें विंडो के सापेक्ष कर्सर के निर्देशांक दिए जाते हैं, इसलिए हमें पहले उन्हें कैनवास के निर्देशांक में अनुवाद करने की आवश्यकता है (क्योंकि हमारे पास एक स्क्रॉल है), फिर हमें संबंधित वस्तु ढूंढनी होगी और छवि को अपडेट करना होगा ताकि उपयोगकर्ता जिस वस्तु को उजागर करता है वह कर्सर प्रकट हो सके । कर्सर के नीचे की वस्तुओं को खोजने की विधि है:

  def FindObjectUnderPoint(self, pos): #Check all objects on a canvas. Some objects may have multiple components and connections. for obj in reversed(self._canvasObjects): objUnderCursor = obj.ReturnObjectUnderCursor(pos) if objUnderCursor: return objUnderCursor return None 

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

  def ReturnObjectUnderCursor(self, pos): if pos[0] < self.position[0]: return None if pos[1] < self.position[1]: return None if pos[0] > self.position[0]+self.boundingBoxDimensions[0]: return None if pos[1] > self.position[1]+self.boundingBoxDimensions[1]: return None return self 

इसलिए, हम हमेशा यह जानते हैं कि कर्सर के नीचे कौन सी वस्तु है, यह किसी भी तरह इसे रेंडरिंग के दौरान सेलेक्ट करने के लिए रहता है, जिसे यह कोड रेंडरिंग के दौरान निष्पादित करेगा:

  if self._objectUnderCursor: gc.PushState() self._objectUnderCursor.RenderHighlighting(gc) gc.PopState() 

यह नोड को हाइलाइट करने के लिए कोड जोड़ने के लिए बना हुआ है:

  def RenderHighlighting(self, gc): gc.SetBrush(wx.Brush('#888888', wx.TRANSPARENT)) gc.SetPen(wx.Pen('#888888', 3, wx.DOT)) gc.DrawRectangle(self.position[0]-3, self.position[1]-3, self.boundingBoxDimensions[0]+6, self.boundingBoxDimensions[1]+6) 

यहां हम एक पारदर्शी ब्रश का उपयोग करते हैं ताकि जब हम प्रस्तुत करें जो पहले गाया गया था (यानी, नोड ही) ओवरराइट न करें।
परिणाम इस तस्वीर है:

इस तथ्य के बाद कर्सर को समाप्त करना पड़ा, इसलिए यह पारंपरिक नहीं है :)
मुझे यहां रुचि रखने वाले किसी भी व्यक्ति को सभी कोड नहीं दिए गए हैं, यह GitHub पर प्रतिबद्ध है।

5. छोटे रीफैक्टरिंग और इंटरफेस जोड़ना

और फिर, हम अपनी वस्तुओं को लंबे समय तक स्थानांतरित करने के कार्यान्वयन को स्थगित नहीं करेंगे, इस बार थोड़ा रिफैक्टिंग के लिए। चूंकि यह ढांचा सार्वभौमिक होना चाहिए, इसका मतलब है कि यहां नोड्स सभी प्रकार के अलग-अलग हो सकते हैं, जिसमें गैर-चल वाले भी शामिल हैं (उदाहरण के लिए, उन वस्तुओं के बीच संबंध जो स्वयं वस्तुओं या नोड के कुछ घटकों द्वारा परिभाषित होते हैं, और यह लोगों के लिए कुछ भी सोचने के लिए पर्याप्त नहीं है)। इसलिए हमें यह बताने की आवश्यकता है कि नोड्स के साथ क्या किया जा सकता है और क्या नहीं किया जा सकता है। वैसे भी, मैं नोड्स के लिए कुछ प्रकार के सार्वभौमिक इंटरफ़ेस को पेश करना चाहूंगा। सच है, अब के लिए हम abc, zope.interface या ऐसा कुछ उपयोग नहीं करेंगे, लेकिन बस कैनवास में वस्तुओं के लिए एक आधार वर्ग बनाएं:

 class CanvasObject(object): def __init__(self): #Supported operations self.clonable = False self.movable = False self.connectable = False self.deletable = False self.selectable = False def Render(self, gc): """ Rendering method should draw an object. gc: GraphicsContext object that should be used for drawing. """ raise NotImplementedError() def RenderHighlighting(self, gc): """ RenderHighlighting method should draw an object with a highlighting border around it. gc: GraphicsContext object that should be used for drawing. """ raise NotImplementedError() def ReturnObjectUnderCursor(self, pos): """ ReturnObjectUnderCursor method returns a top component of this object at a given position or None if position is outside of all objects. pos: tested position as a list of x, y coordinates such as [100, 200] """ raise NotImplementedError() 

जैसा कि आप देख सकते हैं, हमारे पास कई मानक क्रियाएं हैं जो डिफ़ॉल्ट रूप से समर्थित नहीं हैं। लेकिन 3 विधियां हैं जो कैनवास पर किसी भी वस्तु की होनी चाहिए। जो तार्किक है, हमें कैनवास पर ऐसी वस्तुओं की आवश्यकता क्यों है जो हम (रेंडर) नहीं देख सकते हैं, और जैसा कि हम देखते हैं, उन्हें कर्सर के साथ प्रोक करें (ReturnObjectUnderCursor, RenderHighlighting)। और यहां हम याद करते हैं कि हम अपने नोड्स को स्थानांतरित करना चाहते हैं, अर्थात्। वे चल सकने योग्य हैं, और इसके लिए एक विशेष वर्ग है:

 from MoveMe.Canvas.Objects.Base.CanvasObject import CanvasObject class MovableObject(CanvasObject): def __init__(self, position): super(MovableObject, self).__init__() self.position = position self.movable = True 

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

 from MoveMe.Canvas.Objects.Base.CanvasObject import CanvasObject from MoveMe.Canvas.Objects.Base.MovableObject import MovableObject class SimpleBoxNode(MovableObject, CanvasObject): ........... 

6. चलते हुए नोड्स

इसलिए हमें चलते हुए नोड्स के लंबे समय से प्रतीक्षित कार्यान्वयन के लिए मिला। ऐसा करने के लिए, हमें 2 बुनियादी कदम उठाने की आवश्यकता है: याद रखें कि उपयोगकर्ता ने किस ऑब्जेक्ट को खींचना शुरू किया था (यानी बाईं माउस बटन क्लिक के समय कर्सर के नीचे कौन सी वस्तु थी) और कर्सर को ले जाने तक ऑब्जेक्ट की स्थिति को अपडेट करें जब तक कि उपयोगकर्ता माउस बटन जारी नहीं करता।
पहली कार्रवाई में किया जाता है:

  def OnMouseLeftDown(self, evt): if not self._objectUnderCursor: return if self._objectUnderCursor.movable: self._lastDraggingPosition = self.CalcUnscrolledPosition(evt.GetPosition()).Get() self._draggingObject = self._objectUnderCursor self.Render() 

हम बस कर्सर की स्थिति और कर्सर के नीचे की वर्तमान वस्तु को याद रखते हैं क्योंकि इसे स्थानांतरित किया जाता है। जब तक कि कर्सर के नीचे किसी वस्तु की मौजूदगी की जांच नहीं होती है, क्योंकि शून्य को स्थानांतरित करने का कोई मतलब नहीं है। दूसरा भाग थोड़ा और दिलचस्प है

  def OnMouseMotion(self, evt): pos = self.CalcUnscrolledPosition(evt.GetPosition()).Get() self._objectUnderCursor = self.FindObjectUnderPoint(pos) if not evt.LeftIsDown(): self._draggingObject = None if evt.LeftIsDown() and evt.Dragging() and self._draggingObject: dx = pos[0]-self._lastDraggingPosition[0] dy = pos[1]-self._lastDraggingPosition[1] newX = self._draggingObject.position[0]+dx newY = self._draggingObject.position[1]+dy #Check canvas boundaries newX = min(newX, self.canvasDimensions[0]-self._draggingObject.boundingBoxDimensions[0]) newY = min(newY, self.canvasDimensions[1]-self._draggingObject.boundingBoxDimensions[1]) newX = max(newX, 0) newY = max(newY, 0) self._draggingObject.position = [newX, newY] #Cursor will be at a border of a node if it goes out of canvas self._lastDraggingPosition = [min(pos[0], self.canvasDimensions[0]), min(pos[1], self.canvasDimensions[1])] self.Render() 

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


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