Oh!Coder

Coding Life

有趣的Processing-文本显示

| Comments

之前我们在学习文本排版的时候,顺带也介绍了文本如何显示。那次对文本显示的介绍,目的是为介绍排版。所以呢,上一次我们一起学习了String,这一次我们专门学习一下文本显示。嗯,是文本显示,它不是数据类型!它和String不一样,它只是一个文本显示的方法,方法名为text()

好!误解已排除!让我们言归正传。

基本显示

通常来说呢,当我们想打印一行字符串的时候,常用的方法是println()。这对于调试程序,临时打印结果差不多已经够了。但是对于正儿八经的展示文字,似乎就略显简陋了一些。为了弥补这一缺陷,Processing为我们提供了text()方法。围绕这个方法,Processing提供了一些列对于文本格式进行设置的辅助方法。好,接下来,简单让我们回顾一下这些方法。说是回顾,是因为其中的很多方法已经在前面的文本排版中学过了。

首先,声明一个PFont类型对象。

例如:PFont f

然后,通过createFont()方法,利用字体的名称,创建一个字体名称的引用变量。

例如:f = createFont("Arial", 16, true); 从左向右,第一个参数为字体类型的名称,第二个参数为字体的点数(point),第三个参数为开启反锯齿效果。

接着,使用textFont()方法,设置当前字体的使用类型。

例如:textFont(f, 36);从左向右,第一个参数为字体类型对象,第二个参数为字体大小。

再次,设置字体的填充色。

例如:fill(255);此处设置字体的填充色为白色。

最后,调用text("Hello Text!", 10, 100);显示最终的文本。

好!我们将上面5个步骤连起来,演示一下完整的代码。

首先,还是新建一个项目窗口。

processing-new-window

图片来源:Processing新项目窗口

然后,将下面代码填入其中。

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
// 声明字体对象
PFont f;
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup() {
  // 设置窗口大小
  size(200, 200);
  // 创建具体的字体变量
  // 从左向右,参数依次为:
  // 字体名称,字体点数(point),开启反锯齿效果
  f = createFont("Arial", 16, true);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置窗口背景色
  background(255);
  // 设置当前使用的字体以及字体大小
  // 从左向右,第一个参数为字体,
  // 第二个参数为字体大小。
  textFont(f, 16);
  // 设置字体的填充色为黑色
  fill(0);
  // 显示文本
  // 从左向右,第一个参数为文本内容,
  // 第二个和第三个是文本显示的起始坐标,
  // 默认文本的起始点为最左边。
  text("Hello Text!", 10, 100);
}

注意,上例中,文本颜色的设置为黑色,与上述步骤中的白色已不一样。

processing-window-menu

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

点击项目窗口上的三角形按钮,编译并运行程序。如果一切正常,显示结果,大致如下:

processing-fun-text-1

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

上面呢,就是文本显示的一些基本步骤。

学习完了基本显示,让我们分主题进一步做相应的学习。

文本动画

进一步学习之前,我们先来回顾两个相关方法,一个是textAlign,另一个是textWidth。这两个方法曾经都在文本排版有过介绍,前一个是设置文本显示的起始点,其中包括三种状态,分别为LEFTCENTER以及RIGHT,所谓LEFT是以文本的左边为坐标点开始显示,CENTER是以文本的中心为坐标点,RIGHT是以文本的右边为坐标点开始显示。这三种设置,针对的都是文本显示的x坐标值而言。后一个方法,顾名思义,是用来计算当前文本整体宽度的。

那接下来,让我们具体看一看,如何让文本动起来吧!

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

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 定义字符串数组。
// 此处字符串数组包含两个单个字符串。
String[] headlines = {
  "First string record.",
  "Second string record.",
  };
// 全局字体类型变量
PFont f;
// 字符串数组的横向坐标
float x;
// 字符串数组索引
int index = 0;
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup() {
  // 初始化窗口大小
  size(400, 200);
  // 创建16号大小Arial字体,启用反锯齿效果。
  f = createFont("Arial", 16, true);
  // 初始化字符串数组相对于屏幕右侧的偏移数值
  x = width;
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置窗口背景色为白色
  background(255);
  // 设置字体填充色为黑色
  fill(0);
  // 设置当前使用字体,其大小并设置为16
  textFont(f, 16);
  // 设置文本的起始点为左侧
  textAlign(LEFT);
  // 显示字符串数组,
  // 其横向坐标设置成x数值进行滚动。
  text(headlines[index], x, 180);
  // 每次循环,
  // 将x数值减3
  x = x - 3;
  // 获取字符串数组中单个字符串的长度
  float w = textWidth(headlines[index]);
  // 如果字符数组中单个字符串完全移出屏幕,
  // 那么切换到下一个单个字符串进行显示,
  // 如此反复。
  if (x < -w) {
    // 将x数值重新赋值屏幕宽度
    x = width;
    // 计算下一个字符串数组索引值
    index = (index + 1) % headlines.length;
  }
}

点击项目窗口中的三角形按钮,编译并运行程序。如果一切顺利,运行结果类似如下图所示。

processing-fun-text-2.jpg

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

这个例子的最终效果,其实就是一个滚动的显示牌,里用到了两个之前学过的方法,为了加深印象,上面我们也重新回顾了其用法。除此之外,这个例子中还用涉及到了字符串数组,延伸开来,其实涉及到了数组的概念。下一次,我们将会深入学习一下Processing中的数组。

好!言归正传。上面讲到了文本动画,那么接下来我们讲一讲文本旋转的例子。

文本旋转

具体来说,还是先创建一个新的项目窗口,向其中填入如下代码:

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
35
36
37
38
39
// 定义字体类型
PFont f;
// 定义要显示的字符串
String message = "this text is spinning";
// 定义旋转角度,单位为弧度
float theta;
// 环境初始化。
// 此方法在软件启动时,被系统调用一次。
void setup() {
  // 设定窗口大小
  size(200, 200);
  // 创建具体字体。
  // 类型为Arial,大小为20,开启反锯齿效果
  f = createFont("Arial", 20, true);
}
// 画图。
// 此方法被系统默认循环调用。
void draw() {
  // 设置背景色
  background(255);
  // 字体填充色为黑色
  fill(0);
  // 设定当前使用字体类型
  textFont(f);
  // 将坐标系原点移到窗口中心
  translate(width/2, height/2);
  // 设置旋转角度
  rotate(theta);
  // 设置文本对齐类型
  textAlign(CENTER);
  // 显示文本。
  // 显示坐标设置为 0, 0
  // 由于上面translate()方法
  // 已将坐标系原点移到窗口中心,
  // 所以此处的 0, 0 点即为窗口中心
  text(message, 0, 0);
  // 增加弧度值
  theta += 0.05;
}

点击窗口菜单栏的三角形按钮,编译并运行其代码。如果一切顺利,显示结果大概如下图所示。

processing-fun-text-3

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

上述例子中,又出现了两个新面孔,一个是translate(),另一个是rotate()。这两个方法改变的是整个坐标系,例子中之所以把message的显示位置设为原点(0, 0),但显示位置却在窗口中央,也是因为调用了translate()方法。同理,本质上,rotate()旋转的也是坐标系,message是随着坐标系的旋转而旋转的。这两个方法涉及到Processing的2D动画,以后我们还会专门的进一步学习,这里先做简单的了解。

总结

好啦!关于文本显示,基本的就是这些。最基本的,包括开始提到的五个显示步骤。然后,列举了两个额外的例子,分别演示了文本显示的动画和旋转。整体来说,利用的还是文本显示的几个基本方法。只是在演示旋转例子的时候,涉及到了tranlste()rotate()两个方法,这两个方法属于2D动画里的基础方法,后面我们在学习Processing的2D动画的时候会深入学习!

下期预告

这次的学习中,我们遇到了字符串数组的概念。对于Processing中的数组,我们还没有正儿八经的学习过,下一次呢,我们就详细学习一下,Processing中的数组。

Comments