1.13. 使用LCD显示器画几何图形

本节种我们将继续探索LCD屏幕显示的功能，掌握如何在BlueFi的彩色LCD屏幕上绘制基本几何图形，包括直线、三角形、任意多边形、 矩形、圆角矩形和圆，并掌握边框线径、填充与透明等处理。利用这些绘制基本几何图形的方法，我们能够创意出各种各样的几何图案。

1.13.1. 绘制基本几何图形

相信你现在能明白本节最后面所列举的基本几何图形接口及其说明，本节第一个示例程序就是将所有这些接口在BlueFi屏幕上绘制基本几何 图形。示例程序如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  from adafruit_display_shapes.line import Line
  from adafruit_display_shapes.triangle import Triangle
  from adafruit_display_shapes.polygon import Polygon
  from adafruit_display_shapes.rect import Rect
  from adafruit_display_shapes.roundrect import RoundRect
  from adafruit_display_shapes.circle import Circle

  import displayio
  from hiibot_bluefi.screen import Screen
  screen = Screen()

  points = [(59,0), (179,0), (239,59), (239,179), (179,239), (59,239), (0,179), (0,59)]

  shape_group = displayio.Group(max_size=9)

  line = Line(119, 0, 119, 239, color=screen.WHITE)
  shape_group.append(line)
  triangle = Triangle(119,0, 59,239, 179,239, fill=None, outline=screen.YELLOW)
  shape_group.append(triangle)
  polygon = Polygon(points, outline=screen.GREEN)
  shape_group.append(polygon)
  rect = Rect(29,29,180,180, fill=None, outline=screen.BLUE, stroke=6)
  shape_group.append(rect)
  rrect = RoundRect(39,39,160,160,40, fill=None, outline=screen.BLUE, stroke=4)
  shape_group.append(rrect)
  circle = Circle(119,119,75,fill=None, outline=screen.BLUE)
  shape_group.append(circle)

  screen.show(shape_group)

  while True:
      pass

在这个示例中，我们将adafruit_display_shapes类绘图接口的子类全部展示出来。目的是帮助你掌握绘制这些基本几何图形 的接口的使用方法。

示例代码分析：

  • 第1行，从“/CIRCUITPY/lib/adafruit_display_shapes/line.py”模块中导入Line类
  • 第2行，从“/CIRCUITPY/lib/adafruit_display_shapes/triangle.py”模块中导入Triangle类
  • 第3行，从“/CIRCUITPY/lib/adafruit_display_shapes/polygon.py”模块中导入Polygon类
  • 第4行，从“/CIRCUITPY/lib/adafruit_display_shapes/rect.py”模块中导入Rect类
  • 第5行，从“/CIRCUITPY/lib/adafruit_display_shapes/roundrect.py”模块中导入RoundRect类
  • 第6行，从“/CIRCUITPY/lib/adafruit_display_shapes/circle.py”模块中导入Circle类
  • 第8行，导入displayio模块
  • 第9行，从“/CIRCUITPY/lib/hiibot_bluefi/screen.py”模块中导入Screen类
  • 第10行，将导入的“Screen”类实例化为一个实体对象，名叫“screen”
  • 第12行，声明一个列表型变量points，并用8个元组型坐标赋给这个列表
  • 第14行，声明一个displayio类显示元素群Group型变量shape_group，并指定其包含的最大元素个数为9
  • 第16行，定义一个名叫line的Line类图形，并指定其两端点坐标和颜色
  • 第17行，将line添加到shape_group元素群中
  • 第18行，定义一个名叫triangle的Triangle类图形，并指定其顶点坐标和颜色
  • 第19行，将triangle添加到shape_group元素群中
  • 第20行，定义一个名叫polygon的Polygon类图形，使用顶点列表points指定其顶点坐标, 并指定其颜色
  • 第21行，将polygon添加到shape_group元素群中
  • 第22行，定义一个名叫rect的Rect类图形，并指定左上角顶点坐标、宽度和高度，以及颜色
  • 第23行，将rect添加到shape_group元素群中
  • 第24行，定义一个名叫rrect的RoundRect类图形，并指定左上角顶点坐标、宽度、高度和圆角半径，以及颜色
  • 第25行，将rrect添加到shape_group元素群中
  • 第26行，定义一个名叫circle的Circle类图形，并指定圆心坐标和圆角半径，以及颜色
  • 第27行，将circle添加到shape_group元素群中
  • 第29行，将shape_group元素群显示到screen上
  • 第31行，定义一个无穷循环程序块
  • 第32行(无穷循环程序块的第1行)，空操作

1.13.2. 绘制BlueFi轮廓图形

下一个示例将非常有趣，使用前一个示例中所掌握的绘制基本图形的方法绘制一个BlueFi彩色轮廓图在BlueFi的LCD屏幕上，虽然程序代码很长，但是算法 和程序思路异常简单。示例代码如下：

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
  from adafruit_display_shapes.line import Line
  from adafruit_display_shapes.triangle import Triangle
  from adafruit_display_shapes.polygon import Polygon
  from adafruit_display_shapes.rect import Rect
  from adafruit_display_shapes.roundrect import RoundRect
  from adafruit_display_shapes.circle import Circle

  import displayio
  from hiibot_bluefi.screen import Screen
  screen = Screen()

  shape_group = displayio.Group(max_size=41)

  rrect = RoundRect(19,39,200,160,12, fill=None, outline=screen.WHITE, stroke=1)
  shape_group.append(rrect)

  rect1 = Rect(69,59,100,100, fill=None, outline=screen.WHITE, stroke=1)
  shape_group.append(rect1)
  rect2 = Rect(24,109,24,24, fill=screen.WHITE, outline=screen.WHITE, stroke=1)
  shape_group.append(rect2)
  rect3 = Rect(189,109,24,24, fill=screen.WHITE, outline=screen.WHITE, stroke=1)
  shape_group.append(rect3)
  rect4 = Rect(79,45,8,8, fill=screen.RED, outline=screen.RED, stroke=1)
  shape_group.append(rect4)
  rect5 = Rect(99,45,8,8, fill=screen.YELLOW, outline=screen.YELLOW, stroke=1)
  shape_group.append(rect5)
  rect6 = Rect(119,45,8,8, fill=screen.GREEN, outline=screen.GREEN, stroke=1)
  shape_group.append(rect6)
  rect7 = Rect(139,45,8,8, fill=screen.CYAN, outline=screen.CYAN, stroke=1)
  shape_group.append(rect7)
  rect8 = Rect(159,45,8,8, fill=screen.BLUE, outline=screen.BLUE, stroke=1)
  shape_group.append(rect8)
  rect9 = Rect(69,59,110,100, fill=None, outline=screen.WHITE, stroke=2)
  shape_group.append(rect9)

  circle1 = Circle(36,121,6, fill=screen.RED, outline=screen.RED)
  shape_group.append(circle1)
  circle2 = Circle(200,121,6, fill=screen.RED, outline=screen.RED)
  shape_group.append(circle2)

  circle3 = Circle(35,175,9, fill=None, outline=screen.GOLD)
  shape_group.append(circle3)
  circle4 = Circle(77,175,9, fill=None, outline=screen.GOLD)
  shape_group.append(circle4)
  circle5 = Circle(119,175,9, fill=None, outline=screen.GOLD)
  shape_group.append(circle5)
  circle6 = Circle(161,175,9, fill=None, outline=screen.GOLD)
  shape_group.append(circle6)
  circle7 = Circle(203,175,9, fill=None, outline=screen.GOLD)
  shape_group.append(circle7)

  rect10 = Rect(27,185,16,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect10)
  rect11 = Rect(69,185,16,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect11)
  rect12 = Rect(111,185,16,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect12)
  rect13 = Rect(153,185,16,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect13)
  rect14 = Rect(195,185,16,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect14)

  rect15 = Rect(23,185,2,10, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect15)

  rect16 = Rect(45,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect16)
  rect17 = Rect(51,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect17)
  rect18 = Rect(56,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect18)
  rect19 = Rect(62,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect19)

  rect20 = Rect(87,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect20)
  rect21 = Rect(93,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect21)
  rect22 = Rect(99,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect22)
  rect23 = Rect(105,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect23)

  rect24 = Rect(129,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect24)
  rect25 = Rect(135,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect25)
  rect26 = Rect(141,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect26)
  rect27 = Rect(147,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect27)

  rect28 = Rect(171,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect28)
  rect29 = Rect(177,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect29)
  rect30 = Rect(183,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect30)
  rect31 = Rect(189,185,3,14, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect31)

  rect32 = Rect(213,185,2,10, fill=screen.GOLD, outline=screen.GOLD, stroke=1)
  shape_group.append(rect32)

  screen.show(shape_group)

  while True:
      pass

程序的具体细节不必赘述，几乎都是前一个示例的代码，所有多出来的代码只是修改了绘制几何图形的位置、颜色、尺寸等参数。本示例 在BlueFi上的执行结果如下图：

../../_static/images/bluefi_basics/lcd_shapes_bluefioutline.jpg

如果你把本示例代码保存到BlueFi的/CIRCUITPY/code.py文件中，当你看到BlueFi执行该程序的效果时，相信你一定觉得这个示例 非常有趣。

使用本节所get的技能，你一定能设计出更有趣的图案。

总结：

  • 基本几何形状及其参数
  • 填充与透明
  • 颜色的十六进制表示
  • 绝对坐标
  • 本节中，你总计完成了108行代码的编写工作

重要

adafruit_display_shapes接口

  • Line (子类), line = Line(x0, y0, x1, y1, color)
    • x0, y0: 起点坐标
    • x1, y1: 终点坐标
    • color: 线颜色，一个十六进制的颜色值，如0xFF0000
  • Triangle (子类), triangle = Triangle(x0, y0, x1, y1, x2, y2, fill=None, outline=None)
    • x0, y0, x1, y1, x2, y2: 顶点坐标
    • fill: 填充颜色选项，=None:透明/无填充；=0xFF0000:填充为红色，或其他颜色的十六进制数
    • outline: 外框线颜色，=None:使用默认的前景色；=0xFF0000:外框线为红色，或其他颜色的十六进制数
  • Polygon (子类), polygon = Polygon(listPoints, outline=None)
    • listPoints: 顶点坐标的列表，如[(x0, y0), (x1,y1), .., (xm, ym)]
    • outline: 线颜色，=None:使用默认前景色；=0xFF0000:外框线为红色，或其他颜色的十六进制数
  • Rect (子类), rect = Rect(x, y, width, height, fill=None, outline=None, stroke=1)
    • x, y, width, height: 左上顶点坐标、宽度和高度
    • fill: 填充颜色选项，=None:透明/无填充；=0xFF0000:填充为红色，或其他颜色的十六进制数
    • outline: 外框线颜色，=None:使用默认的前景色；=0xFF0000:外框线为红色，或其他颜色的十六进制数
    • stroke: 线径(粗细)，默认为1，可设定其他值
  • RoundRect (子类), rrect = RoundRect(x, y, width, height, r, fill=None, outline=None, stroke=1)
    • x, y, width, height: 左上顶点坐标、宽度和高度
    • r: 圆角半径，最小值为0，最大值=min(width//2, height//2)
    • fill: 填充颜色选项，=None:透明/无填充；=0xFF0000:填充为红色，或其他颜色的十六进制数
    • outline: 外框线颜色，=None:使用默认的前景色；=0xFF0000:外框线为红色，或其他颜色的十六进制数
    • stroke: 线径(粗细)，默认为1，可设定其他值
  • Circle (子类), circle = Circle(cx, cy, r, fill=None, outline=0xFF0000)
    • cy, cy，r: 圆心坐标和半径
    • fill: 填充颜色选项，=None:透明/无填充；=0xFF0000:填充为红色，或其他颜色的十六进制数
    • outline: 外框线颜色，=None:使用默认的前景色；=0xFF0000:外框线为红色，或其他颜色的十六进制数