TkinterのCanvasを使って線を引く方法を解説する

2023.01.18 2022.09.30

このTkinterチュートリアルでは、ビルトイン関数を使ってさまざまな線を描く方法を学びます。

これは、Tkinterを学ぶ学生が忘れてしまい、そして物事をとても面倒なものにしてしまう主な概念の1つです。

それでは、シンプルかつスイートにして、始めましょう。

TkinterのCanvasとは?
1. Tkinter Canvasのセットアップに関するルール
TkinterのCanvasクラスからの図形関数
おわりに

TkinterのCanvasとは?

さて、ペイントのような様々なドローイングアプリケーションでは、メインの白いスクリーンがキャンバスです。

このキャンバスは、図形、ストローク、スケッチ、その他のものを保持する主要なウィンドウです。

同じように、Tkinterを使った図形描画はCanvas上で行われます。

主なアプローチは、最初にそれをセットアップして、さらに修正を加える必要があるということです。

Tkinter Canvasのセットアップに関するルール

背景は白に設定すること。
解像度はメインウィンドウの解像度より小さくします。
1. 解像度は、すべての図形をそれ自身の中で管理し、保持するのに十分なものでなければならない。
1. 組み込み関数で図形を描画するときは、常に適切な座標点を与える。

以上、4つの基本ルールで図形描画を実装していきます。

TkinterのCanvasクラスからの図形関数

いくつかの関数はTkinterと統合され、図形の描画を支援します。

これらは、描画の手助けをしてくれます。

円形
楕円
楕円
線分
四角形
三角形、他多数

キャンバスへの図形描画方法

from tkinter import Canvas

from tkinter import *
 
window = Tk()

window.title("Canvas") # giving title to window

window.config(bg = "grey")

window.geometry("400x400") # setting up the geometry

window.resizable(False, False) # disabling the resize option from x-y sides
 
my_canvas = Canvas(width = 350, height = 350, bg = "white") # canvas object to create canvas

my_canvas.pack(pady = 20) # padding it 20 pixels below from margin of window
 
window.mainloop()

線や図形を描くとき、関数を呼び出すときに (x1, y1) と (x2, y2) をパラメータとして与える必要があります。

これらは、キャンバス上の特定の形状の位置を決定します。

キャンバスの画面解像度の範囲内で座標を指定することを忘れないでください。

なぜなら、もしポイントが外に出てしまうと、スクリーン内の図形やオブジェクトを見ることができなくなるからです。

Create_line() 関数による線の描画

この関数/メソッドは、Canvas上に線を描画するためのものです。

基本的なパラメータは以下の通りです。

canvas_object.create_line(x1, y1, x2, y2, fill = "color_name")

コード

コード:

from tkinter import *
 
window = Tk()

window.geometry("400x400")

window.config(bg = "grey")

window.title("Canvas - Draw Line")

window.resizable(False, False)
 
# creating Canvas

canvasScreen = Canvas(window, width = 350, height = 350, bg = "white")

canvasScreen.pack(pady = 20)

canvasScreen.create_line(50, 0, 200, 350, fill = "red")
window.mainloop()

結果は以下の通りです。

from tkinter import *
 
window = Tk()

window.geometry("400x400")

window.config(bg = "grey")

window.title("Canvas - Draw Line")

window.resizable(False, False)
 
# creating Canvas

canvasScreen = Canvas(window, width = 350, height = 350, bg = "white")

canvasScreen.pack(pady = 20)

canvasScreen.create_line(0, 100, 100, 350, fill = "red")

canvasScreen.create_line(150, 0, 150, 250, fill = "green")

canvasScreen.create_line(0, 40, 200, 100, fill = "green")
 
window.mainloop()

説明

canvasScreenのインスタンスを作成し、width = 350、height = 350を指定します。
1. 同じオブジェクトを使用して、create_line()関数を呼び出します。
1. 次に、必要な x-y 座標を指定します。fillパラメータで線に色をつける。赤色を指定します。
最後にメインループでGUIウィンドウを表示します。

関数create_line()を何度でも呼び出せば、何本でも線を引くことができます。

この他にも、ランダムな線画を描くコードがあります。

from tkinter import Canvas

from tkinter import *
 
class window(Tk):

    def __init__(self, width, height):

        self.window = Tk()

        self.window.title("Canvas") # giving title to window

        self.window.config(bg = "grey")

        self.window.geometry(str(width) + "x" + str(height)) # setting up the geometry

        self.window.resizable(False, False) # disabling the resize option from x-y sides
 
    def create_canvas(self, wd, ht):

        self.my_canvas = Canvas(width = wd, height = ht, bg = "white") # canvas object to create canvas

        self.my_canvas.pack(pady = 20) # padding it 20 pixels below from top margin of window
 
        return self.my_canvas

    def drawLine(self, x1, y1, x2, y2, color):

        return self.my_canvas.create_line(x1, y1, x2, y2, fill = color)

    def run_app(self):

        self.window.mainloop()

win = window(400, 400)

win.create_canvas(350, 350)

win.drawLine(0, 150, 340, 200, "green")

win.drawLine(150, 0, 340, 300, "green")
win.run_app()