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

如果你想在 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)。

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

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/

上一篇:图像处理代码整理


下一篇:什么是Deeplink?以及Deeplink的原理