绘制圆饼图

这篇教学会利用 Scratch 的画笔功能，搭配简单的“画圆”数学式，根据清单的数值，在画布里快速绘制圆饼图。

快速导览：

• 圆形 ( 圆饼图 ) 公式
• 绘制圆形与扇形
• 使用函数，勾选执行完毕再更新画面
• 绘制圆饼图
• 根据数据绘制圆饼图

圆形 ( 圆饼图 ) 公式

圆饼图其实是“圆形”图案的变形版本，差别在于圆形要绘制一整圈 360 度，圆饼图则只需绘制固定的角度，绘制圆形的公式如下：

• 圆心：(x0,y0)
• 半径：r
• 夹角：θ ( 角度 )
• 圆周上每个点的 x = x0 + r × cos(θ)
• 圆周上每个点的 y = y0 + r × sin(θ)

绘制圆形与扇形

首先使用“绘图”工具建立一个“空白”的角色，空白的角色表示只有一个造型，且造型为空。

根据公式撰写程序，使用重复 360 次的方式 ( 圆周为 360 度 )，就能将角色定位在圆形圆周的每个点的座标上，运用画笔就能画出一个圆心 (0, 0) 半径 100 的空心圆形。

由于 Scratch 的重复循环搭配定位积木，默认有 0.03 秒的等待时间，完成后点击绿旗就会看见舞台上“逐渐显示”圆形。

如果要将圆形改成扇形，则要从“圆心下笔”，下笔后将座标移动到圆形的圆周，等待前往指定的角度后，再将画笔移动回圆心。

完成后点击绿旗就会看见舞台上“逐渐显示”扇形。

使用函数，勾选执行完毕再更新画面

为了避免 Scratch 默认的 0.03 秒延迟，造成缓慢的绘图过程，可以新增一个名为“绘制圆形”的函数，勾选“执行完毕再更新画面”，勾选后 Scratch 就会在函数里取消默认的等待延迟。

将刚刚绘制圆形的程序积木放到函数里，执行函数后，舞台上就会立刻出现一个圆形。

为了让函数更能够“重复利用”，编辑“绘制圆形”函数，替函数加上 x、y、r 和 angle 四个参数与说明文字，如此一来就能单纯改变参数，重复利用函数。

将函数的参数按照下图放到指定的位置，并在绘图结束后停笔。

完成后执行程序，舞台中就会立刻出现两个圆 ( 因为执行不同参数的函数两次 )。

下图的程序码执行后，会在舞台中画出两个扇形。

绘制圆饼图

圆饼图的原理就是“多个扇形的组合”，首先在原本的扇形程序码里，加入“返回圆心”的积木，执行后就会产生许多“密集的放射线”，这些放射线只要足够密集，就能产生“实心”的扇形，以下图为例，如果以每隔一度的方式绘制放射线，还是会看到一些背景颜色 ( 放射线越往外，彼此的间距就会变大 )。

修改程序码，将重复的次数增加 10 倍，每次重复改变的角度改为 1/10 倍，就能得到漂亮的实心图案。

为了可以调整扇形的“起始角度”和“颜色”，按照下图将“绘制圆形”函数改名成“绘制扇形”，并加入 deg1、deg2 和 color 参数 ( deg1 由 angle 参数修改而来 )。

修改函数内容，将 deg1、deg2 和 color 参数放入指定的位置，并增加 repeat 参数计算重复次数，因为在 deg2 大于 deg1 的正常状态下，扇形会“逆时针”绘制，但如果 deg1 大于 deg2 就会变成顺时针绘制，为了避免这个状况，需要将 deg2 增加 360，才能正常的逆时针绘图。

此外将原本笔迹颜色积木，改成可以透过数字调整的“笔迹颜色设定”积木，并加入笔迹亮度 100 积木。

多次执行函数，就能在舞台中画出圆饼图。

根据数据绘制圆饼图

在点击绿旗的时候，新增 data 清单和 total 总数，参考下图，在清单里加入 5～10 笔 100～1000 的随机数，并计算清单数值的总和。

新增名为“绘制圆饼图”函数，勾选“执行完毕再更新画面”。

参考下图编辑函数内容，让函数可以根据数据和数据总和的关系，计算出起始角度和结束角度，并呼叫“绘制扇形”函数进行绘图。

完成后，执行函数，就能够根据数据，得到漂亮的圆饼图。

范例解答

范例解答：Scratch 教学 - 绘制圆饼图

意见反馈