2011-11-01 50 views
1

我在将处理代码迁移到processing.js时遇到麻烦。我的处理代码包含数据文件夹中的jar,图像,字体,我想使用我在处理中创建的同一个pde文件,同时迁移到processing.js。 Processing.js教程展示了如何在网页中包含.pde文件,但并未告诉任何关于何处提及网页中数据文件夹中的图像或罐子的信息。另外@preload for image也不起作用。从处理迁移到processing.js

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> 

回答

2

快速迁移策略:

  • 移动所有的图片到同一个文件夹草图
  • 你.vlw字体不会与Processing.js工作,所以你需要改变.ttf字体
  • 正如George所说,罐子不适用于Processing.js,因此您需要编写草图以不使用它们,或将它们移植到本地JavaScript
  • @preload图像取决于正确性路径,我猜他们是不正确的,除非你把图像移出数据文件夹
0

你要明白,Processing.js是的JavaScript端口或处理语言,因为JavaScript是不一样的Java,你不会能够使用带有Processing.js的.jar库,除非您编写/查找库的端口到JavaScript。

查看this answer了解更多详情。

0

处理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); 
    } 

欲了解更多信息,请查阅处理。js文档http://processingjs.org/reference/font/ 也是一个很好的例子,写在http://alsoko.net/processing.js-custom-fonts/