futoase

よろしくお願いします。

俺 AdventCalendar 10日目

paper.jsを触る

paper.jsとは

  • ベクターイメージを作成(canvasを利用して)するためのライブラリ
  • (aboutに書いてあることだが) Adobe Ilustrator, Adobe Photoshopの画像合成モードに対応している
ようは
  • 気軽にベクターイメージを作成するためのライブラリ

paper.jsを使ってみよう

注意点

  • githubでコードの管理をしているが、master branchしかない。tagがない。配布されているzipファイルなどバージョン管理されているようなのだが… git log --until=2011-11-11 など、リリースした日付からlogを検索し、適当なコミットハッシュを選択してgit reset HASHをしましょう。
  • build/build.shを実行してjsファイル(paper.js)を作成するが、node.jsが必要なので適宜入れましょう
  • git log --until=2011-11-11

  • git reset fbeb239a

今回は面倒なので

線を描画してみる

  • index.html を作成します。
  • paper.jsはindex.htmlと同じディレクトリに置いてください。
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="paper.js"></script>
    <script type="text/paperscript" canvas="myCanvas">
      var path = new Path();
      path.strokeColor = 'black';
      var start = new Point(100, 100);
      path.moveTo(start);
      path.lineTo(start + [100, -50]);
    </script>
  </head>
  <body>
    <canvas id="myCanvas" resize></canvas>
  </body>
</html>
  1. Pathオブジェクトを生成
  2. 描画色を黒に指定
  3. Pointオブジェクトを生成
  4. 描画開始位置として先ほど作成したPointオブジェクトを渡す
  5. lineToメソッドにより描画終了地点を指定する(具体的にはここにある通り、SegmentというPathオブジェクトの状態を管理するオブジェクトのインスタンスを操作します)

実行結果


線が座標指定の通り、左下から右上に(x,y)描画されています。

円の描画

  • index2.htmlを作成する
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="paper.js/lib/paper.js"></script>
    <script type="text/paperscript" canvas="myCanvas">
      var circle = new Path.Circle(new Point(100, 100), 30);
      circle.fillColor = 'blue';
    </script>
  </head>
  <body>
    <canvas id="myCanvas" resize></canvas>
  </body>
</html>
  • Path.Circleにより円を作成する
  • circle.fillColor により描画色を設定する

実行結果

  • まあ順当

何が作れるのか

  • examples以下にあって、気になったものがGames/Paperoids.htmlで、キーイベントが取れるので、ベクターイメージベースのものであればゲームも作れるようだ。

結論

  • もうちょいドキュメント読まないとわからない
  • githubでのコード管理、良いんだけどtagきって欲しい

Copyright (c) 2013-2017 Keiji Matsuzaki