2009-09-12 1 views
1

나는 HTML5와 Processing.js를 탐색 중이다.Processing.js 함수를 HTML에서 호출하는 방법은 무엇입니까?

사용자가 내 웹 페이지에서 이미지를 클릭하면 Processing.js 코드에서 함수를 호출하고 싶습니다. 이 간단한 예와 같이 그냥 작동하지 않는 경우, onclick에서 함수를 호출 :

 
<html> 
    <head> 
    <script language="javascript" src="processing.init.js"></script> 
    <script language="javascript" src="processing.js"></script> 
    </head> 
    <body> 
    <script type="application/processing"> 
    void restart() 
    { /* does something */ } 
    </script><canvas> 
     You'll need a browser that supports HTML5 to see this content. 
    </canvas><br/><br/> 
    <img src="restart-image.png" onclick="restart()"> 
    </body> 
</html> 

이미지를 클릭했을 때 나는 Processing.js 스크립트에서 메서드를 호출 할 수있는 방법에 대한 생각은? (어쩌면 img onclick을 사용하여 기본적인 HTML 실수를하고 있습니까?)

+0

으로 페이지에 링크 된 코드를 가져 오는 방법을 알고 싶습니다. – mcandre

답변

0

나는 img 태그에서 onclick에 대한 javascript를 가져 와서 시작합니다.

은 별도의 자바 스크립트 파일에서, 당신은 할 수 있습니다
document.getElementById('restartimage').onclick = function() { Processing.setup(); } 

가 분명히 나는 ​​당신의 IMG 태그에 id 속성을 넣어.

나는이 페이지에서 눈치 설정 기능 : http://processingjs.org/

기본적인 아이디어는 온 클릭 자바 스크립트 파일로 당겨 무엇을해야하는지 코드를 쉽게 될 것입니다.

+0

이 시도했지만 내 오류 콘솔에서 "document.getElementById ('restartimage') null입니다."참조하십시오. 내 img 태그에 ID 속성을 올바르게 추가 했습니까?

+0

이 페이지가 렌더링 된 후에 자바 스크립트가 실행되지만 ID 태그가 올바르게 나열되었는지 확인하십시오. 희망 태그 ()도 있습니다. –

0

스크립트 유형을 text/javascript 또는 application/javascript로 먼저 변경해야합니다.

'restart()'기능 앞에 'function'을 입력하여 'void'를 줄입니다.

난 우분투 9.04에 파이어 폭스 3.0.14를 사용했습니다.

+0

실제로 HTML5에서는 기본값이 text/javascript이므로 스크립트 태그에는 형식이나 언어가 필요하지 않습니다. –

+0

시도했지만 Processing.js 코드가 실행되지 않았습니다. –

+0

다음과 같이 테스트했습니다. HTML 파일 : 당신은이 내용을 보려면 HTML5를 지원하는 브라우저가 필요합니다

JS 파일 :. 기능을 다시 시작() {/ * 무언가를 */ 알림 ('hello'); } – Sadat

0

Processing js 객체의 getInstanceById 함수를 사용하여 처리 함수를 호출 할 수 있습니다.

$(window).resize(function(){ 
    var p=Processing.getInstanceById('processing_canvas_id'); 
    p.resize($("#main").width(),$("#main").height()); 
    }); 

과 관련된 처리 파일 안에 내 처리 기능입니다 크기를 조정

을 processing_canvas_id : 여기 예를 들어

는 기능입니다.

0

이미지가 앵커 태그 안에 포함되도록하십시오. <a> image </a> href 태그를 사용하여 함수를 호출하십시오.

<a href="javascript:restart()"> image source </a>