一步一步教你用Python pyglet仿制鸿蒙系统里的时钟

 更新时间:2024年03月13日 08:29:50   作者:Hann Yang  
pyglet是一个面向Python的跨平台窗口、多媒体库,它可以用于创建游戏和多媒体应用程序,下面这篇文章主要给大家介绍了关于如何一步一步教你用Python pyglet仿制鸿蒙系统里的时钟,需要的朋友可以参考下

鸿蒙时钟

本篇将用python pyglet库复刻华为手机鸿蒙系统闹钟程序的时钟,先在上图中抓取出时分秒针及刻度、表盘的颜色RGB值:

bHour = (42, 43, 48, 255)
bMinute = (70, 71, 75, 255)
rSecond = (240, 70, 20, 255)
gScale = 215, 220, 230
wBackground = 248, 250, 252

1. 绘制圆盘

首先要画一圆Circle,并用直线Line等分成60份。

        self.circle = pyglet.shapes.Circle(x, y, R, color=wBackground, batch=batch)
        self.scales = [pyglet.shapes.Line(x, y, x+R*cos(i*Pi/30), y+R*sin(i*Pi/30),
                            width=2, color=gScales, batch=batch) for i in range(60)]

直线除圆心外的另一端点的坐标计算公式,如下图所示:

代码:

import pyglet
from math import pi, sin, cos
 
window = pyglet.window.Window(800, 500, caption='圆盘')
pyglet.gl.glClearColor(1, 1, 1, 1)
batch = pyglet.graphics.Batch()
 
R = 200
wBackground = 248, 250, 252
gScales = 215, 220, 230
 
class Watch:
    def __init__(self, x, y):
        self.circle = pyglet.shapes.Circle(x, y, R, color=wBackground, batch=batch)
        self.scales = [pyglet.shapes.Line(x, y, x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                            width=2, color=gScales, batch=batch) for i in range(60)]
 
@window.event
def on_draw():
    window.clear()
    batch.draw()
 
watch = Watch(window.width/2, window.height/2)
 
pyglet.app.run()

2. 创建表类

改造这个Watch类,可设置圆心和半径,并让它成为pyglet.window.Window的子类。

import pyglet
from math import sin, cos, pi
 
wBackground = (248, 250, 252, 255)
gScales = (215, 220, 230, 255)
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='圆盘'): 
        super().__init__(width, height, caption=caption)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R,  
                        color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x, y, x+R*cos(i*pi/30), y+R*sin(i*pi/30),  
                        width=2, color=gScales, batch=self.batch) for i in range(60)]
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(500, 300, 150)
watch.run()

3. 绘制刻度

扩大圆面并缩短和加粗直线,表盘和刻度的大致轮廓就出现了。

代码: 

import pyglet
from math import sin, cos, pi
 
wBackground = (248, 250, 252, 255)
gScales = (215, 220, 230, 255)
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='刻度'): 
        super().__init__(width, height, caption=caption)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R*1.05,  
                        color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                        x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
                        width=3, color=gScales, batch=self.batch) for i in range(60)]
        for i, scale in enumerate(self.scales):
            if i%5==0:
                scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(400, 250)
watch.run()

4. 刻度数值

在整点的刻度值边上用标签标注上1~12的数字。

self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=24, color=(0,0,0,255),
                        x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)+5, anchor_x='center', 
                        anchor_y='center', batch=self.batch) for i in range(12)]

代码:

import pyglet
from math import sin, cos, pi
 
wBackground = (248, 250, 252, 255)
gScales = (215, 220, 230, 255)
rSecond = (240, 70, 20, 255)
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='指针'): 
        super().__init__(width, height, caption=caption)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                        x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
                        width=3, color=gScales, batch=self.batch) for i in range(60)]
        for i,scale in enumerate(self.scales):
            if i%5==0:
                scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
        self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
                        x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
                        batch=self.batch) for i in range(12)]
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(400, 250)
watch.run()

5. 添加指针

时、分、秒针,用三个圆三条直线来表示。

        self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour)
        self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour)
        self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute)
        self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond)
        self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond)
        self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite)

不用担心秒针长过表盘圆面,转动前会作“移动”处理。

代码:

import pyglet
from math import sin, cos, pi
 
wBackground = (248, 250, 252, 255)
gScales = (215, 220, 230, 255)
rSecond = (240, 70, 20, 255)
bMinute = (70, 71, 75, 255)
bHour   = (42, 43, 48, 255)
wWhite  = (255, 255, 255, 255)
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='指针'): 
        super().__init__(width, height, caption=caption)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                        x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
                        width=3, color=gScales, batch=self.batch) for i in range(60)]
        for i,scale in enumerate(self.scales):
            if i%5==0:
                scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
        self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
                        x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
                        batch=self.batch) for i in range(12)]
        self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour, batch=self.batch)
        self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour, batch=self.batch)
        self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute, batch=self.batch)
        self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond, batch=self.batch)
        self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond, batch=self.batch)
        self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite, batch=self.batch)
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(400, 250)
watch.run()
 

6. 转动指针

时、分、秒针的转动运用Line控件的旋转属性.rotation,这种方法要比修改端点坐标要方便。

默认的旋转中心是直线的左端点,属性.anchor_position可以修改中心坐标。

        self.second.anchor_position = (R*0.1, 0)
        self.second.rotation = 210
        self.minute.rotation = 24
        self.hour.rotation = 160

代码:

import pyglet
from math import sin, cos, pi
 
wBackground = (248, 250, 252, 255)
gScales = (215, 220, 230, 255)
rSecond = (240, 70, 20, 255)
bMinute = (70, 71, 75, 255)
bHour   = (42, 43, 48, 255)
wWhite  = (255, 255, 255, 255)
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='指针'): 
        super().__init__(width, height, caption=caption)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                        x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
                        width=3, color=gScales, batch=self.batch) for i in range(60)]
        for i,scale in enumerate(self.scales):
            if i%5==0:
                scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
        self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
                        x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
                        batch=self.batch) for i in range(12)]
        self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour, batch=self.batch)
        self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour, batch=self.batch)
        self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute, batch=self.batch)
        self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond, batch=self.batch)
        self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond, batch=self.batch)
        self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite, batch=self.batch)
        self.second.anchor_position = (R*0.1, 0)
        self.second.rotation = 210
        self.minute.rotation = 24
        self.hour.rotation = 160
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(400, 250)
watch.run()

7. 联动时间

联动系统时钟,使用datetime.now()获取当前时间的时、分、秒的值。

        now = datetime.now()
        h, m, s = now.hour, now.minute, now.second
        self.second.rotation = -90 + s*6
        self.minute.rotation = -90 + m*6 + s/10
        self.hour.rotation = -90 + h%12*30 + m/2

代码:

import pyglet
from math import sin, cos, pi
from datetime import datetime
 
wBackground = (248, 250, 252, 255)
gScales = (215, 220, 230, 255)
rSecond = (240, 70, 20, 255)
bMinute = (70, 71, 75, 255)
bHour   = (42, 43, 48, 255)
wWhite  = (255, 255, 255, 255)
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='指针'): 
        super().__init__(width, height, caption=caption)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                        x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
                        width=3, color=gScales, batch=self.batch) for i in range(60)]
        for i,scale in enumerate(self.scales):
            if i%5==0:
                scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
        self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
                        x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
                        batch=self.batch) for i in range(12)]
        self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour, batch=self.batch)
        self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour, batch=self.batch)
        self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute, batch=self.batch)
        self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond, batch=self.batch)
        self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond, batch=self.batch)
        self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite, batch=self.batch)
        self.second.anchor_position = (R*0.1, 0)
        self.update()
    def update(self):
        now = datetime.now()
        h, m, s = now.hour, now.minute, now.second
        self.second.rotation = -90 + s*6
        self.minute.rotation = -90 + m*6 + s/10
        self.hour.rotation = -90 + h%12*30 + m/2
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(400, 250)
watch.run()

8. 运行时钟

使用pyglet.clock.schedule_interval(self.update, 0.2)每秒更新5次。

总得来说,本次复刻比较完美,但直线控件在非水平或垂直状态,特别是小夹角时锯齿很严重。

完整代码:

import pyglet
from math import sin, cos, pi
from datetime import datetime
 
class Watch(pyglet.window.Window):  
    def __init__(self, x, y, R=200, width=800, height=500, caption='时钟'): 
        super().__init__(width, height, caption=caption)
        wBackground = (248, 250, 252, 255)
        gScales = (215, 220, 230, 255)
        rSecond = (240, 70, 20, 255)
        bMinute = (70, 71, 75, 255)
        bHour   = (42, 43, 48, 255)
        wWhite  = (255, 255, 255, 255)
        pyglet.gl.glClearColor(1, 1, 1, 1)
        self.batch = pyglet.graphics.Batch()
        self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
        self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
                        x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
                        width=3, color=gScales, batch=self.batch) for i in range(60)]
        for i,scale in enumerate(self.scales):
            if i%5==0:
                scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
        self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
                        x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
                        batch=self.batch) for i in range(12)]
        self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour, batch=self.batch)
        self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour, batch=self.batch)
        self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute, batch=self.batch)
        self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond, batch=self.batch)
        self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond, batch=self.batch)
        self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite, batch=self.batch)
        self.second.anchor_position = (R*0.1, 0)
        self.update(self.event)
        pyglet.clock.schedule_interval(self.update, 0.2)
    def update(self, event):
        now = datetime.now()
        h, m, s = now.hour, now.minute, now.second
        self.second.rotation = -90 + s*6
        self.minute.rotation = -90 + m*6 + s/10
        self.hour.rotation = -90 + h%12*30 + m/2
    def on_draw(self):
        self.clear()
        self.batch.draw()
    def run(self):
        pyglet.app.run()
 
watch = Watch(400, 250)
watch.run()

总结

到此这篇关于一步一步教你用Python pyglet仿制鸿蒙系统里的时钟的文章就介绍到这了,更多相关Python pyglet仿鸿蒙的时钟内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • python Django连接MySQL数据库做增删改查

    python Django连接MySQL数据库做增删改查

    本文写的是python Django连接MySQL数据库的步骤,提供增删改查的代码
    2013-11-11
  • Python黑魔法之metaclass详情

    Python黑魔法之metaclass详情

    Python 有很多黑魔法,为了不分你的心,今天只讲 metaclass。对于 metaclass 这种特性,有两种极端的观点:下面小编将为大家详细的介绍,刚兴趣的小伙伴可以参考一下
    2021-09-09
  • 分析机器学习之决策树Python实现

    分析机器学习之决策树Python实现

    决策树是一种非参数的有监督学习方法,它能够从一系列有特征和标签的数据中总结出决策规则,并用树状图的结构来呈现这些规则,以解决分类和回归问题。决策树算法容易理解,适用各种数据,在解决各种问题时都有良好表现
    2021-06-06
  • python raise的基本使用

    python raise的基本使用

    这篇文章主要介绍了python raise的基本使用,帮助大家更好的理解和学习python,感兴趣的朋友可以了解下
    2020-09-09
  • linux系统使用python监测系统负载脚本分享

    linux系统使用python监测系统负载脚本分享

    这篇文章主要介绍了linux系统使用python监测系统负载脚本,大家参考使用吧
    2014-01-01
  • Python 打印中文字符的三种方法

    Python 打印中文字符的三种方法

    本文给大家分享三种方法实现python打印中文字符的方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-08-08
  • 一文详解Python为什么要写__init__.py

    一文详解Python为什么要写__init__.py

    这篇文章主要介绍了Python为什么要写__init__.py的相关资料,__init__.py文件可以包含包的初始化环境变量、公共接口、包的信息以及通过__all__变量控制模块的公开接口,需要的朋友可以参考下
    2025-03-03
  • Pandas的Series结构及常用操作实例

    Pandas的Series结构及常用操作实例

    这篇文章主要介绍了Pandas的Series结构及常用操作实例,Series序列,是一种一维的结构,类似于一维列表和ndarray中的一维数组,但是功能比他们要更为强大,Series由两部分组成:索引index和数值values,需要的朋友可以参考下
    2023-07-07
  • 使用python搭建代理IP池实现接口设置与整体调度

    使用python搭建代理IP池实现接口设置与整体调度

    在网络爬虫中,代理IP池是一个非常重要的组件,由于许多网站对单个IP的请求有限制,因此,我们需要一个代理IP池,在本文中,我们将使用Python来构建一个代理IP池,然后,我们将使用这个代理IP池来访问我们需要的数据,文中有相关的代码示例供大家参考,需要的朋友可以参考下
    2023-12-12
  • 如何解决PyCharm显示:无效的Python SDK

    如何解决PyCharm显示:无效的Python SDK

    这篇文章主要介绍了在不同电脑之间传输Python项目时遇到的路径问题,并提供了解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2025-01-01

最新评论