2.7Canvas canvas

2.7Canvas canvas

The effect after running will be like the picture below.

If you click the move button, the effect will be as follows.

Canvas widget

canvas = tk.Canvas(window, bg='blue', height=100, width=200)
canvas.pack()

The parameters here are the same as those of the previously learned components, so I won’t explain them one by one. If you want to download the instagram icon, just right-click and save the image below.

image_file = tk.PhotoImage(file='ins.gif')
image = canvas.create_image(10, 10, anchor='nw', image=image_file)

The code here is mainly to realize the small picture in the upper left corner that we finally see. image_file = tk.PhotoImage(file='ins.gif')This sentence creates a variable to store ins.gifthis picture. image = canvas.create_image(10, 10, anchor='nw', image=image_file)The parameters inside 10,10are the coordinates of placing the picture into the canvas. Here, anchor=nwthe upper left corner of the picture is used as the anchor point. By adding the coordinates just given, the position of the picture can be determined. Everyone should know the meaning of the last parameter, which is to assign the image variable just saved to image.

x0, y0, x1, y1= 50, 50, 80, 80
line = canvas.create_line(x0, y0, x1, y1)

The main purpose of this code is to draw a straight line. ()The parameters given in the following are the coordinates of the two points of the line segment. The two points determine a straight line. What is given here is to draw a straight line from coordinates (50,50) to (80,80).

oval = canvas.create_oval(x0, y0, x1, y1, fill='red')  #创建一个圆，填充色为`red`红色
arc = canvas.create_arc(x0+30, y0+30, x1+30, y1+30, start=0, extent=180)  #创建一个扇形
rect = canvas.create_rectangle(100, 30, 100+20, 30+20)   #创建一个矩形

There are two new parameters added when creating a fan shape start=0. extent=180In fact, it goes from 0 degrees to 180 degrees, just like the sides of the fan are open. In our view, it is a semicircle. If changed extent=90, what we see is a 1/4 circle
trigger function.

def moveit():
    canvas.move(rect, 0, 2)

The trigger here is no longer the previous print_selection, haha, so what kind of function is it here? First of all, from the perspective of word understanding, it is a function of movement. It has also been demonstrated in the video. That is, every time we click the rectangle button, canvas.move(rect, 0, 2)The parameter that will move here (rect,0,2)is to move rectthis variable, that is, the 0 and 2 behind the rectangle we see, that is, the abscissa moves 0 units, and the ordinate moves 2 units. Simply put, every time you click, it does not move horizontally. Move two units vertically.
Code

import tkinter as tk

window = tk.Tk()
window.title('my window')
window.geometry('200x200')

canvas = tk.Canvas(window, bg='blue', height=100, width=200)
image_file = tk.PhotoImage(file='ins.gif')
image = canvas.create_image(10, 10, anchor='nw', image=image_file)
x0, y0, x1, y1= 50, 50, 80, 80
line = canvas.create_line(x0, y0, x1, y1)
oval = canvas.create_oval(x0, y0, x1, y1, fill='red')
arc = canvas.create_arc(x0+30, y0+30, x1+30, y1+30, start=0, extent=180)
rect = canvas.create_rectangle(100, 30, 100+20, 30+20)
canvas.pack()

def moveit():
    canvas.move(rect, 0, 2)

b = tk.Button(window, text='move', command=moveit).pack()


window.mainloop()