переход с обработки на processing.js - PullRequest
Новая
       18

переход с обработки на processing.js

1 голос
/ 01 ноября 2011

У меня проблемы при переносе кода обработки в processing.js. Мой код обработки содержит баночки, изображения, шрифты в папке данных, я хочу использовать те же файлы pde, которые я создал при обработке при переносе в processing.js. В учебном руководстве Processing.js показано, как включить файлы .pde на веб-страницу, но ничего не сказано о том, где упомянуть об изображениях или банках в папке данных на вашей веб-странице. Также @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>

Ответы [ 3 ]

2 голосов
/ 02 ноября 2011

Стратегия быстрой миграции:

  • Переместите все ваши изображения в ту же папку, что и ваш эскиз
  • Ваши шрифты .vlw не будут работать с Processing.js, поэтому вы 'Вам нужно будет изменить на .ttf шрифты
  • Как сказал Джордж, файлы jar не работают с Processing.js, поэтому вам придется кодировать эскиз, чтобы они не использовались, или переносить их на собственный JavaScript
  • @ предварительная загрузка изображений зависит от правильных путей, и я предполагаю, что они неверны, если вы не переместите изображения из папки данных
0 голосов
/ 03 марта 2017

Обработка js будет обрабатывать шрифты, отличающиеся от обработки 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/

0 голосов
/ 02 ноября 2011

Вы должны понимать, что Processing.js - это порт JavaScript или язык обработки, и поскольку JavaScript не совпадает с Java, вы не сможете использовать библиотеки .jar с Processing.js, если вы не пишете / не находите порты библиотек для JavaScript.

Посмотрите этот ответ для получения более подробной информации.

...