Processing 基础 | 绘制文字

文章目录

概述

这篇文章大概介绍一下如何在Processing中绘制文字。
  

步骤

在Processing中绘制文字的很简单,主要有以下几个步骤:

第一步

声明一个类型为PFfont的对象。

PFont f;

第二步

创建一个字体。创建一个字体有如下两个方法。

  • 第一种方法是使用系统自带的字体,用createFont函数创建。该函数主要需要两个参数,第一个是字体的名字,第二个是字体的大小(createFont函数更多用法)。

同时可用通过PFont.list函数查看该系统可以使用的字体。

f = createFont("Georgia", 24); // 创建系统自带字体
println(PFont.list()); //获取所有系统可以使用的字体
  • 如果系统自带的字体不能满足大家,并且希望自己的代码在任何平台运行的效果都一样,那么就可以用第二种方法手动创建字体。

在Processing自带的开发环境中选择:工具->创建字体,打开如下的窗口。然后选择想要的字体,指定大小,文件名点击ok就行了。这个时候Processing开发环境会在当前项目的根目录下创建一个名叫data的文件件,然后里面有一个扩展名为.vlw的字体文件。
Processing 基础 | 绘制文字
接下来在setup函数中调用loadFont函数加载自己创建的字体文件。需要注意的是因为Processing从计算机内存里面加载字体文件,这个过程很慢,所以不建议在draw函数中多次调用loadFont函数。

f = loadFont("data/Serif-48.vlw");

第三步

用函数textFont规定使用字体,该函数接受两个参数。第一个参数是指定的字体类型,第二个参数是字体的大小。第二个参数是一个可选的参数,默认是加载字体本来的大小。

需要注意的是如果大家使用的是loadFont函数加载的字体,那么指定的字体大小和字体默认的大小不一致的话,可能导致绘制的文字质量不好,因为vlw格式的字体文件使用图片来展示每一个字母。但是如果大家使用的是createFont函数,就没有这个问题。

textFont(f, 36);

第四步

用fill函数指定使用颜色。

fill(0);

第五步

用text函数绘制字体,该函数接受三个参数。第一个参数是需要绘制的文字内容,第二个和第三个参数分别是这个文字的绘制位置的x和y坐标。

text("hello world", 10, 100);

  

相关方法

接下来介绍两个Processing中和绘制字体有关的函数。

textAlign

该函数用于指定字体的对齐方式,它只需要一个参数:CENTER、LEFT、RIGHT。大家可以通过下面这张图片来看一下这三种对齐方式的区别。
Processing 基础 | 绘制文字

textWidth

该函数计算并返回字符串或者字符的宽度。

String str = "hello world";
char c = 'A';
textWidth(str); // 64.78711
textWidth(c); // 8.289297

  

上一篇:java – 如何延迟处理项目?


下一篇:javascript – 如何使用Processing.js水平翻转图像?