图形颜色填充_Processing-2-基本图形绘制

戡.Aa：Processing-1-Processing概述zhuanlan.zhihu.com

本章要点如下

位置和坐标
基础图形
绘图顺序
绘图属性、模式

位置和坐标

Processing的位置和坐标在概念上和数学上的位置和坐标基本一致，唯一的差别就是坐标轴的的方向有些不一样，传统数学上的坐标轴是这样的

平面直角坐标系

我们常用的坐标系是第一象限，在Processing坐标轴是这样的

Processing中的坐标系方向位置是第一象限以x轴为对称轴的镜像。并且不存在负轴，开始的时候会有一些不习惯，熟悉起来使用和我们常用的第一象限的坐标轴基本一样，只是方向上有些差别而已。坐标的含义和使用方法也和原来一致，在第一章我们绘制线段时就已经举例了

Processing坐标轴使用示例

基础图形

从小学到初中到高中的我们学习图形的顺序都是点、线、面、体这样的顺序，所以基础图形的绘制也以这种顺序来讲解

基本图形

点

点的绘制函数是point(x , y)，x、y为点的横纵坐标，在窗口的最中心画了一个黑色的点，由于背景颜色问题可能看不出点的颜色，所以把背景颜色设置为白色

线

线的绘制函数为line(x1, y1, x2, y2)，x,、y1为第一个点的坐标，x2、y2为第二个点的坐标，一个基本的公理两点确定一条直线，采用代码清单1.1中的示例

面

一个基本公理不在同一直线上的三点确定一个平面，由于我们已经会画线了，面是由线和点组成的，我们可以绘制多条相交的线来实现画一个图形，这个方法对于图形各个点的坐标计算太麻烦了，好在Processing中提供了多种基础图行的绘制函数分别有三角形triangle()、矩形rect()、正方形square()、圆circle()、椭圆ellipse()等，还有一些高级图形就不一一列举了，具体的可以查看官方文档

三角形的绘制函数为triangle(x1, y1, x2, y2, x3, y3)，参数含义和前面的一致，分别为三个点的坐标，绘制一个三角形如下

三角形

正方形的绘制函数为square(x, y, extent)，x、y为正方形左上角顶点的坐标，extent为正方形的边长

正方形

矩形的绘制函数有三种分别为：

rect(a, b, c, d)
rect(a, b, c, d, r)
rect(a, b, c, d, tl, tr, br, bl)

第一种是最常见的a、b、c、d分别为左上角顶点x坐标、顶点y坐标、矩形的宽、矩形的高

第二种r代表直角的弧度半径，就是把直角变成圆角

第三种tl、tr、bl、br分别代表上左、上右、下右、下左的各个顶点的的弧度半径，也就是以(a,b)为起点的顺时针方向四个点的坐标。

矩形

圆

画圆的函数是

circle(x, y, extent)

，x,y为圆心坐标，extent为圆直径

椭圆

画椭圆的函数是ellipse(a,b,c,d)，a,b为圆心坐标，a,b为椭圆的宽和搞，由于圆也是一种特殊的椭圆(宽高相等的椭圆)，所以我们常用画椭圆代替画圆

椭圆

绘图顺序

绘图顺序在画矩形那段代码中已经演示过了，图形的显示顺序就是代码的执型顺序，后面画的图形会覆盖前面画的图形

后面画的圆把前面画的椭圆覆盖掉了。

绘图属性

绘图属性分别从下面这些方面来讲述

背景颜色
图形颜色
边框颜色、宽度
抗锯齿

背景颜色

关于背景颜色的设置前面已经用到了就是background()函数，background(0)表示黑色，background(255)表示白色，如果没有定义背景颜色默认是background(204)；为浅灰色0~255之间的都是各种灰色度。

图形颜色

例如我们上面画了各种图形要给图形上色，画一个洋红色的正方形

洋红色的正方形

为了给图形上色我用了fill(255， 0， 255)；fill里的参数数值使用的是RGB的颜色值，具体颜色怎么配可以查看RGB配色表。

然后我又继续画了一个椭圆，椭圆的颜色还是沿袭的上面fill()设置的颜色。

如果我想用回默认的颜色可以在画新图形之前使用noFill()函数，使用noFill()之后

原来我理解错了noFill()的作用是使填充颜色变成透明，当然这也是我猜的，为了验证我的猜想，我多换几个背景颜色，如果noFill()后面绘制的图形的填充颜色和背景颜色完全一致，说明noFIll()的作用就是使其后面绘制的图形的填充颜色变成透明。

background(0)

background(100)

background(204)

background(255)

经过多番测试验证，noFill()的作用确实是使其后面绘制的图形的填充颜色变成透明。走了很多弯路，我们终于知道了noFill()的作用。但是我的脑海里还有一个疑问，这种验证证明是不是完备的，存不存在其他可能，我们列举的背景颜色会不会太少了。其实我们大可不必考虑这么多，回到最开始，是什么契机让我知道要用noFill()，是我想改变填充的颜色，这些函数都是Processing内置的，我们都可以从参考文档上看到它们的具体用法。打开参考参考文档：

关于颜色的函数有这么多，我们想要了解哪个函数的用法都可以从上面查看noFill()的用法

方法描述是不能填充集合形状

边框颜色

由上面的图形绘制我们可以看到所有绘制的图形边框的颜色都是黑色的，那么我们能不能画一个其他颜色的边框的图形呢，当然也是可以的，在noFill的描述中也提到了分别是stroke()边框颜色（默认为黑）、noStroke()(没有边框)，打开stroke()的文档说明，我们可以在Related中看到其他相关的函数

这些都是与之相关的函数，具体用法就不一一赘述了。

绘图模式

关于绘图模式，我们先举一个例子

代码清单2.1

smooth();
noStroke();
ellipseMode(RADIUS);
fill(126);
ellipse(33, 33, 60, 60);
fill(255);
ellipseMode(CORNER);
ellipse(33, 33, 60, 60);
fill(0);
ellipseMode(CORNERS);
ellipse(33, 33, 60, 60);

效果图如下

代码清单2.1的效果图

smooth()方法的作用是使绘图的变变得平滑，在前面提到过。折断代码主要演示了不同ellipseMode()下的相同椭圆参数的图形绘制的差异。这里可以在参考文档中中搜索ellipseMode()的用法。

ellipseMode()里的参数总共有四种可选分别是CENTER、RADIUS、CORNER、CORNERS，注意全部都要大写，默认是CENTER，表示ellispe(a,b,c,d)的前两个参数a、b是椭圆的圆心坐标，c、d是椭圆外切矩形的宽和高

CENTER模式

RADIUS模式a、b也是圆心坐标，不过c、d表示椭圆的长半轴和短半轴的长

RADIUS模式

CORNER模式a、b为椭圆外切矩形的左上角的顶点坐标，c、d为外切矩形的宽和高，这个模式下的参数含义和rect()的参数含义基本一致。

CORNER模式

CORNERS模式表示a、b为外切矩形左上角的坐标，c、d表示外切矩形右下角的坐标

CORNERS

至此第2章的基本图形绘制就讲完了，下一章

戡.Aa：Processing-3-高级图形绘制zhuanlan.zhihu.com