2

私は paper.js から始めています。範囲内で実行される te​​xt/paperscript MIME タイプのスクリプトを持つ可能性が導入されるという事実が気に入っています。ただし、スクリプトはすぐに大きくなる可能性があるため、読みやすくするために複数のスクリプトに分割できるようにしたいと考えています。複数の script タグを追加して、それらをすべて同じスコープで実行できると思っていましたが、明らかにそうではありません。

両方のスクリプトが読み込まれ、実行されますが、2 番目のスクリプトはペーパー スコープに含まれていないようです。

ここに例を設定しました: http://barbata.nl/SO/Maps/この例にはいくつかのコードがありますが、重要な部分を指摘します。

2 つのペーパースクリプトが含まれています。

  • Maps.js はメイン スクリプトで、画像をラスタライズして移動できるようにします。このスクリプトのコードは、今のところ問題なく動作するため、無視してかまいません。

  • Zoom.js は、ズーム機能を分離したかったスクリプトです。Paper.js にはそのイベントがないように見えるため、jq.mobi を使用してマウスのスクロール ホイールをキャプチャします。次に、Paper と同様の方法で、onMouseScroll の呼び出しに変換します。

ここまでは順調ですね。実際の問題は、zoom.jsのzoomInおよび関数で発生します。zoomOut

明示的に用紙オブジェクトを使用して、ズームしたいビューを参照すると機能します。

function zoomIn()
{
  if (paper.view.zoom < 2)
  {
    paper.view.zoom = paper.view.zoom * 2;
  }
}

しかしpaper、ビューを削除して参照すると失敗します。

function zoomIn()
{
  if (view.zoom < 2)
  {
    view.zoom = view.zoom * 2;
  }
}

スクリプトは Paperscope で実行される Paperscript であると予想していたので、これには驚きました。このコードを Maps.js に入れると問題なく動作するため、Paper.js によって zoom.js が読み込まれますが (ブラウザーの開発者ツールでこれが確認されます)、Paperscope では実行されないようです。

私の質問は次のとおりです。私の調査結果は正しいですか? 私は何か間違ったことをしていますか？読みやすくするために Paper.js アプリケーションを複数のユニットに分割する正しい方法は何ですか?

もちろん、実行することはできますが、正しく実行できるようにしたいと考えています。

4

2 に答える 2

1

これは実際にどのように機能するかです。GitHub でイシューをオープンしました

于 2012-12-27T11:04:40.873 に答える
0

「最もクリーンな」方法は、this.install(window) を使用することです。また、「paperscript」よりも java-script の行エラーに関する報告に適しているため、Chrome 開発者ツールでのエラーの検出が容易になります。

index.html 内 (例):

<script type="text/javascript" src='js/other_lib.js'></script>

<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
    <canvas id="canvas" width="1500" height="500"></canvas>
</body>

次に、js/other_lib.js に通常どおりコードを追加します。

var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/

これにより、長方形が生成されます。

私にとってうまくいかないのは (Paper.js v0.10.2 リリース日: 2016 年 7 月 9 日現在)、オブジェクト演算子です。私のためにvecrotsを追加するなどpointc = pointa + pointb;、これは多くの NaN 値を与えています。これを機能させるには、いくつかのライブラリを編集する必要がありましたが、変更は簡単です。

var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);

于 2016-12-20T08:45:07.367 に答える