Processing-文本排版

1、现实文本

// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup(){
  // 此处无代码。开心不？！:)
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 定义需要显示的字符串
  String s = "Five hexing wizard bots jump quickly.";
  // 文本本身的颜色
  fill(0);
  // 显示文本。
  // 第一个参数是要显示的文本，
  // 第二、三个参数是文本的x，y坐标，
  // 第四、五个参数是文本所占矩形的宽、高。
  text(s, 10, 10, 60, 80);
}

上面例子中，演示了显示文本的方法text()。对于文本的属性设置，除了设置基本的显示位置以外，还有文本行之间的间距，以及文本纵向的对齐方式。另外，在设置文本宽度的时候，Processing为我们提供了一个便捷的方法textWidth()，用此方法可以获取文本的宽度，并且可以实时获取用户当前输入的文本宽度。接下来，我们还是用小例子来进行演示。

2、文本行间距

// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup(){
    // 此处无代码
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 定义所要显示的文本
  String lines = "L1 L2 L3";
  // 设置文本字体的大小
  textSize(12);
  // 设置文本的颜色为黑色
  fill(0);
  // 设置文本之间的行间距为10
  textLeading(10);
  // 以行间距为10的距离显示文本
  text(lines, 10, 15, 30, 100);
  // 设置文本之间的行间距为20
  textLeading(20);
  // 以行间距为20的距离显示文本
  text(lines, 40, 15, 30, 100);
  // 设置文本之间的行间距为30
  textLeading(30);
  // 以行间距为30的距离显示文本
  text(lines, 70, 15, 30, 100);
}

上述代码中，我们通过使用textLeading()方法设置了文本的行间距。每设置一次，接下来要显示的文本就会做出相应的改变。不设置，就会保持上一次设置的状态。

3、文本纵向对齐：

// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup(){
  // 此处无代码
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 设置文本颜色为黑色
  fill(0);
  // 设置文本大小为12
  textSize(12);
  // 画一条线，以此区别文本的位置
  line(50, 0, 50, 100);
  // 设置文本为左对齐
  textAlign(LEFT);
  // 显示左对齐文本“Left”
  text("Left", 50, 20);
  // 设置文本为右对齐
  textAlign(RIGHT);
  // 显示右对齐文本“Right”
  text("Right", 50, 40);
  // 设置文本为中心对齐
  textAlign(CENTER);
  // 显示中心对齐文本“Center”
  text("Center", 50, 80);
}

上述代码中，展示了文本对齐方法textAlign()。文本的对齐类型分为三种，左对齐，中心对齐，右对齐，分别对应变量LEFT，CENTER和RIGHT。对齐方式也是每设置一次，接下来的文本显示就改变一次。不设置，就保持上一次设置完成后的状态。

4、获取文本长度

// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup(){
  // 此处无代码
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 定义显示的文本
  String s = "AEIOU";
  // 定义存储字符串长度的变量
  float tw;
  // 设置文本的颜色为黑色
  fill(0);
  // 设置文本的字体大小为14
  textSize(14);
  // 获取文本的长度
  tw = textWidth(s);
  // 显示文本
  text(s, 4, 40);
  // 根据文本长度，画出文本的下划线
  // 此处的下划线为矩形
  rect(4, 42, tw, 5);
  // 设置文本的字体大小为28
  textSize(28);
  // 获取文本长度
  // 参数为文本变量
  tw = textWidth(s);
  // 显示文本
  text(s, 4, 76);
  // 根据文本长度，画出文本的下划线
  // 此处的下划线为矩形
  rect(4, 78, tw, 5);
}

这个例子中，用到了textWidth()方法来获取文本的长度。然后根据获取的文本的长度，用rect()方法画出文本的矩形下划线。

5、字体

上面，我们介绍了几种Processing关于文本的一些基本设置。接下来呢，我们将继续介绍Processing中的字体。Processing中的字体，分为两种，一种是矢量字体（Vector Fonts），另一种称为像素字体（Pixel Fonts）。简单来讲，矢量字体不会随着文本大小的变化而产生缩放变形，而像素字体则会因为字体大小而产生变形。但像素字体也有其优势，那就是像素字体的执行效率比矢量字体要高。下面，我们先来说矢量字体。

1）矢量字体

不管是适量字体，还是像素字体，方法createFont()就是用来对TrueType（.ttf）字体或OpenType（.otf）字体进行转换的，转换后的变量类型是PFont类型，然后通过textFont()方法将转换后的PFont类型字体设置成当前字体。最后使用方法text()将文本显示出来。而当前显示文本所使用的字体，是临近textFont()设置的字体。下面这段代码可以打印出当前系统已安装了哪些字体。

// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup(){
  // 定义字符串，
  // 用来保存字体名称。
  // 这里PFont.list()是系统提供的方法，
  // 可直接使用。
  String[] fontList = PFont.list();
  // 打印已保存的字体名称
  printArray(fontList);
}
// 画图。
// 此方法被系统默认循环调用。
void draw(){
  // 此处无代码
}

下面我们还是以例子来演示说明具体的代码应该是怎样的。

// 定义字体类型变量
PFont zigBlack;
// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup() {
  // 设置窗口大小
  size(100, 100);
  // 创建字体名称为"Wassem"，字号为32的字体
  zigBlack = createFont("Waseem", 32);
  // 设置当前字体。
  // 此处为使用"Wassem"字体
  textFont(zigBlack);
  // 设置字体填充色为黑色
  fill(0);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置窗口背景色
  background(204);
  // 显示文本“LAX”，
  // 位置坐标为 0, 40
  text("LAX", 0, 40);
  // 显示文本“LHR”，
  // 位置坐标为 0, 70
  text("LHR", 0, 70);
  // 显示文本“TXL”
  // 位置坐标为 0, 100
  text("TXL", 0, 100);
}

通常情况下，我们很可能无法确定对方系统里是否安装了某个字体，这个时候，我们就不能确定所使用的字体名称是否已经存在于系统之中，如果使用了系统中没有的字体，那么程序运行肯定会出问题。怎么解决这个问题呢？为了解决这个问题，在项目目录下，Processing给我们提供了一个默认的目录，名叫data。默认创建的新项目，是没有这个目录的，我们可以手动创建这样一个目录，注意目录的名称要写成data，否则很有可能找不到字体文件。最后，将所要使用的字体文件复制到data目录下。具体程序和上面的这个例子几乎一样，唯一不一样的是，在调用createFont()的时候，文件名称要加上文件后缀，例如createFont("Waseem.otf", 32);

2）像素字体

最后，我们讲一下像素字体。由于Processing的像素字体格式，开发自90年代的MIT多媒体实验室（Media Lab）的可视化语言工作组（Visual Language Workshop），所以Processing创建的像素字体文件类型的后缀为VLW。Processing的PDE提供了创建像素字体的工具，点击菜单栏上的Tool目录，选择“Create Font”选项，然后会弹出一个窗口，选择要创建的字体类型，字体大小，设置文件名等等。注意，此时我们创建的字体为像素字体，所以字体大小最好跟具体需求能够匹配。

// 定义字体类型变量
PFont monacoBlack;
// 环境初始化。
// 此方法在软件启动时，被系统调用一次。
void setup() {
  // 设置窗口大小
  size(100, 100);
  // 加载Monaco-48.vlw文件
  // 字体文件的目录位于
  // 项目目录下的data目录
  monacoBlack = loadFont("Monaco-48.vlw");
  // 设置当前字体为monacoBlack
  textFont(monacoBlack);
  // 设置字体填充色为黑色
  fill(0);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置窗口背景色
  background(204);
  // 显示“LAX”，
  // 位置坐标为 0, 40
  text("LAX", 0, 40);
  // 显示“LHR”，
  // 位置坐标为 0, 70
  text("LHR", 0, 70);
  // 显示“TXL”
  // 位置坐标为 0, 100
  text("TXL", 0, 100);
}

可以看出，这个例子与之前的例子类似，只有一处变了，那就是将creatFont()方法替换成了loadFont()。注意，使用loadFont()方法加载文件的时候，也是需要文件后缀名的。