2011-11-01 86 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/