為 wxPython 的 Panel 加上背景圖

昨天因為 final project 的 demo 需要, 臨時用 wxPython 建構一個 scenario-oriented demo interface. 不過我之前沒有正式用過 wxPython, 手忙腳亂的找了 wxPython 的一些 examples 來看. 幸好基本概念跟 Java Swing 其實很像, 加上 Python 容易試誤的 scripting language 特性, 相當容易就完成一個簡易的 demo 介面.

在下面的 demo 介面中, 主要是由一張 context diagram, 搭配 scenario 的訊息輸出來作 demo.



Context diagram 是一張 jpeg 圖檔, 利用 wx.StaticBitmap 放在 wx.Panel 上, 然後再把幾個 wx.TextCtrl 放上去, 程式碼大概是像這樣 :

<br />import wx<br /><br />class Frame(wx.Frame):<br /><br /> """Frame class that displays an image."""<br /><br /> def __init__(self, image, parent=None, id=-1,<br /> pos=wx.DefaultPosition, title='SO-BUS Main Scenario Demo'):<br /><br /> """Create a Frame instance and display image."""<br /> temp = image.ConvertToBitmap()<br /> size = temp.GetWidth(), temp.GetHeight()<br /> wx.Frame.__init__(self, parent, id, title, pos, size)<br /> self.SetClientSize(size)<br /><br /> """Set image as background."""<br /> self.panel = wx.Panel(self, -1)<br /> self.panel.bmp = wx.StaticBitmap(parent=self.panel, bitmap=temp)<br /> <br /> """Message Box of Personal Working Systems"""<br /> self.pwsText = wx.TextCtrl(self.panel, -1, "Message Box of PWSs.\n",<br /> size=(250, 150), pos=(40,40), style=wx.TE_MULTILINE)<br /> self.pwsText.SetInsertionPoint(0)<br /><br /> """put other wx.TextCtrl bellow"""<br /><br />class App(wx.App):<br /> """Application class."""<br /> def OnInit(self):<br /> image = wx.Image('sobus-context.jpg', wx.BITMAP_TYPE_JPEG)<br /> self.frame = Frame(image)<br /> self.frame.Show()<br /> self.SetTopWindow(self.frame)<br /> return True<br /><br />def main():<br /> app = App()<br /> app.MainLoop()<br /><br />if __name__ == '__main__':<br /> main()<br />
這樣作在 Linux 上跑是沒有問題, 可以順利地出現上面的 demo 畫面, 但是在 Windows 上跑就會變成 image 蓋住所有 wx.TextCtrl 的情況. 看來wxPython 在不同的 platform 上應該會有不一樣的呈現結果.

但是因為 demo 的平台為 Windows, 合作夥伴的 OS 也是 Windows, 還是得想辦法解決此問題, 在 Google 上找了一陣, 在這個 blog 看到一個作法, 稍加修改如下 :

<br />import wx<br /><br />class BackgroundPanel(wx.Panel):<br /><br /> def __init__(self, parent, image):<br /> wx.Panel.__init__(self, parent, -1)<br /> self.buffer = wx.BitmapFromImage(image)<br /> dc = wx.BufferedDC(wx.ClientDC(self), self.buffer)<br /> self.Bind(wx.EVT_PAINT, self.OnPaint)<br /><br /> def OnPaint(self, evt):<br /> print 'paint :', evt<br /> dc = wx.BufferedPaintDC(self, self.buffer)<br /><br />class Frame(wx.Frame):<br /><br /> """Frame class that displays an image."""<br /> def __init__(self, image, parent=None, id=-1,<br /> pos=wx.DefaultPosition, title='SO-BUS Main Scenario Demo'):<br /> """Create a Frame instance and display image."""<br /> temp = image.ConvertToBitmap()<br /> size = temp.GetWidth(), temp.GetHeight()<br /> wx.Frame.__init__(self, parent, id, title, pos, size)<br /> self.SetClientSize(size)<br /><br /> self.panel = BackgroundPanel(self, image)<br /><br /> """Message Box of Personal Working Systems"""<br /> self.pwsText = wx.TextCtrl(self.panel, -1, "Message Box of PWSs.\n", <br /> size=(250, 150), pos=(40,40), style=wx.TE_MULTILINE)<br /> self.pwsText.SetInsertionPoint(0)<br /><br /> """Put Oher wx.TextCtrl bellow""" <br /><br /><br />class App(wx.App):<br /> """Application class."""<br /><br /> def OnInit(self):<br /> image = wx.Image('sobus-context.jpg', wx.BITMAP_TYPE_JPEG)<br /> self.frame = Frame(image)<br /> self.frame.Show()<br /> self.SetTopWindow(self.frame)<br /> return True<br /><br />def main():<br /> app = App()<br /> app.MainLoop()<br /><br />if __name__ == '__main__':<br /> main()<br />
這個作法是 extend 了 wx.Panel, 製造出一個可以顯示 background 的 BackgroundPanel. 然後在 Image 的顯示方面, 並非在 Panel 加了一個 Image 的 object, 而是利用 wx.BufferedDC 以及 PAINT Event, 再利用 wx.BufferedPaintDC 以繪圖的方式在 BackgroundPanel 的畫布上把 image 呈現出來, 避免了 Image object 可能會蓋過 wx.TextCtrl object 的可能性.

不過話說回來, 為什麼在 wxPython 內似乎沒辦法用 Z order 的方式控制元件的上下關係呢, 我記得同樣的概念從 Visual Basic 就有了, 如果有的話會方便許多阿.