锐单电子商城 , 一站式电子元器件采购平台!
  • 电话:400-990-0325

tkinter绘制组件(30)——便笺

时间:2023-12-22 17:07:01 92芯圆形连接器插座cx2

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参数,但这是我最初想象的一个参数,即分割线的颜色,由于后来的一些变化,这个参数被保留了下来,但它的意义已经成为了框架的背景颜色。在这里,我们不妨看看笔记的元素:

  1. 大背景

  2. 标题

  3. 文本内容(与标题之间有间隔,这个间隔看起来像分割线)

是的,第三点很重要。

标题

不要问我为什么要单独创建标题,而不是将内容连接到标题后面。这个设计是为了更新未来,方便未来的元素绘制。

        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接下来的主要任务是改进控件,关于新增模块欢迎通过电子邮箱投递。

🔆tkinter创新🔆

锐单商城拥有海量元器件数据手册IC替代型号,打造电子元器件IC百科大全!

相关文章