はてなブログでpaper.jsのテスト8(Raster)
canvas
画像表示のテスト。ほぼチュートリアルのまま。
http://paperjs.org/tutorials/images/working-with-rasters/
(いつもはリファレンスを参考。今回はリファレンスにrasterの使い方が載っていなかった。)
アイコンの中心にマウスを近づけていくと回転が早くなる。
ソース
var raster = new Raster("test8_icon"); raster.position = view.center; raster.scale(0.5); raster.rotate(45); var mouse = view.center; function onFrame( ){ var distance = view.center.getDistance(mouse); raster.rotate(200/(distance+0.1)); } function onMouseMove(event ){ mouse = event.point; }
メモ
画像paper.jsで使うためには、paperscriptが読み込まれる前にimgタグで読み込む、それとidをつける。(読み込む方法はimgタグによるものでなくてもいいのかもしれない。)
また、paperscirptが読み込まれるタイミングは、おそらく画面が全て読み込まれたあとなので、書く場所はそんなに気にしなくて良いはず。
imgタグで読み込んだ際の大きさはpaperscirptで表示する際は関係無さそうだ。imgタグをオリジナルの縦横比から変えても、paperscriptの画像の大きさに影響しなかった。直接画像を表示しないなら、大きさはあまり気にしなくてもいいが、オリジナルと同じサイズで読み込んだほうが些細な事だが余計な計算が少ない……はず。
Rasetr( id )で指定したらidが存在しない場合、canvasは真っ白。
Raster( id )で指定したidは存在するが画像じゃない場合(divだった場合)、途中まで実行される。途中まで、というとおかしいが、そうとしか書けない。canvasは以下の画像のようになり、マウスを動かしても更新されない。エラーが出るのは理解できるが、なぜこのような画像になるかはよくわからない。
失敗時の画像
開発者ツールを見るとエラーがたくさん出ている。
Uncaught TypeError: Type error paper.js:2952
表示させるのに適当な画像探すのに時間が掛かる。twitterで使ってるアイコンにした。今度、テスト用に使う画像を準備しとこう。
マウスを中心に持っていいってかなりの速さで回転させてもCPU負荷はそこまで高いようではなかった。自前のマシンでは1%程度。テスト7のonFrameバージョンは15%程度。
描画領域が少ないからか、canvasだからかpaperscriptだからなのかは不明。
回転を早めていくとなんだか楽しい。インボリュート曲線の画像を用意して無限の回転ごっこをしたくなる。