Oh!Coder

Coding Life

有趣的Processing-文本排版

| Comments

Hi!这次我们将进一步学习Processing当中的文本排版。其中包括了字体的设置,文本间的段落设置等等。好!废话不多说,下面直接让我们进入正题!

显示文本

其实,在前面的几次学习中,我们已经简单了解了如何显示文本,为了更好学习接下来的内容,我们先来做个简单的回顾。

首先,新建一个Processing的项目窗口,

processing-new-window

图片来源:Processing新项目窗口

将如下代码填入新建的项目窗口中:

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

完成之后,点击窗口菜单栏中的三角形按钮,编译并运行代码,如下图所示。

processing-window-menu

图片来源:Processing新项目窗口中的菜单栏

运行效果如下:

processing-fun-typography-1

图片来源:Processing程序执行结果

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

文本行间距

下面,先演示行文本的间距设置。首先,先创建一个新的项目窗口。

然后,向其中填入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
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);
}

运行上述代码,结果如下图所示。

processing-fun-typography-2

图片来源:Processing程序执行结果

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

文本纵向对齐

接下来,我们演示如何设置纵向对齐。首先,还是新建一个项目窗口。向其中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
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);
}

运行上述代码,结果如下图所示。

processing-fun-typography-3

图片来源:Processing程序执行结果

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

获取文本长度

下面对于获取文本长度的方法textSize()做一个演示。

首先,还是先创建一个新的项目窗口。然后向其中添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
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);
}

运行上述的代码,结果大致如下图所示。

processing-fun-typography-4

图片来源:Processing程序执行结果

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

字体

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

矢量字体

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

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

运行上述代码,可以打印出系统此时已经安装了哪些可用字体的名称,根据字体名称,我们可以使用这些字体。下面我们还是以例子来演示说明具体的代码应该是怎样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 定义字体类型变量
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-fun-typography-5

图片来源:Processing程序执行结果

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

像素字体

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

我们还是以例子来具体说明。首先,还是先创建一个新的项目窗口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 定义字体类型变量
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);
}

编译并运行这段代码,显示结果大致如下图所示:

processing-fun-typography-6

图片来源:Processing程序执行结果

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

总结

至此,我们对Processing的字体排版有了一个初步的了解。回顾一下这次我们都学了啥,总的来说,分为两大部分,第一部分是设置文本排版的一些属性,比如行间距,纵向字体间距等等。第二部分是字体,分为两种字体,一种是矢量字体(Vector Fonts),另一种是像素字体(Pixel Fonts)。

下期预告

这次我们主要学的是文本排版相关的一些设置。接下来的两次学习,我们将继续学习Processing中的字符串和文本。

Comments