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

2024-03-09 21:12

本文主要是介绍Python 一步一步教你用pyglet仿制鸿蒙系统里的时钟,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

鸿蒙时钟

1. 绘制圆盘

2. 创建表类

3. 绘制刻度

4. 刻度数值

5. 添加指针

6. 转动指针

7. 联动时间

8. 时钟走动


鸿蒙时钟

本篇将用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, coswindow = 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, 230class 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, piwBackground = (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, piwBackground = (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, piwBackground = (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, piwBackground = (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, piwBackground = (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 = 210self.minute.rotation = 24self.hour.rotation = 160def 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 datetimewBackground = (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.secondself.second.rotation = -90 + s*6self.minute.rotation = -90 + m*6 + s/10self.hour.rotation = -90 + h%12*30 + m/2def 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 datetimeclass 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.secondself.second.rotation = -90 + s*6self.minute.rotation = -90 + m*6 + s/10self.hour.rotation = -90 + h%12*30 + m/2def on_draw(self):self.clear()self.batch.draw()def run(self):pyglet.app.run()watch = Watch(400, 250)
watch.run()

这篇关于Python 一步一步教你用pyglet仿制鸿蒙系统里的时钟的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/791956

相关文章

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python中的getopt模块用法小结

《Python中的getopt模块用法小结》getopt.getopt()函数是Python中用于解析命令行参数的标准库函数,该函数可以从命令行中提取选项和参数,并对它们进行处理,本文详细介绍了Pyt... 目录getopt模块介绍getopt.getopt函数的介绍getopt模块的常用用法getopt模

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Python如何精准判断某个进程是否在运行

《Python如何精准判断某个进程是否在运行》这篇文章主要为大家详细介绍了Python如何精准判断某个进程是否在运行,本文为大家整理了3种方法并进行了对比,有需要的小伙伴可以跟随小编一起学习一下... 目录一、为什么需要判断进程是否存在二、方法1:用psutil库(推荐)三、方法2:用os.system调用

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

一文带你搞懂Python中__init__.py到底是什么

《一文带你搞懂Python中__init__.py到底是什么》朋友们,今天我们来聊聊Python里一个低调却至关重要的文件——__init__.py,有些人可能听说过它是“包的标志”,也有人觉得它“没... 目录先搞懂 python 模块(module)Python 包(package)是啥?那么 __in

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB