teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

Tween中なら一旦止める処理を 追加

2018/11/29 08:23

投稿

colling
colling

スコア798

answer CHANGED
@@ -80,6 +80,7 @@
80
80
 
81
81
 
82
82
  function handleDown(event) {
83
+ createjs.Tween.removeTweens(myObj);//Tween中なら一旦止める処理を 追加
83
84
  // ドラッグを開始した座標を覚えておく
84
85
  dragPointX = stage.mouseX - myObj.x;
85
86
  dragPointY = stage.mouseY - myObj.y;

3

ログ追記

2018/11/29 08:23

投稿

colling
colling

スコア798

answer CHANGED
@@ -80,13 +80,13 @@
80
80
 
81
81
 
82
82
  function handleDown(event) {
83
- console.log('down');
84
83
  // ドラッグを開始した座標を覚えておく
85
84
  dragPointX = stage.mouseX - myObj.x;
86
85
  dragPointY = stage.mouseY - myObj.y;
87
86
  dragStartX = myObj.x;//追加
88
87
  dragStartY = myObj.y;//追加
89
88
  startTime = new Date();//追加
89
+ console.log('down >' + ' down時X:'+dragStartX+' down時Y:'+dragStartY);
90
90
  }
91
91
  function handleMove(event) {
92
92
  // 表示オブジェクトはマウス座標に追随する
@@ -103,6 +103,7 @@
103
103
  var slideX = (dragStartX +((myObj.x-dragStartX)*3));//目的地ドラッグ移動した距離の3倍
104
104
  var slideY = (dragStartY + ((myObj.y-dragStartY)*3));
105
105
  var moveTime = toTime*4;//どのぐらいの時間をかけて移動するか
106
+ console.log(' 目標位置X:'+(dragStartX +((myObj.x-dragStartX)*3))+' 目標位置Y:'+(dragStartY + ((myObj.y-dragStartY)*3))+' 移動時間:'+(toTime*4));
106
107
  createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut);
107
108
  }
108
109
  // 時間経過

2

追記

2018/11/29 08:13

投稿

colling
colling

スコア798

answer CHANGED
@@ -35,4 +35,87 @@
35
35
  createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut);
36
36
  }
37
37
  ```
38
- ※ 移動距離の3倍と時間の4倍はなんとなくの数字です。
38
+ ※ 移動距離の3倍と時間の4倍はなんとなくの数字です。
39
+
40
+
41
+ ---
42
+ 動かしてみた↓ 全文
43
+ ```html
44
+ <html>
45
+ <head>
46
+ <meta charset="utf-8" />
47
+ <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
48
+ <style>
49
+ #myCanvas{
50
+ width:100vw;
51
+ height:100vh;
52
+ }
53
+ </style>
54
+ <script>
55
+ window.addEventListener("load", init);
56
+ function init() {
57
+ var stage = new createjs.Stage("myCanvas");
58
+ stage.canvas.width = window.innerWidth;
59
+ stage.canvas.height = window.innerHeight;
60
+
61
+ // ドラッグした場所を保存する変数
62
+ var dragPointX;
63
+ var dragPointY;
64
+ // シェイプを作成
65
+ var myObj = new createjs.Shape();
66
+ myObj.graphics.beginFill("coral").drawRect(0, 0, 100, 100);
67
+ stage.addChild(myObj);
68
+ myObj.x = 0;
69
+ myObj.y = 0;
70
+
71
+ myObj.addEventListener("mousedown", handleDown);
72
+ myObj.addEventListener("pressmove", handleMove);
73
+
74
+ //三行追加
75
+ myObj.addEventListener("pressup", handleUp);
76
+ var dragStartX;//ドラッグ開始時(mousedown)のObject位置を保持
77
+ var dragStartY;//ドラッグ終了時(pressup)のObject位置を保持
78
+ var startTime;//ドラッグ開始時(mousedown)の時間
79
+ var endTime;//ドラッグ終了時(pressup)の時間
80
+
81
+
82
+ function handleDown(event) {
83
+ console.log('down');
84
+ // ドラッグを開始した座標を覚えておく
85
+ dragPointX = stage.mouseX - myObj.x;
86
+ dragPointY = stage.mouseY - myObj.y;
87
+ dragStartX = myObj.x;//追加
88
+ dragStartY = myObj.y;//追加
89
+ startTime = new Date();//追加
90
+ }
91
+ function handleMove(event) {
92
+ // 表示オブジェクトはマウス座標に追随する
93
+ // ただしドラッグ開始地点との補正をいれておく
94
+ myObj.x = stage.mouseX - dragPointX;
95
+ myObj.y = stage.mouseY - dragPointY;
96
+ }
97
+ //function handleUp 追加
98
+ function handleUp(event) {
99
+ endTime = new Date();
100
+ var toTime = endTime.getTime() - startTime.getTime();
101
+ console.log('up >' + ' かかった時間'+toTime+' 終了時X:'+myObj.x+' 終了時Y:'+myObj.y+' 移動した距離X:'+(myObj.x-dragStartX)+' 移動した距離Y:'+(myObj.y-dragStartY));
102
+ //目的地の座標はmousedown時のmyObj座標からpressup時のmyObj座標の(3倍とする)
103
+ var slideX = (dragStartX +((myObj.x-dragStartX)*3));//目的地ドラッグ移動した距離の3倍
104
+ var slideY = (dragStartY + ((myObj.y-dragStartY)*3));
105
+ var moveTime = toTime*4;//どのぐらいの時間をかけて移動するか
106
+ createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut);
107
+ }
108
+ // 時間経過
109
+ createjs.Ticker.addEventListener("tick", handleTick);
110
+ function handleTick() {
111
+ stage.update(); // 画面更新
112
+ }
113
+ }
114
+ </script>
115
+ </head>
116
+
117
+ <body>
118
+ <canvas id="myCanvas"></canvas>
119
+ </body>
120
+ </html>
121
+ ```

1

修正 ちょい修正

2018/11/29 05:29

投稿

colling
colling

スコア798

answer CHANGED
@@ -7,7 +7,7 @@
7
7
  ↓なんとなく慣性っぽい動きの例です。
8
8
  ○ 新たに必要なイベントリスナーと状態保持のための変数を追加
9
9
  ```javascript
10
- //行追加
10
+ //4行追加
11
11
  myObj.addEventListener("pressup", handleUp);
12
12
  var dragStartX;//ドラッグ開始時(mousedown)のObject位置を保持
13
13
  var dragStartY;//ドラッグ終了時(pressup)のObject位置を保持