Processing-文本排版

亦凉 2021-05-12 11:55 843阅读 0赞

1、现实文本

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

![70][]

上面例子中，演示了显示文本的方法`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);
    }

![70 1][]

上述代码中，我们通过使用`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);
    }

![70 2][]

上述代码中，展示了文本对齐方法`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);
    }

![70 3][]

这个例子中，用到了`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);
    }

![70 4][]

通常情况下，我们很可能无法确定对方系统里是否安装了某个字体，这个时候，我们就不能确定所使用的字体名称是否已经存在于系统之中，如果使用了系统中没有的字体，那么程序运行肯定会出问题。怎么解决这个问题呢？为了解决这个问题，在项目目录下，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);
    }

![70 5][]

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

[70]: /images/20210511/45ceea656a2e4d2daa350cc24927fc52.png
[70 1]: /images/20210511/6c0049aabd1b4cc98bc3cfe57258087c.png
[70 2]: /images/20210511/09efeca436b44215ba576126b222f4c8.png
[70 3]: /images/20210511/9ca8d3da14804976b4456e5088b00144.png
[70 4]: /images/20210511/3f3cb1938a3c4c23b7b2fe84c7abdbb9.png
[70 5]: /images/20210511/522015e3f2fc4016b0dd8539f891dde9.png