Question

将草图附加到动态创建的div中时出现问题。以下代码有效：

<div id="column_1" y='1' class="column"> </div>
<div id="column_2" y='2' class="column"></div>  
<div id="column_3" y='3' class="column">
    <canvas id="cube" data-processing-sources="/processing/rotating_cube.pde" width="240" height="240">
    </canvas>
    <p>something</p>
</div>

然而，不是那个：

$('#test4').click(function(){
    alert("test4");
    $('#column_3').append( 
        '<canvas id="cube" data-processing-sources="/processing/rotating_cube.pde" width="240" height="240">' +
        '</canvas>' +
        '<p>something</p>'
    );
});

我正在使用nodejs webserver和processing.js

任何指针都将受到赞赏

扬

Answer 1

更多信息：

所有示例都显示如何在页面加载时实例化/创建草图，但我需要在以后动态创建它。我尝试了另一种方法：

   // checking if we need to create a canvas for Processing     
    var sensor_type = sensorID.substr((sensorID.indexOf('_')+1),sensorID.length);
    //alert(sensor_type);
    if(sensor_type === 'X')
      {
        //alert('it is X');
        $("#"+sensorID+"P").append( 
        // canvas container
        '<div id="' + canvasdiv + '" >' +
        //'<canvas id="cube" data-processing-sources="/processing/rotating_cube.pde" width="240" height="240">' +
        '<canvas id="cube" data-processing-sources="/processing/rotating_cube.pde" style="border: 1px solid black" width="240" height="240">' +
        '</canvas>' + 
        '</div>');


// AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
// creating a processing instance based on http://ben1amin.wordpress.com/2011/03/27/initializing-a-processing-sketch-using-a-canvas-tag-and-javascript/ 

var processingCode = ('import processing.opengl.*;' + '\n' +
'float inc = 0.01;' + '\n' + 
'void setup()' + '\n' + 
'{' + '\n' +
' noStroke();' + '\n' +
'  size(240, 240, OPENGL);' + '\n' +
'}' + '\n' +
'void draw()' + '\n' +
'{' + '\n' +
'  background(#1B9Ff0);' + '\n' +
'  lights();' + '\n' +
'  inc +=0.01;' + '\n' +
'  pushMatrix();' + '\n' +
'  translate(width/2, height/2);' + '\n' +
'  rotateX(inc);' + '\n' +
'  rotateY(inc);' + '\n' +
'  box(120, 50, 20);' + '\n' +
'  popMatrix();' + '\n' +
'}' + '\n');

var jsCode = Processing.compile(processingCode).sourceCode;


  Processing("cube", jsCode);


// end of creating a processing instance
// ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ        
      };

以上代码在函数var jsCode = Processing.compile ....

上失败

仍然需要帮助。感谢

扬

如何将处理草图附加到div中？

1 个答案: