如何使用鼠标在图像或画布上手绘

2023-11-18 20:07:04

如果你想在 Tkinter 中的图像或画布上绘制一些东西。您应该首先执行一些步骤。在这个博客中一步一步地跟随我，看看你如何轻松地做到这一点。

1.步骤

创建应用程序
创建一个画布
在画布上放一个图像
用鼠标在画布上画线

2.创建应用程序

为了创建这个应用程序，我们将只使用4行代码。我将给出4行代码来创建我们在这个项目中需要的空应用程序。

from tkinter import *
app = Tk()
app.geometry("400x400")
app.mainloop()

第一行是包含 Tkinter 库。第二行是创建应用程序。第三行是更改应用程序的尺寸，最后一行是将应用程序作为主循环注入，以便它继续运行。

3.创建一个画布

现在，我们创建了空应用程序。我们需要在上面放一个画布，这样我们就可以在上面画画了。为了创建一个画布，我们将使用 Tkinter 的 Canvas 功能。您可以在这两行代码中看到如何做到这一点。

canvas = Canvas(app, bg='black')
canvas.pack(anchor='nw', fill='both', expand=1)

在第一行中，我创建了具有黑色背景色的画布。然后在第二行中，我将它打包到应用程序中，但您可以看到还有一些其他参数，我现在将讨论。

还有就是选择画布的起点（锚点）。为此，我将“nw”表示为 nor-west，这意味着画布的第一个点将位于小部件的同一起点，即 (0, 0)。

而对于fill和expand参数表示在应用程序的整个区域上拉伸画布，以便我们可以使用整个大小。而且即使我们改变窗口的大小，画布大小也会自动改变。

4.在画布上放一个图像

现在是在画布中放置图像的步骤，因为我正在使用pillow库打开图像，调整它的大小并使其为 Tkinter 应用程序做好准备。

然后你应该使用函数“create_image”创建一个画布图像，这样你就可以在上面画画了。

image = Image.open("image.jpg")
image = image.resize((400,400), Image.ANTIALIAS)
image = ImageTk.PhotoImage(image)
canvas.create_image(0,0, image=image, anchor='nw')

您可以看到我对图像进行了调整大小以使其适合画布。

5.用鼠标在画布上画线

现在是最后一步，在将图像放到画布上之后，我们需要为绘制创建两个函数。第一个是得到x和y的第一次点击鼠标按钮，然后第二个函数将获得前一次点击的坐标与新的点击的坐标，并绘制一条线。因为要画一条线，我们只需要两个点，起点和终点。对于这个，如果我们一直点击按钮，然后拖拽来绘制，这意味着我们创建了很多点，它们之间的距离很短。利用这些点，我们画出直线，这样它就会是连续的。

def get_x_and_y(event):
    global lasx, lasy
    lasx, lasy = event.x, event.y

def draw_smth(event):
    global lasx, lasy
    canvas.create_line((lasx, lasy, event.x, event.y), fill='red', width=2)
    lasx, lasy = event.x, event.y

现在就像任何普通程序一样，如果我们声明一个函数，如果我们不调用它，它什么也不做。同样的事情，我们声明了这两个函数，但我们需要调用它们。所以调用主题的正确时间是我们点击图片的时候。

为此，您需要将这些添加到行中以调用该函数：

canvas.bind("<Button-1>", get_x_and_y)
canvas.bind("<B1-Motion>", draw_smth)

按钮1是说当我们点击第一个鼠标按钮时，它将调用函数。否则，如果您想调用这些函数(开始绘制)只有在单击按钮后。在本例中，您所需要做的就是将这最后两行放到按钮的回调函数中。

6.完整代码

from tkinter import *
from PIL import Image, ImageTk

app = Tk()
app.geometry("400x400")


def get_x_and_y(event):
    global lasx, lasy
    lasx, lasy = event.x, event.y

def draw_smth(event):
    global lasx, lasy
    canvas.create_line((lasx, lasy, event.x, event.y), fill='red', width=2)
    lasx, lasy = event.x, event.y
    

canvas = Canvas(app, bg='black')
canvas.pack(anchor='nw', fill='both', expand=1)

canvas.bind("<Button-1>", get_x_and_y)
canvas.bind("<B1-Motion>", draw_smth)


image = Image.open("image.jpg")
image = image.resize((400,400), Image.ANTIALIAS)
image = ImageTk.PhotoImage(image)
canvas.create_image(0,0, image=image, anchor='nw')


app.mainloop()

参考目录

https://pycad.co/how-to-draw-on-an-image/

码农公寓