2

注意：我知道我可以导入 .pde 文件，但我需要在屏幕上运行代码，所以我不会使用它。

我的三个以下尝试失败了。我不知道哪一个更接近实现，我不喜欢一个，只要它产生预期的结果。通过帮助我进行任何尝试/建议新尝试来感谢帮助。

第一次尝试） - 使用getText下面编写的函数，但是在生成的 jscode 变量中可以找到一些不是代码的文本，因此处理实例不起作用。

    function getText(n) { 
      var s = []; 
      function getStrings(n, s) { 
        var m; 
        if (n.nodeType == 3) { // TEXT_NODE 
          s.push(n.data); 
        } 
        else if (n.nodeType == 1) { // ELEMENT_NODE 
          for (m = n.firstChild; null != m; m = m.nextSibling) { 
            getStrings(m, s); 
          } 
        } 
      } 
      getStrings(n, s); 
      var result = s.join(" "); 
      return result; 
    } 
            var processingCode = getText(document.body)
    processingCode.replace(/<[^>]+>¦&[^;]+;/g,'').replace(/ {2,}/g,' ');
    var jsCode = Processing.compile(processingCode).sourceCode;
    alert(jsCode); 
    var canvas =  document.getElementById("mysketch");
    var processingInstance = new Processing(canvas, jsCode);

          ....

<span class="sketch">
    <canvas id="mysketch"></canvas>

</span>

第二次尝试）与上面相同，但添加了一个标签，id="all_processing_code"但无论如何都无法弄清楚如何获取文本。这不起作用：

    var processingCode = getText(document.getElementbyId(all_processing_code));

第三次尝试）删除了 getText 并尝试使用 JQuerytext()来隔离代码。虽然在混合 JS 和 Jquery 时遇到了麻烦。尝试了不同的东西，但没有奏效。什么是适当的混合方式？我应该使用什么脚本类型？这很令人困惑。

    <script type="text/jquery">
    var processingCode = $('#all_processing_code').text();
    //processingCode.replace(/<[^>]+>¦&[^;]+;/g,'').replace(/ {2,}/g,' ');
var jsCode = $.Processing.compile(processingCode).sourceCode;
alert(jsCode); 
var canvas =  $(#'mysketch');
var processingInstance = new $.Processing($('canvas'), $('jsCode'));

}
</script>
4

1 回答 1

0

首先，检查您的处理代码是否由带有 id 的 html 元素（如 div 或其他东西）包装。如果不是，请这样做！

举个例子：

<div id="mycode">
    void setup() {
        background(0);
    }
</div>

在此之后，检查您的代码中是否声明了 getProcessingSketchId() 函数。在 JavaScript 模式下处理 IDE 已经使用该函数导出 html 文件。如果没有，请在您的<head>:

<script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'yourcanvasid'; }
</script>

在使用 JQuery 之前，您可以在 html 中包含来自 google api 的 JQuery 包括这一行 ：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'yourcanvasid'; }
</script>

假设您想在页面刚刚加载时运行处理代码，只需将此代码附加到 getProcessingSketchId() 声明之后。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    // convenience function to get the id attribute of generated sketch html element
    function getProcessingSketchId () { return 'yourcanvasid'; }
    $(document).ready(function() {
        new Processing(getProcessingSketchId(), $('#mycode').html());
    });
</script>

您可以在任何其他<script type="text/javascript">.

最后，你会得到这样的东西：

<html>
    <head>
    <!-- Your title, meta tags, stylesheet and all other stuff here -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        // convenience function to get the id attribute of generated sketch html element
        function getProcessingSketchId () { return 'yourcanvasid'; }
        $(document).ready(function() {
            new Processing(getProcessingSketchId(), $('#mycode').html());
        });
    </script>
    </head>
        <body>
        <div id="mycode">
            void setup() {
                background(0);
            }
        </div>
   </body>
</html>
于 2013-01-20T01:48:13.790 回答