使用Angular全栈技术和EaselJS来展示图片的过程

3 年 ago
韵, 科
2 minutes

开场白

最近我一直在用MEAN技术栈进行开发，尝试着在Canvas上显示图片，所以用到了EaselJS库进行尝试。

要做的事情 zuò de

首先，让我们使用bower install命令来安装EaselJS。

$ bower install EaselJS

一旦确认在bower_components中新创建了一个目录，接下来我们需要在index.html中添加代码，来加载EaselJS库。

    # 〜省略〜
    <!--[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>

      # 以下１行追加
      <script src="bower_components/EaselJS/lib/easeljs-0.8.1.min.js"></script>
      <!-- endbower -->
    <!-- endbuild -->
    # 〜省略〜

下一步是在main.html中进行追加，以显示画布。

    # 〜中略〜
    <div class="row">

      # 以下１行追加
      <canvas id="test-canvas" width="300" height="300" ng-init="init()"></canvas>
    </div>
    # 〜中略〜

接下来，在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上显示图像。

如果有任何错误的地方，请在评论栏中告诉我们，希望不要给您带来麻烦。

bannerAds