load processing.js 사용자가 클릭하면 아약스가있는 스케치

Question

click시 ajax로 processing.js 스케치를로드하려고하는데 작동하지 않습니다. 스케치를 즉시로드 할 수 있지만 사용자 상호 작용에는 적용되지 않습니다. 나는 또한 '데이터 처리 - 소스'와 'DATASRC'속성에 노력했습니다

$('#clicker').click(function(){ 
    var canvasRef = $('<canvas/>'); 
    canvasRef.attr('data-src','/uploads/processing_js/anything_1.pde'); 
    $('#loader').append(canvasRef); 
}); 

: 여기에 내 코드입니다.

왜이 기능이 작동하지 않는지 알 수 있습니다.

Answer 1

DOMContentLoaded의 data-processing-sources 속성 만 검사합니다. 그 후 처리 스케치를로드하려면, 당신은 Processing.js 스케치로드하기 위해 내부적으로 사용하는 것 인 Processing.loadSketchFromSources을 사용할 수 있습니다 :이 작동

$('#clicker').click(function(){ 
    var canvasRef = document.createElement('canvas'); 
    var p = Processing.loadSketchFromSources(canvasRef, ['/uploads/processing_js/anything_1.pde']); 
    $('#loader').append(canvasRef); 
});