Python GUIプログラミング Rounded Rectangle

 今日も見に来てくださって、ありがとうございます。石川さんです。

 Tkinterでいろいろとできるようになってきたのですけど、ふと、角が丸くなった四角形を描くのはどうやったらいいのでしょうか、と、気になったので調べてみました。最終的にうまくいったのでまとめておきます。

できあがりイメージ

角が丸い矩形

ソースコード

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Rounded rectangle")
        self.geometry("430x220")
        
        self.canvas = c = tk.Canvas(self)
        c.pack(fill=tk.BOTH,expand=True)
        self.rounded_rectangle(90,50,340,150,25,fill="lightblue",outline="black")
        self.canvas.bind("<ButtonPress>",self.click)
        self.canvas.bind("<ButtonRelease>",self.release)
        self.canvas.bind("<Motion>",self.move)
        self.start = None
        
    def rounded_rectangle(self, x1, y1, x2, y2, r=25, **kwargs):
        points = [
                  x1, y1,
                  x1+r, y1,
                  x2-r, y1,
                  x2, y1,
                  x2, y1+r,
                  x2, y2-r,
                  x2, y2,
                  x2-r, y2,
                  x1+r, y2,
                  x1, y2,
                  x1, y2-r,
                  x1, y1+r,
                  ]
        self.canvas.create_polygon(points,**kwargs,smooth=True,tags="r1")
    
    def click(self,event):
        self.start = (self.canvas.canvasx(event.x), self.canvas.canvasy(event.y))
            
    def release(self, event):
        self.start = None

    def move(self,event):
        if not self.start:
            return
        original_x, original_y = self.start
        x, y = self.canvas.canvasx(event.x), self.canvas.canvasy(event.y)
        self.canvas.move("r1",x - original_x, y - original_y)
        self.start = (x, y)

if __name__ == '__main__':
    app = App()
    app.mainloop()

説明

 ここでは、rounded_rectangle()というメソッドを作成して描画するようにしました。何のことはない、ポイントはキャンバスのcreate_polygon()で描画するところなのですが、特にsmooth=Trueを指定しているところでしょう。ちょっと変わったところに点を打っているのですけど、smooth=Trueを指定するだけで、このような描画が可能になりました。

 その他、click()、release()、move()などを作りましたが、どうやって矩形を動かせばいいのかと、ちょっと復習してみました。描いた矩形はマウスで移動できます。

まとめ

 角が丸い矩形はCanvasで実装しておいてほしかったよねぇ。。。(笑)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。