从 processing 迁移到 processing.js答案

【问题标题】：migrating from processing to processing.js从 processing 迁移到 processing.js
【发布时间】：2011-11-01 11:49:46
【问题描述】：

我在将处理代码迁移到 processing.js 时遇到问题。我的处理代码在数据文件夹中包含 jar、图像、字体，我想使用在迁移到 processing.js 时在处理中创建的相同 pde 文件。 Processing.js 教程展示了如何在网页中包含 .pde 文件，但没有说明在何处提及网页数据文件夹中的图像或 jars。图像的@preload 也不起作用。

hello.html -->

<html>
<title>Hello Web - Processing.js Test</title>  
<script src="processing-1.3.6.js"></script>  
<p>  Processing.js Test</p>  
<canvas data-processing-sources="hello/hello.pde"></canvas>  
</html>

【问题讨论】：

标签： image processing processing.js

【解决方案1】：

快速迁移策略：

将所有图像移动到与草图相同的文件夹中
您的 .vlw 字体不适用于 Processing.js，因此您需要更改为 .ttf 字体
正如 George 所说，jar 不适用于 Processing.js，因此您需要对您的草图进行编码以不使用它们，或者将它们移植到本机 JavaScript
图像的@preload 取决于正确的路径，我猜除非您将图像移出数据文件夹，否则它们是不正确的

【讨论】：

【解决方案2】：

您需要了解 Processing.js 是 JavaScript 端口 或 Processing 语言，并且由于 JavaScript 与 Java 不同，您将无法将 .jar 库与 Processing 一起使用.js 除非您将库的端口写入/查找到 JavaScript。

查看this answer了解更多详情。

【讨论】：

【解决方案3】：

Processing js 将处理与 Processing Java 不同的字体。在处理 Java 字体是从您的机器中提取的。也可以看到你的字体列表运行这个。

size(200, 200);
String[] fontList = PFont.list();
printArray(fontList);

作为一名设计师，我喜欢使用并非每个人都会安装的自定义字体。因此，您需要将字体版本上传到您的服务器，以便所有用户在网络上拥有相同的体验。

首先将其添加到草图顶部，然后将字体添加到数据文件夹。根据您的项目设置，您可能需要将其添加到目录顶部。

/* @pjs
crisp=true;
font=/yourfont.ttf;
*/

接下来，在您的设置中引用字体。（这是我遇到一些问题的地方）我正在加载lineto-brown-pro-bold.ttf，并且必须在Brown 下引用它，即使在我的字体列表中它是Brown-bold。将此行添加到您的设置中。

font_name = createFont("/yourfont.ttf", 32);

在你的抽奖中使用

textFont(font_name);

所以代码加在一起就是

    /* @pjs
    crisp=true;
    font=/yourfont.ttf;
    */

    PFont font_name;
    void setup() {
    size (200, 330);
    background (34);
    font_name = createFont("/yourfont", 32);
    smooth();
    }

    void draw() {
    background (34);
    textFont(font_name);
    textSize(100);
    fill(255);
    text ("futura in pjs", 20, 310);
    }

有关更多信息，请查看 processing.js 文档http://processingjs.org/reference/font/ 也是一个很好的例子，写在http://alsoko.net/processing.js-custom-fonts/

【讨论】：