tkinter绘制组件(30)——便笺
时间:2023-12-22 17:07:01
tkinter绘制组件(30)-笔记
- 引言
- 布局
-
- 函数结构
- 元素布局
- 标题
- 内容文本
- 大背景
- 调整元素级别
- 绑定拖动事件
- 完整的代码函数
- 效果
-
- 测试代码
- 最终效果
- github项目
- pip下载
- 结语
引言
wow,便笺(notecard)已经是TinUI第三十个功能组件。对了,隔壁CustomTkinter真的很好用。
首先,让我们来看看如何阅读笔记中的笔记,我们知道,笔记(jiān)在日常生活中,它实际上是一种提示工具,即自我提示或提示他人的媒介。然后桌面窗口也会遇到这样的情况:作者想让用户知道什么,或者用户想提醒自己什么。
然后,便便排上用场。
布局
函数结构
def add_notecard(self,pos:tuple,title='note',text='note text\nmain content',tfg='black',tbg='#fbfbfb',fg='black',bg='#f4f4f4',sep='#e5e5e5',width=200,font='微软雅黑 12'):#绘制便笺 ''' pos::位置 title::标题文本 text::内容文本 tfg::标题文本的颜色 tbg::标题背景色 fg::内容文本颜色 bg::内容文本背景色 sep::边框,分割线颜色 width::文本宽度 font::字体 '''
元素布局
虽然我们有一个sep
参数,但这是我最初想象的一个参数,即分割线的颜色,由于后来的一些变化,这个参数被保留了下来,但它的意义已经成为了框架的背景颜色。在这里,我们不妨看看笔记的元素:
-
大背景
-
标题
-
文本内容(与标题之间有间隔,这个间隔看起来像分割线)
是的,第三点很重要。
标题
不要问我为什么要单独创建标题,而不是将内容连接到标题后面。这个设计是为了更新未来,方便未来的元素绘制。
toptext=self.create_text((pos[0] 10,pos[1] 10),text=title,font=font,fill=tfg,width=width,anchor='nw')#标题 uid='notecard' str(toptext) self.addtag_withtag(uid,toptext) tx1,ty1,tx2,ty2=self.bbox(toptext)
if tx2-tx1<width:#判读当前文本宽度
tx2=tx1+width
topback=self.create_polygon((tx1,ty1,tx2,ty1,tx2,ty2,tx1,ty2),outline=tbg,fill=tbg,width=10,tags=uid)
值得注意的是,这里我们使用polygon
,能够绘制圆角背景
内容文本
这里只需要注意与标题有一定的间隔就行了。
content=self.create_text((tx1,ty2+12),text=text,font=font,fill=fg,width=width,anchor='nw',tags=uid)#便笺内容
cx1,cy1,cx2,cy2=self.bbox(content)
if cx2-cx1<width:
cx2=cx1+width
contentback=self.create_polygon((cx1,cy1,cx2,cy1,cx2,cy2,cx1,cy2),outline=bg,fill=bg,width=10,tags=uid)
大背景
这个背景真的是辛苦,既要做背景,还要附带边框、分割线的效果。管他呢~。
ax1,ay1,ax2,ay2=self.bbox(uid)#大背景
ax1+=5
ay1+=5
ax2-=5
ay2-=5
allback=self.create_polygon((ax1,ay1,ax2,ay1,ax2,ay2,ax1,ay2),outline=sep,fill=sep,width=10,tags=uid)
调整元素层级
刚才我们创建了所需要的元素,现在调整一下层级。
#调整元素层级关系
self.tkraise(topback)
self.tkraise(toptext)
self.tkraise(contentback)
self.tkraise(content)
绑定拖动事件
便笺怎么能够没办法拖拽呢?其实TinUI早就有很多拖拽控件了,这里直接给代码。不熟悉的朋友可以查看TinUI的调节框、滚动条等。
#绑定拖动事件
self.tag_bind(topback,'' ,mousedown)
self.tag_bind(topback,'' ,drag)
self.tag_bind(toptext,'' ,mousedown)
self.tag_bind(toptext,'' ,drag)
以下是相关回调函数:
def mousedown(event):
nonlocal startx,starty
startx=self.canvasx(event.x)#定义起始横坐标
starty=self.canvasy(event.y)
def drag(event):
nonlocal startx,starty
nowx=self.canvasx(event.x)
nowy=self.canvasy(event.y)
movex=nowx-startx#将窗口坐标转化为画布坐标
movey=nowy-starty
self.move(uid,movex,movey)
#重新定义画布中的起始拖动位置
startx=nowx
starty=nowy
完整代码函数
def add_notecard(self,pos:tuple,title='note',text='note text\nmain content',tfg='black',tbg='#fbfbfb',fg='black',bg='#f4f4f4',sep='#e5e5e5',width=200,font='微软雅黑 12'):#绘制便笺
def mousedown(event):
nonlocal startx,starty
startx=self.canvasx(event.x)#定义起始横坐标
starty=self.canvasy(event.y)
def drag(event):
nonlocal startx,starty
nowx=self.canvasx(event.x)
nowy=self.canvasy(event.y)
movex=nowx-startx#将窗口坐标转化为画布坐标
movey=nowy-starty
self.move(uid,movex,movey)
#重新定义画布中的起始拖动位置
startx=nowx
starty=nowy
startx,starty=None,None#拖动记录点
toptext=self.create_text((pos[0]+10,pos[1]+10),text=title,font=font,fill=tfg,width=width,anchor='nw')#标题
uid='notecard'+str(toptext)
self.addtag_withtag(uid,toptext)
tx1,ty1,tx2,ty2=self.bbox(toptext)
if tx2-tx1<width:#判读当前文本宽度
tx2=tx1+width
topback=self.create_polygon((tx1,ty1,tx2,ty1,tx2,ty2,tx1,ty2),outline=tbg,fill=tbg,width=10,tags=uid)
content=self.create_text((tx1,ty2+12),text=text,font=font,fill=fg,width=width,anchor='nw',tags=uid)#便笺内容
cx1,cy1,cx2,cy2=self.bbox(content)
if cx2-cx1<width:
cx2=cx1+width
contentback=self.create_polygon((cx1,cy1,cx2,cy1,cx2,cy2,cx1,cy2),outline=bg,fill=bg,width=10,tags=uid)
ax1,ay1,ax2,ay2=self.bbox(uid)#大背景
ax1+=5
ay1+=5
ax2-=5
ay2-=5
allback=self.create_polygon((ax1,ay1,ax2,ay1,ax2,ay2,ax1,ay2),outline=sep,fill=sep,width=10,tags=uid)
#调整元素层级关系
self.tkraise(topback)
self.tkraise(toptext)
self.tkraise(contentback)
self.tkraise(content)
#绑定拖动事件
self.tag_bind(topback,'' ,mousedown)
self.tag_bind(topback,'' ,drag)
self.tag_bind(toptext,'' ,mousedown)
self.tag_bind(toptext,'' ,drag)
return toptext,content,uid
效果
测试代码
#...
b.add_notecard((1200,50))
#...
这个测试代码真的是越来越简了。。。
最终效果
github项目
TinUI的github项目地址
pip下载
pip install tinui
结语
TinUI接下来的主要任务是改进控件,关于新增模块欢迎通过电子邮箱投递。