[PySimpleGUI界面學習]（十二）繪圖功能的研究

• 2020 年 3 月 12 日
• 筆記

<!–more–> # 簡述 繪圖是圖形用戶界面的一種最常用功能之一，將複雜的幾何圖形、建築設計圖、天體運行軌跡等等展示在圖形界面上，無疑會更便於觀察，這次我們就來研究一下`PySimpleGUI`中有關繪圖的部分，在這部分，該包是直接調用`Tkinter`中有關圖形繪製函數的，所以如果直接將`PySimpleGUI`更換為不同類庫`PySimpleGUIQt`時，程序會報錯。 當然，圖形的繪製我們在另一個有關`pygame`的教程中會詳細介紹更有效率移動圖形的方法，在這一篇中，我們只是簡單做一嘗試即可。 # 一個簡單的示例 對於一個細節的研究，最好的辦法莫過於研究一段程序，下面的程序展示了如何利用`Canvas`函數來創建一個畫布。 “`python import PySimpleGUI as sg layout = [ [sg.Canvas(size=(100, 100), background_color='red', key= 'canvas')], [sg.T('改變圓的顏色:'), sg.Button('紅色'), sg.Button('藍色')] ] window = sg.Window('畫布測試') window.Layout(layout) window.Finalize() canvas = window.FindElement('canvas') cir = canvas.TKCanvas.create_oval(50, 50, 100, 100) while True: event, values = window.Read() if event is None: break if event == '藍色': canvas.TKCanvas.itemconfig(cir, fill="Blue") elif event == '紅色': canvas.TKCanvas.itemconfig(cir, fill="Red") window.Close() “` 上段代碼運行如下圖所示： <a href="https://s2.ax1x.com/2020/02/06/1yfzIs.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1yfzIs.png" alt="1yfzIs.png" border="0" /></a> 當用戶點擊設置不同顏色的按鈕時，圖中繪製的圓形會改變不同的顏色，比如用戶點擊藍色按鈕時，圓形填充藍色： <a href="https://s2.ax1x.com/2020/02/06/1yhCR0.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1yhCR0.png" alt="1yhCR0.png" border="0" /></a> 從以上代碼可以看出一個畫布如何創建，用`TKcanvas`如何進行圖形繪製。 # `Graph`的使用 在圖形繪製時，還可以使用另一個函數即Graph，這個函數本身就創建一個畫布，在該畫布上也可以繪製各種圖形，下面這段代碼演示了如何用該函數來創建圖形，有興趣的讀者可以對兩者進行比較。 “`python import PySimpleGUI as sg layout = [ [sg.Graph(canvas_size=(400, 400), graph_bottom_left=(0,0), graph_top_right=(400, 400), background_color='red', key='graph')], [sg.T('改變顏色:'), sg.Button('紅色'), sg.Button('藍色'), sg.Button('移動')] ] window = sg.Window('圖形測試') window.Layout(layout) window.Finalize() graph = window.FindElement('graph') circle = graph.DrawCircle((75,75), 25, fill_color='black',line_color='white') point = graph.DrawPoint((75,75), 10, color='green') oval = graph.DrawOval((25,300), (100,280), fill_color='purple', line_color='purple' ) rectangle = graph.DrawRectangle((25,300), (100,280), line_color='purple' ) line = graph.DrawLine((0,0), (100,100)) while True: event, values = window.Read() if event is None: break if event is '藍色': graph.TKCanvas.itemconfig(circle, fill = "Blue") elif event is '紅色': graph.TKCanvas.itemconfig(circle, fill = "Red") elif event is '移動': graph.MoveFigure(point, 10,10) graph.MoveFigure(circle, 10,10) graph.MoveFigure(oval, 10,10) graph.MoveFigure(rectangle, 10,10) window.Close() “` 程序運行圖如下： <a href="https://s2.ax1x.com/2020/02/06/1yhJdH.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1yhJdH.png" alt="1yhJdH.png" border="0" /></a> 當用戶點擊移動時，會發現我們創建的幾個圖形元素開始移動，但是細心的同學將會發現我們用DrawPoint創建的點圖形不會移動： <a href="https://s2.ax1x.com/2020/02/06/1yhBy8.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1yhBy8.png" alt="1yhBy8.png" border="0" /></a> 如果你來觀察其命令行時，會發現有這個警告輸出： <a href="https://s2.ax1x.com/2020/02/06/1y43pq.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1y43pq.png" alt="1y43pq.png" border="0" /></a> 仔細思考後，會察覺應該是該包本身的函數`Drawpoint`中應該有些問題。由於該包正在快速迭代開發中，其有些小問題是可以理解的。 但是遇到問題我們就要來查找，通過對程序的調試，發列在`PySimpleGUI`的源代碼中`Drawpoint`這個函數在返回時，沒有返回所創建的對象`id`，所以造成創建成功後只返回了`None`，於是該對象無法移動，代碼截圖如下所示： <a href="https://s2.ax1x.com/2020/02/06/1y4cnO.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1y4cnO.png" alt="1y4cnO.png" border="0" /></a> 將id的返回值添加上去後，如圖所示： <a href="https://s2.ax1x.com/2020/02/06/1y4XNj.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1y4XNj.png" alt="1y4XNj.png" border="0" /></a> 再來運行一下程序，就發現問題解決了。 <a href="https://s2.ax1x.com/2020/02/06/1y5MDO.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://s2.ax1x.com/2020/02/06/1y5MDO.png" alt="1y5MDO.png" border="0" /></a> # 小結 本篇對`PySimpleGUI`的繪圖功能進行了介紹，通過查看源代碼我們也可以看到，在`PySimpleGUI`中的`Graph`函數其實也只是對`Canvas`的一種封裝，同時遇到問題無須擔心，只要**按圖索驥**肯定可以找到問題並解決它。