2

注: .pde ファイルをインポートできることはわかっていますが、画面上でコードを実行する必要があるため、これは使用しません。

次の 3 回の試みは失敗しました。どちらが達成に近かったかはわかりませんし、望ましい結果が得られる限り、どちらも好みません。試みのいずれかを機能させたり、新しい試みを提案したりするのを手伝ってくれて、助けに感謝します。

1ST ATTEMPT) -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>

2回目の試行) 上記と同じですが、タグを追加しましたid="all_processing_code"が、テキストを取得する方法がわかりませんでした。これはうまくいきませんでした：

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

3RD ATTEMPT) getText を削除し、JQuery を使用text()してコードを分離しようとしました。ただし、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 に答える