从processing迁移到processing.js

发布于 2024-12-13 05:45:08 字数 543 浏览 0 评论 0原文

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

你好.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>

原文

I am having troubles while migrating my processing code to processing.js. My processing code contains jars, images, fonts in data folder, I want to use same pde files that i have created in processing while migrating to processing.js. Processing.js tutorial shows how to include .pde files in web page but does not tell anything about Where to mention about images or jars in data folder in your web page. Also @preload for image is also not working.

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南城追梦 2024-12-20 05:45:08

快速迁移策略：

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

回复收藏 0 原文

一桥轻雨一伞开 2024-12-20 05:45:08

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

看看

回复收藏 0 原文

痴梦一场 2024-12-20 05:45:08

处理js将处理与处理Java不同的字体。在处理过程中，Java 字体是从您的机器中提取的。太看到你的字体列表运行这个。

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

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

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

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

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

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-自定义字体/

Processing js will handle fonts different to Processing Java. In Processing Java fonts are pulled from your machine. Too see a list of your fonts run this.

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

As a designer I like to use custom fonts that not everyone will have installed. Because of this, you will need to upload a version of the font to your server so all users will have the same experience on the web.

First add this to the top of your sketch and add your font to the data folder. Depending on your project setup you might need to add it in the top of your directory.

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

Next, in your setup reference the font. ( This is where i had a few problems ) I was loading lineto-brown-pro-bold.ttf and had to reference it under Brown even tho in my fontlist it was Brown-bold. Add this line to your setup.

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

and in your draw use

textFont(font_name);

So the code all together is

    /* @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);
    }

For more information check out the processing.js docs http://processingjs.org/reference/font/
and also a good example and write up on http://alsoko.net/processing.js-custom-fonts/

回复收藏 0 原文

~没有更多了~