paper.jsでレスポンシブな図形を描く

Paper.jsはcanvasに図形を簡単に書けるライブラリです。

レスポンシブにする方法はググると出てくるんですが、図形ごとにpositionとscaleを変えるなど、どう考えても見通しが悪いものしか出てきません。（ググり方が悪いのかも）

layerにscaleをかけるだけでうまくいったのでここで紹介します。

以下はpaperscriptの中です。viewはcanvasを指定しているところで自動的にオブジェクトが入ります。

var original_size = {width: 640, height: 640};
var last_ratio = 1.0;
view.onResize = function(event) {
  var ratio = $('#can').innerWidth()/original_size.width;
  project.activeLayer.scale(ratio/last_ratio, new Point(0,0));
  last_ratio = ratio;
}

また、下はHTMLです。resizeの指定が必要です。

<div id="can">
  <canvas id="myCanvas" width="640" height="640" resize></canvas>
</div>

ポイントは、project.activeLayer.scale(ratio/last_ratio, new Point(0,0));
の部分です。第１引数は比率を、第２引数はどこを起点に拡縮するかを定義します。
scaleは破壊的操作なので、リサイズ中常にratio/last_ratio 倍することで前フレームの影響を打ち消せます。
また、第２引数を指定しないとデフォルトが中心となり上手くいかないため、左上を基準にします。