零基础：100个小案例玩转Python软件开发！第六节：电子钟

大家好，欢迎继续观看系列专栏《零基础：100个小案例玩转Python软件开发！》！在这个系列里，我们不讲枯燥的理论，只玩最酷的Python案例实战。

本节课我们来学习一下如何制作电子钟，为什么要讲解电子钟的制作呢？因为这个案例涉及到两个知识点：

1. 画布绘图的方法和函数。

2. 定时器组件的使用。

具体如何做呢？下面我们来学习一下吧~！

一、表盘的制作

首先我们创建一个PyMe项目“Clock”，调整Form的大小，然后从顶部的绘制图形右边的绘制钟表背景圆。

选中圆形，然后在Form中拖动生成一个椭圆形（横向宽一点），并设置背景色为深灰色。

再次拖动创建一个圆形，设置背景色也是深灰色，但有一个白色边框，放置在椭圆之上，这样可以增强表盘的立体感。

在这个过程中，我们可以把底下的椭圆形通过鼠标右键的菜单项“锁定图形”以防止图形被误操作移动。操作完后可以把上面的圆形表盘也锁定。

有了表盘后，下面我们要准备一个与之大小合适的表盘上圆形指示秒的图片，这个图片是PNG的，除了黑色部分其它都是透明的。

然后我们从顶部绘图工具条选中图片，在Form_1上拖动出一个图片，然后选中它，用鼠标右键单击，在弹出菜单中，选择“更换图片文件”，打开上面的图片。

将指示图调整到合适大小后，锁定图片，再继续从顶部选择文字，并在相应的小时处拖动生成时间。

在这个基础上，再从顶部选择矩形和文字，在下部加入一个黑色的矩形和文字用于显示日期，另外，还需要用鼠标右键菜单为Form_1增加一个绑定点,放置在表盘中央，用于定位时针，分针和秒针的绘图起点。

最后，按着CTRL键，可以取消Tag显示，效果如下：

这样表盘的图形制作部分就基本完成了。

二、定时器与绘图逻辑

有了基本的图形后，下面我们从左边的“组件”工具条，选择定时器组件Timer并拖动到Form_1上。

什么是定时器呢？

定时器就是能够设定按固定时间间隔调用回调函数的一个功能对象，它特别适合处理定时触发的逻辑。

在创建出定时器组件后，我们可以选中它，在右边的属性栏可以设置时间间隔为1000（毫秒），这样定时器一旦启动，就会每1000毫秒，也就是每一秒来调用一次回调函数了。

用鼠标在定时器组件上右键单击，在弹出菜单中选择“事件响应”，然后在弹出的“事件响应处理编辑区“对话框中选择”Timer“事件，在右边点击”编辑事件函数”即可进入相应的函数代码中进行编辑。

在代码编辑器中，我们要做的就是通过每秒触发时，获得当前时间，然后在相应的位置来绘制时针，分针和秒针。

不过首先是要在界面初始化函数Form_1_onLoad中启动定时器：

def Form_1_onLoad(uiName): timer = Fun.GetElement(界面名称=uiName,控件名称='Timer_1') Fun.SetShapeText(界面名称=uiName,控件名称='Form_1',图形标记='date',字符串文本='') timer.Start()

这里如果不想写代码，也可以通过鼠标右键菜单，选择界面函数下的Timer的“开始”即可调用定时器的Start函数启动它了！

最后就是在定时器的触发函数中编写具体逻辑了：

def Timer_1_onTimer(uiName,widgetName): root = Fun.GetElement(界面名称=uiName,控件名称="root") drawCanvas = Fun.GetElement(界面名称=uiName,控件名称='Form_1') tm = time.localtime() hour = tm.tm_hour if hour >= 12: hour -= 12 minute = tm.tm_min secoud = tm.tm_sec year_text = str(tm.tm_year) if tm.tm_mon < 10: month_text = str("0%d"%tm.tm_mon) else: month_text = str("%d"%tm.tm_mon) day_text = str(tm.tm_mday) if tm.tm_mday < 10: day_text = str("0%d"%tm.tm_mday) else: day_text = str("%d"%tm.tm_mday) hour_text = str(tm.tm_hour) if tm.tm_hour < 10: hour_text = str("0%d"%tm.tm_hour) else: hour_text = str("%d"%tm.tm_hour) minute_text = str(tm.tm_min) if tm.tm_min < 10: minute_text = str("0%d"%tm.tm_min) else: minute_text = str("%d"%tm.tm_min) secoud_text = str(tm.tm_sec) if tm.tm_sec < 10: secoud_text = str("0%d"%tm.tm_sec) else: secoud_text = str("%d"%tm.tm_sec) text=str("%s月%s日"%(month_text,day_text)) Fun.SetShapeText(界面名称=uiName,控件名称='Form_1',图形标记='date',字符串文本=text) position = Fun.GetShapePoint(界面名称=uiName,控件名称='Form_1',图形标记='circle',绑定点名称='center') centerX = position[0] centerY = position[1] radius = 220 #时针，分针，秒针 drawCanvas.delete('hour') drawCanvas.delete('min') drawCanvas.delete('sec') rad1=2*math.pi*(hour+minute/60)/12 rad2=2*math.pi*(tm.tm_min+tm.tm_sec/60)/60 rad3=2*math.pi*tm.tm_sec/60 x = int(radius * 0.4 * math.sin(rad1)) y = int(-radius * 0.4 * math.cos(rad1)) Fun.DrawLine(界面名称=uiName,控件名称='Form_1',起点X值=centerX,起点Y值=centerY,终点X值=centerX+x,终点Y值=centerY+y,图形中心点位置='nw',终条颜色='#000000',终条宽度=10,虚线长度及间隔=(0,0),图形标记='hour') x = int(radius * 0.5 * math.sin(rad2)) y = int(-radius * 0.5 * math.cos(rad2)) Fun.DrawLine(界面名称=uiName,控件名称='Form_1',起点X值=centerX,起点Y值=centerY,终点X值=centerX+x,终点Y值=centerY+y,图形中心点位置='nw',终条颜色='#000000',终条宽度=6,虚线长度及间隔=(0,0),图形标记='min') x = int(radius * 0.6 * math.sin(rad3)) y = int(-radius * 0.6 * math.cos(rad3)) Fun.DrawLine(界面名称=uiName,控件名称='Form_1',起点X值=int(centerX-0.1*x),起点Y值=int(centerY-0.1*y),终点X值=int(centerX+x),终点Y值=int(centerY+y),图形中心点位置='nw',终条颜色='#ff0000',终条宽度=2,虚线长度及间隔=(0,0),图形标记='min') #中心点 Fun.DrawCircle(界面名称=uiName,控件名称='Form_1',起点X值=centerX-10,起点Y值=centerY-10,终点X值=centerX+10,终点Y值=centerY+10,图形中心点位置='nw',图形填充颜色='#CFCF00',外边框颜色='#CFCF00',外边框宽度=0,外边框虚线长度及间隔=(0,0),图形标记='')

在这段代码中，我们重点是调用绘图函数通过Fun.GetShapePoint获取绑定点位置，然后进行线条绘制和圆形中心的绘制，最终运行效果如下：

在Fun函数库中的绘图函数和玩法还有许多，你可以通过在代码中输入“Fun.”来唤起Fun函数智能提示，并以Draw作为前缀来查看函数列表：

你学会了么？下一节，我们将基于绘图，做一些更炫酷的动态界面，保持对PyMe的关注哦！