Board logo

标题: 将 Node.js Web 应用程序中的图形制作成动画 [打印本页]
作者: look_w    时间: 2018-11-2 16:20     标题: 将 Node.js Web 应用程序中的图形制作成动画

第 1 步. 在 Bluemix 上创建一个                                Node.js Web Starter 应用程序第 2 步. 下载样板代码第 3 步. 将样板代码导入 DevOps                                Services 中第 4 步. 为您的动画自定义 index.ejs
“任何 HTML 相关更改都可在 index.ejs 中直接自定义，并立即反映在应用程序的目标网页中。”

index.ejs 文件是一个 JavaScript 模板，即您的 Web 应用程序的起点。此文件在您在浏览器中打开应用程序时首次运行。任何 HTML 相关更改都可在                                index.ejs 中直接自定义，并立即反映在应用程序的目标网页中。
在 index.ejs 中，我们将采纳 Dojo 技术来将您自己选择的图像制作成动画。找到几张可通过 URL 访问的任何格式（JPG、PNG 等）的图像（比如 这张图）。
删除 index.ejs 中的所有现有代码；您不需要它。看看我完成的   项目中的 index.ejs 文件。以下操作很重要。
通过添加此 script 标记而包含 Dojo API：
1
2
3
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
            djconfig="parseOnLoad: true">
    </script>




Dojo 通过 createSurface API 访问此 HTML 标记来显示初始图像：
1
2
3
4
<body>
     <div id="shape">
     </div>
  </body>




1
surface = dojox.gfx.createSurface("shape", 300, 300);




创建一个计时器，以便按定义的间隔旋转图像。
1
2
3
4
5
6
7
t = new dojox.timing.Timer(300);
t.onTick = function() {
         alterAndDraw ();
  }
t.onStop = function ()  {
  }
  t.start();




只要计时器过期，图像位置就会改变。在图像到达旋转区域末尾时反转方向。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
rad = rad + radDx;
            cirX = cirX - cirDx;

                if (rad == 120) {

                    radDx = -radDx;
                    cirDx = -cirDx;

                } else if (rad == 10)   {

                         radDx = -radDx;
                    cirDx = -cirDx;

                         getImage ();  // bring next image
                }

                draw ();
                drawn=true;




第 5 步. 部署并运行应用程序完成 index.ejs 文件的修改后，就可将应用程序推送到 Bluemix 环境中了，在这里它将覆盖第 1 步中创建的现有的样板版本。
结束语IBM Bluemix 样板有助于快速开始进行 Node.js Web 应用程序开发。所有应用程序基架都已为您创建好；您唯一需要更改的文件是 index.ejs。请查阅                                Bluemix 提供的其他样板应用程序，为 Web 和移动开发提供便利。




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0