[#1]Paper.jsを始めてみよう　-Paper.jsを動かしてみよう-

Paper.jsを動かしてみよう。

こんにちは。yokuneruです。

前回の[#0]Paper.jsを始めてみよう -Paper.jsとは何か-に引き続き、今回はPaper.jsを動かしてみたいと思います。

本編に入る前に、そもそも
『HTML、CSS、JavaScript、エディタってなんだ？』
『動くものを作りたいけど何から始めれば良いの？』

という方はドットインストールで「ウェブサイトを作ろう」「JavaScriptから始めるお手軽プログラミング」に触れてみてから本記事を読むことをおすすめします。（全て完了させる必要はないです。）

Paper.jsはHTML、CSS、JavaScriptの知識を前提に構築されています。

----以下、チュートリアルより意訳と追記----

Paper.jsを利用するには2つの方法があります。

最も簡単な方法はJavaScriptを拡張したPaperScriptを使用することです。もう１つとして、より高度なユーザーや大きなプロジェクトのためにJavaScriptを直接使用する方法があります。

PaperScriptとは

PaperScriptは通常のJavaScriptにPointおよびSizeオブジェクトに対する演算（+-*/%)のサポートを追加したものです。

PaperScriptは自動的に独自のスコープで実行され、グローバルスコープを汚染することなく、全てのグローバルブラウザオブジェクト（documentやwindow）にアクセスできます。

Scriptの設定

PaperScriptを使用する場合、他のJavaScript同様に<script>タグで読み込むことができますが、typeの設定をtype="text/paperscript"または"text/x-paperscript"とする必要があります。

PaperScriptは外部ファイル(src="")として読み込んでも、インラインで記述しても構いません。

まずはじめに、PaperScriptでシンプルな線を描画してみましょう。

以下のコードをエディタに貼り付け、実行してみてください。

*チュートリアルではダウンロードしたpaper.jsファイルを読み込んでいますが、本記事ではCDNを使用します。

working_with_paperjs_01.html

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Load the Paper.js library --> 
  <script type="text/javascript"  
src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.js"></script> 
  <!-- Define inlined PaperScript associate it with myCanvas --> 
  <script type="text/paperscript" canvas="myCanvas"> 
    // Create a Paper.js Path to draw a line into it: 
    var path = new Path(); 
    // Give the stroke a color 
    path.strokeColor = 'black'; 
    var start = new Point(100, 100); 
    // Move to start and draw a line from there 
    path.moveTo(start); 
    // Note the plus operator on Point objects. 
    // PaperScript does that for us, and much more! 
    path.lineTo(start + [ 100, -50 ]); 
  </script> 
</head> 
<body> 
  <canvas id="myCanvas" style="border: 0.5px solid black"></canvas> 
</body> 
</html>

このような線が表示されたら描画成功です。

*結果がわかりやすいようcanvasに枠線をつけています。

また、scriptを外部ファイルにして以下のように書き換えることも可能です。

working_with_paperjs_02.html

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Load the Paper.js library --> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.js"></script> 
  <!-- Load external PaperScript and associate it with myCanvas --> 
  <script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"> 
  </script> 
</head> 
<body> 
  <canvas id="myCanvas"></canvas> 
</body> 
</html>

PaperScriptの<script>タグで以下の属性を使用することができます。

src="URL": URLからPaperScriptを読み込みます。　
canvas="ID": 指定されたIDのcanvasにPaperScriptを紐付けし、ProjectオブジェクトとViewオブジェクトを作成します。

- 注意 -

1つのページ内に複数のPaperScriptが含まれる場合、それらのscriptは各々のスコープで実行され他のscriptには作用しません。PaperScriptを他のPaperScriptやJavascriptと相互作用させたい場合にはこちらのチュートリアルを参照してください。

canvasの設定

canvasタグに属性を加えることでPaper.jsにいくつかの設定をすることができます。

resize="true": resize属性によりcanvasの高さと幅をブラウザのウィンドウサイズに合わせることができます。また、以下のようにonResize関数ハンドラを使用することでウィンドウサイズが変更された際にviewをリサイズすることができます。

working_with_paperjs_03.html

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Load the Paper.js library --> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.js"></script> 
  <!-- Define inlined PaperScript associate it with myCanvas --> 
  <script type="text/paperscript" canvas="myCanvas"> 
    // Create a circle shaped path with its center at the center 
    // of the view and a radius of 30: 
    var path = new Path.Circle({ 
      center: view.center, 
      radius: 30, 
      strokeColor: 'black' 
    }); 
 
    function onResize(event) { 
    // Whenever the window is resized, recenter the path: 
    path.position = view.center; 
    } 
  </script> 
  <style media="screen"> 
    html, 
    body { 
      margin: 0; 
      overflow: hidden; 
      height: 100%; 
    } 
    /* Scale canvas with resize attribute to full size */ 
    canvas[resize] { 
    width: 100%; 
    height: 100%; 
    } 
  </style> 
</head> 
<body> 
  <canvas id="myCanvas" resize="true"></canvas> 
</body> 
</html>

このようにウィンドウの中央に円が表示されたら描画成功です。

ウィンドウサイズを変更しても円は中心に描かれます。

*ウィンドウサイズ調整のためcssも追記しています。

hidpi="off": デフォルトでは、Paper.jsはネイティブ解像度に合わせてHi-DPI(Retina)で図形を描画します。もし、メモリ使用量を減らしたりレンダリングパフォーマンスを向上させたい場合はcanvasタグにhidpi="off"を設定することでオフにすることができます。

「Paper.jsを動かしてみよう」は以上です。

続きはまた次回投稿します。

*チュートリアルに記載のあるkeepaliveモードについて理解が及ばなかったため、ご存知の方がいらっしゃいましたらコメント頂けると幸いです。

*Twitterもフォローして頂けると幸いです。

こちら→@yokuneru

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫