サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノートサンプル

EaselJSでインスタンスをドラッグする勢いで回転を加速する

*解説はテクニカルノート「EaselJSでインスタンスをドラッグする勢いで回転を加速する」参照。

  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/events/MouseEvent.js"></script>
  3. <script src="easeljs/geom/Point.js"></script>
  4. <script src="easeljs/geom/Matrix2D.js"></script>
  5. <script src="easeljs/display/DisplayObject.js"></script>
  6. <script src="easeljs/display/Container.js"></script>
  7. <script src="easeljs/display/Stage.js"></script>
  8. <script src="easeljs/display/Bitmap.js"></script>
  9. <script src="easeljs/utils/Ticker.js"></script>
  10. <script src="preloadjs/AbstractLoader.js"></script>
  11. <script src="preloadjs/PreloadJS.js"></script>
  12. <script src="preloadjs/TagLoader.js"></script>
  13. <script src="preloadjs/XHRLoader.js"></script>
  14. <script type="text/javascript">
  15. var stage;
  16. var origin;
  17. var lastMouse;
  18. var DECELERATION = 0.8;
  19. var RATIO = 0.01;
  20. var angularVelocity = 0;
  21. var instance;
  22. var velocity = new Point(0, 0);
  23. var update;
  24. function xInitialize() {
  25.   var canvasObject = document.getElementById("myCanvas");
  26.   var position = new Point(canvasObject.width / 2, canvasObject.height / 2);
  27.   var file = {src:"images/card.png", id:"image", data:position}
  28.   var loader = new PreloadJS(false);
  29.   stage = new Stage(canvasObject);
  30.   loader.onFileLoad = xDraw;
  31.   loader.loadFile(file);
  32. }
  33. function xDraw(eventObject) {
  34.   var myImage = eventObject.result;
  35.   var position = eventObject.data
  36.   var myBitmap = new Bitmap(myImage);
  37.   myBitmap.x = position.x;
  38.   myBitmap.y = position.y;
  39.   myBitmap.regX = myImage.width / 2;
  40.   myBitmap.regY = myImage.height / 2;
  41.   myBitmap.onPress = clickHandler;
  42.   stage.addChild(myBitmap);
  43.   stage.update();
  44. }
  45. function clickHandler(eventObject) {
  46.   var mouseX = eventObject.stageX;
  47.   var mouseY = eventObject.stageY;
  48.   lastMouse = new Point(mouseX, mouseY);
  49.   origin = this.globalToLocal(mouseX, mouseY);
  50.   eventObject.onMouseMove = mouseMoveHandler;
  51.   eventObject.onMouseUp = mouseUpHandler;
  52.   instance = this;
  53.   update = updateDrag;
  54.   Ticker.addListener(window);
  55. }
  56. function mouseMoveHandler(eventObject) {
  57.   var mouseX = eventObject.stageX;
  58.   var mouseY = eventObject.stageY;
  59.   var radius = new Point(lastMouse.x - instance.x, lastMouse.y - instance.y);
  60.   var force = new Point(mouseX - lastMouse.x, mouseY - lastMouse.y);
  61.   var moment = crossProduct2D(radius, force);
  62.   angularVelocity += moment * RATIO;
  63.   lastMouse = new Point(mouseX, mouseY);
  64.   velocity = force;
  65. }
  66. function mouseUpHandler(eventObject) {
  67.   update = updateInertia;
  68.   this.onMouseMove = this.onMouseUp = null;
  69. }
  70. function tick() {
  71.   rotate();
  72.   stage.update();
  73. }
  74. function rotate() {
  75.   var mouseX = lastMouse.x;
  76.   var mouseY = lastMouse.y;
  77.   instance.rotation += angularVelocity;
  78.   var offsetPoint = instance.localToGlobal(origin.x, origin.y);
  79.   instance.x += mouseX - offsetPoint.x;
  80.   instance.y += mouseY - offsetPoint.y;
  81.   angularVelocity *= DECELERATION;
  82.   update(mouseX, mouseY);
  83. }
  84. function updateDrag(mouseX, mouseY) {
  85.   angularVelocity *= DECELERATION;
  86. }
  87. function updateInertia(mouseX, mouseY) {
  88.   var velocityX = velocity.x;
  89.   var velocityY = velocity.y;
  90.   if (Math.abs(velocityX) + Math.abs(velocityY) + Math.abs(angularVelocity) < 1) {
  91.     Ticker.removeListener(window);
  92.   } else {
  93.     lastMouse = new Point(mouseX + velocityX, mouseY + velocityY);
  94.     velocity = new Point(velocityX * DECELERATION, velocityY * DECELERATION);
  95.     angularVelocity *= DECELERATION;
  96.   }
  97. }
  98. function crossProduct2D(point0, point1) {
  99.   return point0.x * point1.y - point0.y * point1.x;
  100. }
  101. </script>

作成者: 野中文雄
作成日: 2012年6月2日

Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.