M5StickC 绘制多个小球

Posted on

使用M5StickC绘制带有物理特性的小球(只与屏幕边框碰撞)

约莫有一年没有碰M5StickC了，最近打算用micropython制作一个生日礼物，所以特意回来熟悉熟悉一些基本操作。
不知道是多久以前写过一个Flutter版本的物理小球，写完以后感慨原来小球的物理效果是这样实现的。所以这次决定要在M5StickC上实现这个效果。(好像并没有什么直接联系，嘿嘿嘿)

分析

运动的小球具有速度(矢量)这一关键物理属性，还有颜色和大小两个次要的物理属性。在编程过程中，需将速度(矢量)分解为x轴方向速度和y轴方向速度。

过程

直接构建出小球的类

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
class Ball:
    # 初始化位置(x,y),半径r
    def __init__(self,x,y,r):
        self.x = x
        self.y = y
        self.r = r
        # 随机的x,y方向速度
        self.vx = randint(1,4)
        self.vy = randint(1,4)
        # 上一帧的位置x
        self.old_x = x
        # 上一帧的位置y
        self.old_y = y
        # 随机的颜色
        self.color = randint(0,16579836)
    # 更新
    def update(self):
        # 缓存上一帧位置
        self.old_x = self.x
        self.old_y = self.y
        # 更新当前帧位置
        self.x = self.x + self.vx
        self.y = self.y + self.vy
        # 判断是否到达屏幕边界(与边框发生碰撞)
        if self.x - self.r <= 0 or self.x + self.r > 80:
            self.vx = -self.vx
        if self.y - self.r <= 0 or self.y + self.r > 160:
            self.vy = -self.vy
    # 绘制
    def render(self):
        # 利用缓存的上一帧位置，局部清空上一帧内容
        self._clear()
        # 还原画笔颜色
        lcd.setColor(self.color)
        # 绘制当前帧内容
        lcd.fillCircle(self.x, self.y, self.r)
    # 局部清空
    def _clear(self):
        lcd.setColor(lcd.BLACK)
        lcd.fillCircle(self.old_x, self.old_y, self.r)

此时只要在主程序中创建一个Ball对象，然后循环调用Ball对象的update和render，就可以看到具有物理效果(伪)小球在屏幕中运动

下面编写游戏主循环,每当按下按钮A,就会生成一个新的球，按住则会一直生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
balls = []
print(len(balls))
press_delay = 0
while True:
    press_delay +=1
    if buttonA.read() and press_delay > 10:
        balls.append(Ball(randint(6,75),randint(6,155),randint(1,5)))
        press_delay = 0
    if buttonB.read() and press_delay > 10:
        press_delay = 0
        if len(balls) != 0:
            balls[0].clear()
            balls.pop(0)
    # time.sleep(0.033)
    for ball in balls:
        ball.update()
        ball.render()

下面是固定数量的小球

1
2
3
4
5
6
7
8
balls = []
for _ in range(randint(10,15)):
    balls.append(Ball(randint(6,80),randint(6,160),randint(1,5)))
while True:
    # time.sleep(0.033)
    for ball in balls:
        ball.update()
        ball.render()

代码头部引用的moduels

1
2
3
4
from m5stack import lcd
lcd.clear(lcd.BLACK)
import time
from urandom import randint

完整代码地址

效果

设备:M5StickC

环境:

参考资料

Flutter动画之粒子精讲

Flutter中如何实现点击OverlayEntry子项目后移除自身

Posted on

Flutter中如何实现点击OverlayEntry子项目后移除自身

要想在Flutter中展示一个自定义弹窗，我们可以使用OverlayEntry来实现。

分析

网上的大多数例子都是教大家如何使用OverlayEntry实现Android中的Toast效果，展示几秒钟后，调用OverlayEntry的remove方法去移除OverlayEntry。
但是想要实现点击OverlayEntry中的项目，再去移除OverlayEntry鲜有资料了。

解决办法

先声明后定义，如果你习惯了声明就定义就会导致在onPress中不能直接调用entry.remove();(被空指针异常搞怕了吧)

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
OverlayEntry entry;
entry = OverlayEntry(
    builder: (BuildContext context) {
        return Positioned(
            top: 120,
            left: MediaQuery.of(context).size.width / 2 - 120,
            width: 240,
            height: 180,
            child: Card(
                clipBehavior: Clip.antiAliasWithSaveLayer,
                shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(12))),
                color: Colors.white,
                child: ListView(
                    shrinkWrap: false,
                    padding: const EdgeInsets.all(0),
                    physics: ScrollPhysics(),
                    children: <Widget>[
                        FlatButton(
                            onPressed: () {
                                entry.remove();
                            },
                            child: Row(
                                        mainAxisSize: MainAxisSize.max,
                                        children: <Widget>[
                                            Text(
                                                '全部',
                                                style: TextStyle(
                                                    fontSize: 16,),
                                            )
                                        ],
                                    )
                        ),
                        Divider(
                            height: 2,
                        ),
                        FlatButton(
                            onPressed: () {
                                entry.remove();
                            },
                            child: Row(
                                        mainAxisSize: MainAxisSize.max,
                                        children: <Widget>[
                                            Text(
                                                '原创',
                                                style: TextStyle(
                                                    fontSize: 16,),
                                            )
                                        ],
                                    )
                        ),
                        Divider(
                            height: 2,
                        ),
                        FlatButton(
                            onPressed: () {
                                entry.remove();
                            },
                            child: Row(
                                        mainAxisSize: MainAxisSize.max,
                                        children: <Widget>[
                                            Text(
                                                '收藏',
                                                style: TextStyle(
                                                    fontSize: 16,),
                                            )
                                        ],
                                    )
                        ),
                        Divider(
                            height: 2,
                        ),
                        FlatButton(
                            onPressed: () {
                                entry.remove();
                            },
                            child: Row(
                                        mainAxisSize: MainAxisSize.max,
                                        children: <Widget>[
                                            Text(
                                                '好友圈',
                                                style: TextStyle(
                                                    fontSize: 16,),
                                            )
                                        ],
                                    )
                        ),
                        Divider(
                            height: 2,
                        ),
                    ],
                ),
            ),
        );
    },
);
Overlay.of(viewService.context).insert(entry);

效果

(我快要被这缩进折磨死了，在AS中是好好地，复制出来就对不齐了，手动缩进好累啊)

设备:Essential Phone

环境:

1
2
3
4
Flutter 1.10.13-pre.10 • channel master • https://github.com/flutter/flutter.git
Framework • revision f4b4616f87 (2 days ago) • 2019-10-04 20:01:04 -0700
Engine • revision 7d90779bb6
Tools • Dart 2.6.0 (build 2.6.0-dev.0.0 d6c6d12ebf)
© 2025 Do U Find IT? All Rights Reserved.
Theme by hiero