Python制作绘图板，基础功能实现

冷不防 2023-02-19 08:26 20阅读 0赞

### Tk画板，使用Canvas控件制作 ###

*  0.0展示：
 *  0.1需要的控件：
 *  1 引入
 *  2 需要一个全局变量
 *  3 创建窗体
 *  4 控件
 *   *  4.1 询问颜色控件
     *  4.2 列表框和橡皮控件
     *  4.3 画布和清除所有按钮控件
     *  4.4 绑定画布绘制
 *  5 各个函数
 *   *  5.1 输入框选取颜色函数
     *  5.2 使用askcolor
     *  5.3 橡皮函数
     *  5.4 绘图
     *  5.5 清除所有
 *  END 拿来代码试试吧

# 0.0展示： #

![在这里插入图片描述][20200619173842234.gif_pic_center]

# 0.1需要的控件： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nvb2w5OTc4MQ_size_16_color_FFFFFF_t_70_pic_center]

直接白嫖代码看最后面

依然使用tkinter模块制作，你细细的品发现Tk能做的东西真多，绘图首先需要画布，这个东东就是动画，需要Canvas创建

# 1 引入 #

需要askcolor函数，所以进一步简化引入

from tkinter import *
    from tkinter.colorchooser import *

# 2 需要一个全局变量 #

choosecolor = "black"  #画笔的颜色

# 3 创建窗体 #

基础框架搭建

tk = Tk()
    tk.title("Canvas Paint 1.1.3")
    
    
    
    tk.mainloop()

# 4 控件 #

前三个好像都是废话，一句一句的讲没必要，直接上控件，七零八碎到最后看看得了

## 4.1 询问颜色控件 ##

实现如下  
![在这里插入图片描述][2020061917452846.png]  
先整一个框架存储这一行

cco = Frame(tk, relief=SUNKEN)
    cco.pack(pady=5)

展示框：

tmplb1 = Label(cco, text="展示:") #临时文本
    showLab = Label(cco, width=15, relief=GROOVE, bg="white") # 展示框初始化背景为白
    tmplb1.pack(side=LEFT) #布局从左往右
    showLab.pack(padx=10, side=LEFT) #布局从左往右

输入框，输入颜色名和十六进制：

tmplb2 = Label(cco, text="可输入[#十六进制]和[颜色名] : string") #临时文本
    tmplb2.pack(side=LEFT)
    getc = Entry(cco, width=30) #设置文本框
    getc.pack(side=LEFT)

后面的两个按钮：

cokbtn = Button(cco, text="确认", command=sure)
    getc.bind("<Return>", sure_fun)
    cokbtn.pack(side=LEFT, ipadx=3, ipady=3)
    askbtn = Button(cco, text="使用Ask", command=usingAsk)
    askbtn.pack(side=RIGHT, ipadx=3, ipady=3)

command参数是点击按钮调用哪个函数，这些函数后面再讲

bind是绑定键位，在输入框中按下回车可以触发函数，如果报错，见Python专栏中的另一篇文章解决

## 4.2 列表框和橡皮控件 ##

![在这里插入图片描述][20200619175001389.png]  
其中橡皮是一个按钮，初始化是没有边框的，按下出现边框，再次按下没有边框

定义optionmenu列表：

Omf = Frame(tk) #定义框架
    Omf.pack() #布局框架
    tmplb3 = Label(Omf, text="选择画笔宽度") #临时文本
    tmplb3.pack(side=LEFT) #布局临时文本
    sizevar = IntVar() #在列表上的内容
    SizeList = [x for x in range(20, 90, 6)] #列表值，用列表存储
    showoutput(SizeList) #临时函数，可删除
    sizevar.set(SizeList[0]) #设置为第一项
    ShowOption = OptionMenu(Omf, sizevar, *SizeList) #框架，表面值，列表值
    ShowOption.pack(side=LEFT) #布局

橡皮按钮：

eraser = Button(Omf, text="橡皮", relief=FLAT, command=erase)
    eraser.pack(side=LEFT, ipadx=20, padx=50)

`relief=FLAT`是无边框

## 4.3 画布和清除所有按钮控件 ##

画布定义没什么难的

canvas = Canvas(tk, width=640, height=300)
    #width是画布宽度，height是高
    canvas.pack(expand=True, fill=BOTH) #可以填充

加入清除所有按钮

btn = Button(tk, text="清除所有", command=cls)
    btn.pack(pady=5)

## 4.4 绑定画布绘制 ##

如果鼠标按下且在画布上滑动，就触发绘图函数

canvas.bind("<B1-Motion>", paint)

# 5 各个函数 #

## 5.1 输入框选取颜色函数 ##

def sure():
        global choosecolor
        choosecolor = getc.get()
        showLab.config(bg=choosecolor)
    
    
    def sure_fun(self):
        sure()

将输入框的文本`getc.get()`读取，将全局变量赋值，再将展示框赋值，绑定的回车先调用sure\_fun，再调用sure

## 5.2 使用askcolor ##

def usingAsk():
        global choosecolor
        myColor = askcolor()
        choosecolor = myColor[1]
        showLab.config(bg=choosecolor)
        getc.delete(0, END)
        getc.insert(0, myColor[1])

全局choosecolor，将askcolor函数返回的列表存入myColor，顺便说返回值是一个列表，你可以加一句print输出myColor，发现\[0\]是一个精确到小数好几位的RGB，\[1\]是十六进制码，所以我们需要\[1\]的值，更改展示框、输入框重新放入十六进制。

## 5.3 橡皮函数 ##

def erase():
        global dercnt
        global choosecolor
        global tmpcolor
        if dercnt == 0:
            eraser.config(relief=RAISED)
            tmpcolor = choosecolor
            choosecolor = "#F0F0F0"
            dercnt += 1
        else:
            eraser.config(relief=FLAT)
            choosecolor = tmpcolor
            dercnt -= 1

没什么技巧，用截屏软件发现界面的背景是\#F0F0F0，所以触发橡皮就赋值颜色为\#F0F0F0，有一个变量叫做dercnt，如果是0，就说明当前不是橡皮，更改边框，记录临时颜色，如果为1，说明当前是橡皮，更改边框，获取上一次的颜色

## 5.4 绘图 ##

def paint(event):
        YourChooseSize = sizevar.get()
        x1, y1 = (event.x, event.y)
        x2, y2 = (event.x+YourChooseSize, event.y+YourChooseSize)
        canvas.create_oval(x1, y1, x2, y2, fill=choosecolor, outline=choosecolor)

获取你选中的画笔宽度，然后确定坐标，画圆，圆连起来不就是线嘛，单个的圆是这样的

![在这里插入图片描述][2020061918042965.png]

## 5.5 清除所有 ##

def cls():
        global choosecolor
        getc.delete(0, END)
        showLab.config(bg="white")
        choosecolor = "black"
        canvas.delete("all")

画布delete所有，输入框清除所有，初始颜色变成黑色，展示框变成白色

# END 拿来代码试试吧 #

所有代码，Github上也有，[https://github.com/Github-Programer][https_github.com_Github-Programer]

建议命名为.pyw文件，是python的窗体文件，没有控制台

''' @Author: Wyh @Date: 2020-06-18 15:08:01 @LastEditTime: 2020-06-19 17:28:42 @LastEditors: Please set LastEditors @Description: Canvas @FilePath: \Coding-Notes\Python-Notes\图形界面开发学习笔记\PythonGUI设计tkinter菜鸟编程书\Canvas画板.pyw @Version: @1.0.0: 基础构建绘图面板 @1.1.0: 加入颜色 @1.1.1: 可设置十六进制颜色 @1.1.2: 可设置RGB @1.1.3: 可设置颜色名 @1.2.0: 可设置画笔宽度 @1.3.0: 绘制图形 '''
    
    
    from tkinter import *
    from tkinter.colorchooser import *
    
    dercnt = 0
    
    
    def showoutput(LS): #测试函数，可以不要，但是记得修改调用部分
        for i in LS:
            print(i)
        print(type(LS))
        print(type(LS[0]))
    
    
    def usingAsk():
        global choosecolor
        myColor = askcolor()
        choosecolor = myColor[1]
        showLab.config(bg=choosecolor)
        getc.delete(0, END)
        getc.insert(0, myColor[1])
    
    
    choosecolor = "black"
    
    
    def sure():
        global choosecolor
        choosecolor = getc.get()
        showLab.config(bg=choosecolor)
    
    
    def sure_fun(self):
        sure()
    
    
    tmpcolor: str
    
    
    def erase():
        global dercnt
        global choosecolor
        global tmpcolor
        if dercnt == 0:
            eraser.config(relief=RAISED)
            tmpcolor = choosecolor
            choosecolor = "#F0F0F0"
            dercnt += 1
        else:
            eraser.config(relief=FLAT)
            choosecolor = tmpcolor
            dercnt -= 1
    
    
    def paint(event):
        YourChooseSize = sizevar.get()
        x1, y1 = (event.x, event.y)
        x2, y2 = (event.x+YourChooseSize, event.y+YourChooseSize)
        canvas.create_oval(x1, y1, x2, y2, fill=choosecolor, outline=choosecolor)
    
    
    def cls():
        global choosecolor
        getc.delete(0, END)
        showLab.config(bg="white")
        choosecolor = "black"
        canvas.delete("all")
    
    
    tk = Tk()
    tk.title("Canvas Paint 1.1.3")
    lab = Label(tk, text="拖拽鼠标绘图，下面是更改画笔颜色")
    lab.pack()
    
    # 询问颜色部分
    cco = Frame(tk, relief=SUNKEN)
    cco.pack(pady=5)
    # 需要一个展示框，一个文本框
    tmplb1 = Label(cco, text="展示:")
    showLab = Label(cco, width=15, relief=GROOVE, bg="white")
    tmplb1.pack(side=LEFT)
    showLab.pack(padx=10, side=LEFT)
    tmplb2 = Label(cco, text="可输入[#十六进制]和[颜色名] : string")
    tmplb2.pack(side=LEFT)
    getc = Entry(cco, width=30)
    getc.pack(side=LEFT)
    cokbtn = Button(cco, text="确认", command=sure)
    getc.bind("<Return>", sure_fun)
    cokbtn.pack(side=LEFT, ipadx=3, ipady=3)
    askbtn = Button(cco, text="使用Ask", command=usingAsk)
    askbtn.pack(side=RIGHT, ipadx=3, ipady=3)
    
    # optionMenu
    Omf = Frame(tk)
    Omf.pack()
    tmplb3 = Label(Omf, text="选择画笔宽度")
    tmplb3.pack(side=LEFT)
    sizevar = IntVar()
    SizeList = [x for x in range(20, 90, 6)]
    showoutput(SizeList)
    sizevar.set(SizeList[0])
    ShowOption = OptionMenu(Omf, sizevar, *SizeList)
    ShowOption.pack(side=LEFT)
    eraser = Button(Omf, text="橡皮", relief=FLAT, command=erase)
    eraser.pack(side=LEFT, ipadx=20, padx=50)
    
    canvas = Canvas(tk, width=640, height=300, relief=SUNKEN)
    canvas.pack(expand=True, fill=BOTH)
    
    btn = Button(tk, text="清除所有", command=cls)
    btn.pack(pady=5)
    
    canvas.bind("<B1-Motion>", paint)
    
    canvas.mainloop()

[20200619173842234.gif_pic_center]: https://img-blog.csdnimg.cn/20200619173842234.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nvb2w5OTc4MQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200619173456800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nvb2w5OTc4MQ==,size_16,color_FFFFFF,t_70#pic_center
[2020061917452846.png]: https://img-blog.csdnimg.cn/2020061917452846.png
[20200619175001389.png]: https://img-blog.csdnimg.cn/20200619175001389.png
[2020061918042965.png]: https://img-blog.csdnimg.cn/2020061918042965.png
[https_github.com_Github-Programer]: https://github.com/Github-Programer