1

ボタンを押してアニメーションをオンにした後でロードしたかっpaperjsたのですが、ページのロード後に用紙をロードすると、ペーパースクリプトが機能しないようです。

コメントアウトしてsetTimeout直接コメントを$.getScript外すと、paperjsがを起動しalert('hi')ます。理解できません。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                $("#jq").text("jQuery is now loaded.")
                var lateLoad = function() {
                    $.getScript(paperUrl, function() {
                        $("#pp").text("Paperjs is now loaded.");
                    });
                };
                //setTimeout(lateLoad, 100);
                $.getScript(paperUrl, function() {
                    $("#pp").text("Paperjs is now loaded.");
                });
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>

Windows7x64でChrome23.0.1271.97mを使用しています。誰かがここで何が起こっているのか考えていますか？

4

3 に答える 3

3

私は回避策も考え出したと思います-paper.PaperScript.load()または詳しく説明します：

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function () {
                $("#jq").text("jQuery is now loaded.")
                var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
                var lateLoad = function() {
                    $.getScript(paper_url, function() { 
                        $("#pp").text("Paperjs is now loaded.");
                        paper.PaperScript.load(); // <-- The fix!
                    });
                };
                setTimeout(lateLoad, 1000);
                //$.getScript(paperUrl, function() {
                //    $("#pp").text("Paperjs is now loaded.");
                //});
            });
        </script>
    </head>
    <body>
        <script type="text/paperscript" canvas="myCanvas">
            $('body').css({"background-color": "#999"});
            alert('hi!');
        </script>
        <p id="jq">jQuery NOT loaded yet.</p>
        <p id="pp">Paperjs NOT loaded yet.</p>
    </body>
</html>

これにより、paperscriptはすべてのpaperscriptをスキャンします。githubリポジトリで「paperscript」をグーグルで検索しているときにhttps://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270で見つけました。動的にロードされたときに紙がそれ自体でload（）を実行しない理由はまだ説明されていませんが。

編集-私は何が悪かったのか理解しています。これはhttps://github.com/jquery/jquery/blob/master/src/core.js#L768に関連しています。これは、paperjsがウィンドウロードイベントがすでに発生しているかどうかをチェックしないためですdocument.readyState === "complete"。paperjsにプルリクエストを送信しましたhttps://github.com/paperjs/paper.js/pull/156

于 2013-01-01T21:20:45.900 に答える
0

require.jsを介してロードする方が簡単だと思います。必要なのは、require.configたとえばmain.jsで定義されたオブジェクトだけです。

requirejs.config({
    paths : {   
        'jquery' : "path/to/jquery"
        'paper' : "path/to/paper"
    },
    shim: {
        'jquery' : {
            exports: 'jQuery'
        },
        'paper' : {
            exports: 'paper'
        }
    }
});

属性を介して上記の設定でrequire.jsをロードする必要がありdata-mainます：

<script data-main="scripts/main.js" src="scripts/require.js"></script>

次に、ペーパーロジックが次のようになるモジュール（「paperStuff」など）を定義します。

define(['jquery', 'paper'], function($, paper) {
   // do some cool stuff
});

あなたがあなたのpaperStuffをロードしたいとき、あなたはただする

var paperStuff = require('paperStuff');
...
于 2013-01-01T12:37:11.980 に答える
0

ペーパースクリプトコードを外部ファイル（つまり、pstest.js）に移動し、lateLoadを次のように変更します。

var lateLoad = function() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js',
    function() {
      $("#pp").text("Paperjs is now loaded.");
      $.getScript("pstest.js");
    } )
}
于 2013-01-01T19:59:42.700 に答える