前置き
最近、MEANスタック開発でちょこちょこ開発しているのですが、Canvasに画像を表示させようと思いEaselJSを使って表示させてみようとやってみました。
やること
まずはbower install
をつかってEaselJSをインストールしましょ。
$ bower install EaselJS
bower_componentsに新しくディレクトリが生成されたことが確認されたら、
次はindex.htmlに追記してEaselJSを読み込むようにしましょ。
index.html
# 〜省略〜
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
# 以下1行追加
<script src="bower_components/EaselJS/lib/easeljs-0.8.1.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
# 〜省略〜
次はmain.htmlでcanvasを表示するように追記します。
main.html
# 〜中略〜
<div class="row">
# 以下1行追加
<canvas id="test-canvas" width="300" height="300" ng-init="init()"></canvas>
</div>
# 〜中略〜
次にmain.controller.jsでcanvasに画像を注ぎ込みます。
main.controller.js
'use strict';
angular.module('testApp')
.controller('MainCtrl', function ($scope, $http) {
$scope.init = function () {
var stage = new createjs.Stage("test-canvas");
var img = new createjs.Bitmap("assets/images/hoge.png");
// 画像読み込みが完了すればcanvasを更新する
img.image.onload = function() {
stage.update();
};
// 画像をcanvasに読み込ませる
stage.addChild(img);
}
});
これでMainCtrlに設定されているルートにアクセスすればCanvasに画像が表示されているはずです。
間違っているところ等あればお手数ですがコメント欄にてお教え下さい。