基础课程里绘制了一只多啦A梦，用到了最基础的椭圆、圆、三角形、圆弧、直线等图形。但是涉及比较复杂的图形，以上图形就不够用了。
比如下面这只喜羊羊，涉及边缘不规则的几何图形，因此就需要使用贝塞尔曲线了。
Processing里的贝塞尔曲线类似Photoshop里的钢笔工具。通过锚点和控制点来控制曲线的形状。
noFill();
stroke(255, 102, 0);
line(85, 20, 10, 10);
line(90, 90, 15, 80);
stroke(0, 0, 0);
bezier(85, 20, 10, 10, 90, 90, 15, 80);
当然，如果仅仅像上面的代码手动设置锚点和控制点并进行调整，绘图比较麻烦。我在网上找到了一款通过可视化方式调整贝塞尔曲线的小工具（原作者不详），并对该工具进行了小改动。该工具可加载自己的底图，然后可通过快捷键添加和移除节点。通过鼠标拖拽调整好曲线后，使用快捷键P可自动生成贝塞尔曲线的代码并输出到控制台。
比如我添加了4个节点，将节点调整好后，可在控制台打印代码。
代码运行的效果如下：
继续利用控制点和锚点进行描边，注意曲线的首尾连接关系。发现刚才两步操作绘制的是两个图形，如何合并呢？很简单，由于两段代码都是由beginShape()和endShape()包裹住的，只要将节点代码都放到同一对beginShape()和endShape()组合中即可。
简单的操作就是把下面红框圈出的部分删除。
那么绘制的效果就是这样的
上述就是绘制原理，操作繁杂不再赘述，绘制完成后的效果如下，比较费时间，头上的一撮毛和脖子上的铃铛没时间画了，有兴趣的话可以自己补上。代码和绘画工具我都放到群文件里了。对图文介绍没看明白的可以看我主页更新的同款视频教程。
网友评论