本文介绍的作品是全国青少年创意编程与智能设计大赛创意编程比赛一等奖获得者张唐骜同学的参赛作品。

作品说明

这是一款绘画工具,相比现实中的绘画废纸、废笔、不易更改,可以更好节约资源、保护环境。

正文

在开始今天的文章之前,果冻老师先给大家出一道题目,Scratch中导入角色的方式有哪几种?这也是Scratch等级考试一级中的一个考点,是不是很简单呀!相信大家都可以回答出来,我们可以从角色库中选择一个角色,也可以自己绘制一个角色,还可以上传电脑中的图片作为程序的角色。

其中,使用绘图编辑器能够发挥小朋友们的创造力并绘制出属于每个人自己的角色,在编辑器中可以画线段,画圆形,画矩形,还可以给不同的形状填充各种各样的颜色。这么强大的编辑器你想知道是如何开发出来的吗?那今天我们就在Scratch中实现一个类似的可以使用鼠标进行绘画的编辑器吧。

这个绘图编辑器是长这个样子的:

舞台中包含了五种颜色的画笔,一个圆形的橡皮擦工具,还有一个白色的矩形绘画区域。看上去挺简单嘛,下面就来看看这些角色的代码是怎样设置的吧。

点击绿旗

点击绿旗之后,与其它作品一样,屏幕上首先会出现一个起始页。

这个起始页中包含有三个角色,分别是不断闪烁的文字标题,还有Introduct与Play两个按钮,我们一个一个来看。

首先是闪烁的标题,点击绿旗后标题文字的颜色会一直的变化,同时还会不停的变大变小。

看了代码的注释后,同学们是不是已经知道文字的效果是怎么实现的了?对,就是重复执行5次,每次将文字的大小和颜色特效都增加5,紧接着再重复执行5次,再将文字的大小和颜色特效减去5恢复原状态,最后在这两个重复执行的外面再嵌套一层重复执行,这样子闪烁效果就会一直不停的执行下去了。

接下来的角色是介绍Introduct和开始Play两个按钮,点击绿旗后,通过代码会给它们增加上悬停变大变亮的效果。

看过其它竞赛文章的同学相信对于这段代码不陌生,悬停鼠标变大的效果在很多作品中都遇到过,不同的是这里还增加了亮度的特效,让按钮看起来更与众不同。

介绍Introduct

点击介绍Introduct按钮后,屏幕上会显示出绘画板的规则介绍。

代码中判断如果鼠标指针点击了按钮,就会发出规则介绍的广播。相对于其它作品,这里的规则介绍页面没有使用角色来实现,而是直接切换背景就可以了。

规则介绍的背景是这样的:

使用画笔绘画,使用橡皮擦擦除,相比于Scratch的绘图编辑器这个画板还是很简单的。

接下来,我们点击开始Play按钮进入绘画板的界面吧。

绘画板

点击了Play按钮后,代码中会发出play的广播,接收这个广播的角色一共有7个,还有一个背景。

其中,Pencil角色是用于绘画的画笔,蓝色、红色、黄色、绿色、紫色角色可以改变画笔的颜色,橡皮擦角色可以擦除画板中的内容,背景主要用于显示绘画板。

由简到难,我们分别看一看这些角色的代码吧。

第一个是背景,接收到play的广播后,它会显示出画板的框架。

背景1背景是这样子的:

黑色方框围住的范围就是画笔绘画的区域,左侧还预留了一段空白用于显示颜色选择块和橡皮擦工具。

第二步,蓝色、红色、黄色、绿色、紫色角色和橡皮擦角色就会在黑框左侧各自的位置处显示出来,以红色角色为例:

其它几个角色的代码都是类似的,只是移到XY语句的坐标值稍有不同。

最后一个角色是Pencil画笔,它会在舞台区内显示出一只铅笔的造型,当我们按下鼠标的按键并移动时,就会沿着鼠标指针的轨迹画出相应的图案。

绘图板最重要的绘制功能是通过Scratch扩展模块的画笔功能实现的,所以我们要在代码一开始初始化好画笔的粗细与颜色,清除之前画下的图案,并抬笔。

有很多同学对于代码中等待按下鼠标?不成立的这条语句的作用有疑惑,其实它是判断play按钮的点击动作松开后才会进入绘图的操作。

接下来,代码会重复不断的执行移到鼠标指针的语句,这样铅笔角色就会一直跟随的鼠标的位置进行移动。如果这时我们按下了鼠标的按键就会在舞台上绘制出鼠标的移动轨迹,松开鼠标按键的话绘制就会停止,在这里,落笔这条设置非常重要,是绘制图案最核心的语句,它和我们使用画笔在纸上绘画的原理是一样的,落笔的意思就是将画笔头与纸张接触,移动画笔就会在纸上画下图案,如果抬笔将画笔移开纸张,绘制就结束了。

绘图板核心的功能其实已经实现了。

可是,只能画黑色的图案有什么意思呢?我们需要描绘出这个彩色的世界,所以就要改变画笔的颜色。在画笔模块中,有一条将笔的颜色设为XX的语句。

在上面的代码中通过这条语句将画笔颜色设置成了黑色,鼠标点击语句后面的颜色块,会弹出一个颜色选择器,在这里我们可以滑动颜色、饱和度、亮度的滑块选择不同的颜色,语句后面的颜色块就会相应的发生改变。

比如,当我们点击绘画板左侧的红色方块后,就会发出红色的广播,画笔角色接收到这个广播后,会通过颜色设置语句将画笔从黑色变成红色。

红、黄、蓝、绿、紫,不同的颜色一一对应有相应的铅笔造型。

于是在接收到红色的广播后,铅笔会换成红笔的造型。

这时,如果在绘画板中绘制,图案就是红色的了。

同理,黄色,蓝色,绿色,紫色都是一样的,改变铅笔对应的造型,设置为相应的颜色,切换画笔颜色的效果就搞定了。

橡皮擦

橡皮擦的功能用于擦除绘画板中错误的内容,或者擦除不再需要的内容。

果冻老师翻遍了画笔模块的所有语句,除了全部擦除语句,都没有找到部分擦除的功能。那橡皮擦的功能应该怎么实现呢?

其实一点都不难,大家想一想绘画板的背景颜色是什么?对,是白色的。假如我们使用一个白色的画笔在之前的图案上进行绘画,将画好的内容覆盖掉,这时画笔的轨迹颜色与画板背景颜色是完全一样的,这不就实现了橡皮擦的效果吗?

我们点击橡皮擦的图标后,pencil角色会从铅笔变成圆形的橡皮擦造型,并将画笔颜色设置为白色。

哈哈,原来这么简单啊!

总结

好了,这个简易的绘图编辑器到这里就介绍完了。虽然简单,但是绘画、变色、橡皮擦这些该有的功能都实现了,有了这些功能用户就可以使用这个编辑器绘制出一幅完整的作品了。代码中实现绘图的核心语句有两种:重复执行移到鼠标指针,以及画笔模块的相关语句。最后,我们还通过了一个小技巧实现了橡皮擦的功能。不过,这个作品有一个bug,同学们有没有发现?就是画笔是可以绘制到黑色矩形框的外面的,甚至橡皮擦都可以擦除掉舞台区里面的角色,这bug就有点点严重了。要解决这个bug也很简单,思路就是给铅笔的移动增加一个范围的限制,不让它移动到画板的外面,这个任务就交给大家吧。

OK,绘图编辑器已经开发出来了,那使用它就可以举办一次电脑绘图比赛了,看谁画出来的作品更有创意,是不是呢?