2011-11-01 2 views
1

처리 코드를 processing.js로 마이그레이션하는 중 문제가 발생합니다. 내 처리 코드에는 jar, 이미지, 데이터 폴더의 글꼴이 포함되어 있습니다. processing.js로 마이그레이션하는 동안 처리 한 내용과 동일한 pde 파일을 사용하고 싶습니다. Processing.js 튜토리얼에서는 .pde 파일을 웹 페이지에 포함시키는 방법을 보여 주지만 웹 페이지의 데이터 폴더에있는 이미지 나 jar에 대해 언급 할 내용은 없습니다. 또한 이미지의 @preload도 작동하지 않습니다.처리에서 처리 .js로 이전

hello.html ->

당신은 자바 스크립트는 자바와 동일하지 않기 때문에 Processing.js는 자바 스크립트 포트 또는 처리 언어, 그리고 이해하는 것이 필요
<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가 말한 것처럼 jar는 Processing.js에서 작동하지 않으므로 스케치를 사용하지 않거나 기본 JavaScript로 포팅해야합니다.
  • 이미지의 @preload는 올바른지 여부에 따라 다릅니다. 경로, 그리고 당신이 데이터 폴더 밖으로 이미지를 이동하지 않으면 그들이 옳지 않아 것 같아요
0

, 당신은하지 않습니다 자바 스크립트에 라이브러리의 포트를 쓰거나 찾지 않으면 Processing.js에서 .jar 라이브러리를 사용할 수 있어야합니다.

자세한 내용은 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 docs http://processingjs.org/reference/font/ 또한 좋은 예이며 다음을 작성하십시오. http://alsoko.net/processing.js-custom-fonts/