AI脑洞板
完整教案
自学课件
第 7 课 · 共 35 课

画个图形

你好呀,我是吴老师。

上一课我们学会了一件事:屏幕上的一切,追到底都是点。

知道了这一点,你就能画任何东西了 —— 理论上。

但那太慢了。

想象一下:你要用一颗一颗小石子铺一条路。铺是能铺出来的, 可你要铺到什么时候?我们今天要学的,就是别人已经铺好的路。

读完之后,你应该能:说出常用的五六个图形分别用哪个函数;看到 fill_ 就知道是实心还是空心;分清"矩形给左上角、圆给圆心";用几个基本图形拼出一幅画;解释为什么"谁先画谁后画"很重要。

用时:约 50 分钟。准备:板子、数据线。

看不懂的地方,整段复制给 AI,加一句"请一次只解释一个概念,讲完问我一个小问题"。


一、常用图形,就这几个

先说个好消息:你要画的图形,其实翻来覆去就那么几个。

图形什么时候用
矩形墙、门、窗、按钮、砖块、血条……
圆形太阳、球、脸、眼睛……
圆角矩形按钮、卡片、图标底 —— 就是想"温柔一点"的矩形
线边框、桌子腿、棋子连成的线
三角形屋顶、山、箭头 —— 但这个要特殊照顾,下面讲

就这些。你会了这几个,绝大部分画都能拼出来。

常用的六个图形

一个词的差别:实心还是空心

上面那张图里,每个图形都出现了两次 —— 一实一空。

看它们的函数名:

实心还是空心

规律很简单:前面带 fill_ 的就是实心的,不带的就是空心的。

实心空心
fill_rectrect
fill_circlecircle
fill_round_rectround_rect

💡 fill 就是"填满"的意思。所以 fill_rect 读作"填满一个矩形", rect 就只是"画个矩形框"。

记住这一个规律,几十个函数你就一次会了一半。

⚠️ 空心的线很细 —— 只有 1 个像素。 所以它看起来会比实心的淡很多。这是正常的,不是画错了。

那三角形呢?

好问题。板子上没有画三角形的函数。

那 demo01 里那个三角是从哪儿来的?

是用一条条越来越长的横线堆出来的。

for i in range(44):
    half = i * 34 // 44                       # 越往下越宽
    screen.hline(CELL_X[1] - half, CELL_Y[2] - 22 + i, half * 2 + 1, C1)

顶上那行最短(几乎就是个点),越往下越长 —— 堆完就是一个三角。

⭐ 这件事值得多想一秒: 一个"没有"的图形,用"有"的东西也能拼出来。 上一课你知道了"一切追到底是点",这一课你看到:圆角矩形是磨了角的矩形, 三角是堆出来的横线。 你以为的"基本图形",其实也没那么基本。

二、位置要给对

图形有了,接下来是把它放到哪儿。

这是今天最容易画偏的地方 —— 因为矩形和圆,给的坐标不是同一个位置:

位置要给对

图形你要告诉它的
fill_rect(x, y, w, h, 颜色)(x, y) 是左上角,w 是宽、h 是高
fill_circle(cx, cy, r, 颜色)(cx, cy) 是圆心,r 是半径

⚠️ 差这一点点,画出来差很远。 你要是把圆心当成"左上角"给坐标,那个圆会整体偏出去大半个直径。

而且 —— 它不报错。只是画歪了。

💡 怎么记? 矩形是个"方框",方框最容易被左上角定住; 圆是"从中心长出来的",所以你要告诉它中心在哪、能长多大。

三、拼一座房子

好,图形有了,位置也会给了。现在来真的画一幅画。

试试这个:

请帮我画一座房子:
背景是 ______ 色的夜空,右上角一个 ______ 色的太阳(圆)。
房子在屏幕中间,宽度大概是屏幕的 ____ 分之 ____:
墙是矩形,屋顶是三角形(用一条条越来越长的横线堆出来)。
门和窗也是矩形。烟囱上冒几圈烟(空心圆)。
草地最后画,盖住房子的底边。请用中文注释。

空自己填。 天空你想用什么颜色?太阳呢?房子占多大?

填不出来?点这里看一个参考(这不是标准答案)
请帮我画一座房子:
背景是深蓝色的夜空,右上角一个黄色的太阳(圆)。
房子在屏幕中间,宽度大概是屏幕的三分之二:
墙是矩形,屋顶是三角形(用一条条越来越长的横线堆出来)。
门和窗也是矩形。烟囱上冒几圈烟(空心圆)。
草地最后画,盖住房子的底边。请用中文注释。

跑起来是这样:

用图形拼出来的房子

⚠️ 这幅画里最重要的,是顺序

仔细看代码,你会发现草地是最后才画的。

为什么?因为 ——

⭐ 后画的,会盖住先画的。

房子画完了,墙的底边是直直地切在空中的,看着像浮起来。 最后用草地盖住下面那一截,房子才"站"在草里了。

这就像贴纸: 先贴的那张会被后贴的压住。 所以你画复杂东西的时候,得先想清楚谁在前、谁在后:

先画:远的(天空、太阳)
再画:中间的(房子)
最后:近的(草地、挡在前面的东西)

💡 烟囱也是同一个道理 —— 它先画,然后屋顶压住它的下半截, 看起来就像是从屋顶里长出来的。要是反过来,烟囱就会浮在屋顶上面,很怪。

四、动手做

动手之前,先回答一个预测题:

如果把"草地"那一行挪到程序的最前面,画出来会是什么样?

想好了再看:

点开对答案

房子会浮在草地上面。

因为草地画在最前面,房子后画,就把草地整个盖住了 —— 房子的底边还是直直地切在空中,看着像飘着。

同一堆图形,只换了画的顺序,画出来的意思就变了。 (这题问的就是刚才那一节。)

只改一个条件

挑一个来改,先说出你的预测,再动手:

✏️ 可以直接在表格里填写
我改的条件我预测会怎样实际怎样
把屋顶的 HALF = 74 改成 40
把太阳的半径从 22 改成 40
把 fill_round_rect 的圆角从 4 改成 20
把烟囱那两行删掉
把 demo01 里 fill_rect 换成 rect

最后一行是个"换一个词"的小实验 —— 只改函数名的开头, 看看实心和空心的差别到底有多大。

五、自检小测

正在加载本课自检小测…

六、还想玩点什么

方向可以描述给 AI 的效果值得继续想
自画像圆当脸、矩形当身体、两个小圆当眼睛笑起来的嘴,用哪个图形画?
我的小旗子一块矩形布,上面几个图形当图案图案怎么摆在"旗子中间"?
交通标志圆形的红边 + 中间一个图形怎么让图案正好落在圆心?
一幅风景太阳、山(三角堆的)、河(矩形)、树谁先画谁后画?列个顺序看看

最后一行那道题,是本课你最该带走的思考方式: 先想顺序,再动手画。


这一课的作品,就在上面那几张卡片里 —— 点「装到板子上」,用 USB 线或者蓝牙选你的板子,几秒就装好了。 装完板子会自己打开它,不用按任何按键,也不用去桌面上翻页找。

想看它是怎么写出来的,点卡片上的「查看源码」。

本节演示

六个图形

六个图形

常用图形排成一页,一眼看完

一座房子

一座房子

太阳、房子、草地,全是矩形和圆拼的