2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Angular-fullstackでEaselJSを使って画像を表示するまでの道のり

Last updated at Posted at 2015-07-18

前置き

最近、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に画像が表示されているはずです。

間違っているところ等あればお手数ですがコメント欄にてお教え下さい。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?