您现在的位置是：首页 > 技术教程 正文

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

admin 阅读： 2024-03-25
后台-插件-广告管理-内容页头部广告（手机）

目录

鸿蒙时钟

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)]

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

代码：

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

2. 创建表类

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

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

3. 绘制刻度

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

代码： 

  1. import pyglet
  2. from math import sin, cos, pi
  4. wBackground = (248, 250, 252, 255)
  5. gScales = (215, 220, 230, 255)
  7. class Watch(pyglet.window.Window):
  8. def __init__(self, x, y, R=200, width=800, height=500, caption='刻度'):
  9. super().__init__(width, height, caption=caption)
  10. pyglet.gl.glClearColor(1, 1, 1, 1)
  11. self.batch = pyglet.graphics.Batch()
  12. self.circle = pyglet.shapes.Circle(x, y, R*1.05,
  13. color=wBackground, batch=self.batch)
  14. self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
  15. x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
  16. width=3, color=gScales, batch=self.batch) for i in range(60)]
  17. for i, scale in enumerate(self.scales):
  18. if i%5==0:
  19. scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
  20. def on_draw(self):
  21. self.clear()
  22. self.batch.draw()
  23. def run(self):
  24. pyglet.app.run()
  26. watch = Watch(400, 250)
  27. 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)]

代码：

  1. import pyglet
  2. from math import sin, cos, pi
  4. wBackground = (248, 250, 252, 255)
  5. gScales = (215, 220, 230, 255)
  6. rSecond = (240, 70, 20, 255)
  8. class Watch(pyglet.window.Window):
  9. def __init__(self, x, y, R=200, width=800, height=500, caption='指针'):
  10. super().__init__(width, height, caption=caption)
  11. pyglet.gl.glClearColor(1, 1, 1, 1)
  12. self.batch = pyglet.graphics.Batch()
  13. self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
  14. self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
  15. x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
  16. width=3, color=gScales, batch=self.batch) for i in range(60)]
  17. for i,scale in enumerate(self.scales):
  18. if i%5==0:
  19. scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
  20. self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
  21. x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
  22. batch=self.batch) for i in range(12)]
  23. def on_draw(self):
  24. self.clear()
  25. self.batch.draw()
  26. def run(self):
  27. pyglet.app.run()
  29. watch = Watch(400, 250)
  30. 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)

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

代码：

  1. import pyglet
  2. from math import sin, cos, pi
  4. wBackground = (248, 250, 252, 255)
  5. gScales = (215, 220, 230, 255)
  6. rSecond = (240, 70, 20, 255)
  7. bMinute = (70, 71, 75, 255)
  8. bHour = (42, 43, 48, 255)
  9. wWhite = (255, 255, 255, 255)
  11. class Watch(pyglet.window.Window):
  12. def __init__(self, x, y, R=200, width=800, height=500, caption='指针'):
  13. super().__init__(width, height, caption=caption)
  14. pyglet.gl.glClearColor(1, 1, 1, 1)
  15. self.batch = pyglet.graphics.Batch()
  16. self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
  17. self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
  18. x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
  19. width=3, color=gScales, batch=self.batch) for i in range(60)]
  20. for i,scale in enumerate(self.scales):
  21. if i%5==0:
  22. scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
  23. self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
  24. x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
  25. batch=self.batch) for i in range(12)]
  26. self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour, batch=self.batch)
  27. self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour, batch=self.batch)
  28. self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute, batch=self.batch)
  29. self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond, batch=self.batch)
  30. self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond, batch=self.batch)
  31. self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite, batch=self.batch)
  32. def on_draw(self):
  33. self.clear()
  34. self.batch.draw()
  35. def run(self):
  36. pyglet.app.run()
  38. watch = Watch(400, 250)
  39. 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

代码：

  1. import pyglet
  2. from math import sin, cos, pi
  4. wBackground = (248, 250, 252, 255)
  5. gScales = (215, 220, 230, 255)
  6. rSecond = (240, 70, 20, 255)
  7. bMinute = (70, 71, 75, 255)
  8. bHour = (42, 43, 48, 255)
  9. wWhite = (255, 255, 255, 255)
  11. class Watch(pyglet.window.Window):
  12. def __init__(self, x, y, R=200, width=800, height=500, caption='指针'):
  13. super().__init__(width, height, caption=caption)
  14. pyglet.gl.glClearColor(1, 1, 1, 1)
  15. self.batch = pyglet.graphics.Batch()
  16. self.circle = pyglet.shapes.Circle(x, y, R*1.05, color=wBackground, batch=self.batch)
  17. self.scales = [pyglet.shapes.Line(x+R*cos(i*pi/30), y+R*sin(i*pi/30),
  18. x+R*0.95*cos(i*pi/30), y+0.95*R*sin(i*pi/30),
  19. width=3, color=gScales, batch=self.batch) for i in range(60)]
  20. for i,scale in enumerate(self.scales):
  21. if i%5==0:
  22. scale.width, scale.x2, scale.y2 = 5, x+R*0.92*cos(i*pi/30), y+0.92*R*sin(i*pi/30)
  23. self.labels = [pyglet.text.Label(str((2-i)%12+1), font_size=R*0.12, color=(0,0,0,255),
  24. x=x+R*0.82*cos(i*pi/6), y=y+0.82*R*sin(i*pi/6)-R*0.06, anchor_x='center',
  25. batch=self.batch) for i in range(12)]
  26. self.circle1 = pyglet.shapes.Circle(x, y, R*0.08, color=bHour, batch=self.batch)
  27. self.hour = pyglet.shapes.Line(x, y, x+R*0.7, y, width=9, color=bHour, batch=self.batch)
  28. self.minute = pyglet.shapes.Line(x, y, x+R*0.9, y, width=7, color=bMinute, batch=self.batch)
  29. self.second = pyglet.shapes.Line(x, y, x+R*1.1, y, width=5, color=rSecond, batch=self.batch)
  30. self.circle2 = pyglet.shapes.Circle(x, y, R*0.05, color=rSecond, batch=self.batch)
  31. self.circle3 = pyglet.shapes.Circle(x, y, R*0.02, color=wWhite, batch=self.batch)
  32. self.second.anchor_position = (R*0.1, 0)
  33. self.second.rotation = 210
  34. self.minute.rotation = 24
  35. self.hour.rotation = 160
  36. def on_draw(self):
  37. self.clear()
  38. self.batch.draw()
  39. def run(self):
  40. pyglet.app.run()
  42. watch = Watch(400, 250)
  43. 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

代码：

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

8. 运行时钟

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

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

完整代码：

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

完

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表