createjs ドラッグ&ドロップの慣性ムーブ

表示オブジェクト.addEventListener("mousedown", handleDown);
表示オブジェクト.addEventListener("pressmove", handleMove);

// 表示オブジェクトを押したときの処理です
function handleDown(event) {
  // ドラッグを開始した座標を覚えておく
  dragPointX = stage.mouseX - 表示オブジェクト.x;
  dragPointY = stage.mouseY - 表示オブジェクト.y;
}

// 表示オブジェクトを押した状態で動かしたときの処理です
function handleMove(event) {
  // 表示オブジェクトはマウス座標に追随する
  // ただしドラッグ開始地点との補正をいれておく
  表示オブジェクト.x = stage.mouseX - dragPointX;
  表示オブジェクト.y = stage.mouseY - dragPointY;
}

こちらの処理でドラッグ&ドロップはできたのですが
スマホのスクロールのように慣性スクロール的な動きにするにはどのように改変すればよいでしょうか？

退会済みユーザー

2018/11/25 14:20

きちんとコードは``` ```で囲ってください

cheche0830

2018/11/25 17:13

失礼しました！

行動規範の内容に同意します

回答1件

ベストアンサー

createjs では
createjs.Tween.get(オブジェクト).to({x: 座標x , y: 座標y } , 止まるまでの時間 , createjs.Ease.cubicOut);
という関数で、始まりが最高速で、座標に向かって減速してストップするみたいです。

なので、mousedownの時のオブジェクト座標(x,y）とpressupの時のオブジェクト座標(x,y）を取得して、その移動距離の何倍かの距離を目的地として時間を指定して移動してあげれば良いと思います。

↓なんとなく慣性っぽい動きの例です。
○ 新たに必要なイベントリスナーと状態保持のための変数を追加

javascript
1      //4行追加
2      myObj.addEventListener("pressup", handleUp);
3      var dragStartX;//ドラッグ開始時(mousedown)のObject位置を保持
4      var dragStartY;//ドラッグ終了時(pressup)のObject位置を保持
5      var startTime;//ドラッグ開始時(mousedown)の時間
6      var endTime;//ドラッグ終了時(pressup)の時間

○ function handleDown(event){}に3行追加

javascript
1        dragStartX = myObj.x;//追加
2        dragStartY = myObj.y;//追加
3        startTime = new Date();//追加

○ function handleUp() を追加

javascript
1      function handleUp(event) {
2        endTime = new Date();
3        var toTime = endTime.getTime() - startTime.getTime();
4        console.log('up >' + '  かかった時間'+toTime+'  dragEndX:'+myObj.x+'  dragEndY:'+myObj.y+'  移動した距離X:'+(myObj.x-dragStartX)+'  移動した距離Y:'+(myObj.y-dragStartY));
5        //目的地の座標はmousedown時のmyObj座標からpressup時のmyObj座標の（3倍とする）
6        var slideX = (dragStartX +((myObj.x-dragStartX)*3));//目的地ドラッグ移動した距離の3倍
7        var slideY = (dragStartY + ((myObj.y-dragStartY)*3));
8        var moveTime = toTime*4;//どのぐらいの時間をかけて移動するか
9        createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut);
10      }

※ 移動距離の3倍と時間の4倍はなんとなくの数字です。

動かしてみた↓ 全文

html
1<html>
2<head>
3  <meta charset="utf-8" />
4  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
5  <style>
6  #myCanvas{
7    width:100vw;
8    height:100vh;
9  }
10  </style>
11  <script>
12  window.addEventListener("load", init);
13  function init() {
14    var stage = new createjs.Stage("myCanvas");
15    stage.canvas.width = window.innerWidth;
16    stage.canvas.height = window.innerHeight;
17
18    // ドラッグした場所を保存する変数
19    var dragPointX;
20    var dragPointY;
21    // シェイプを作成
22    var myObj = new createjs.Shape();
23    myObj.graphics.beginFill("coral").drawRect(0, 0, 100, 100);
24    stage.addChild(myObj);
25    myObj.x = 0;
26    myObj.y = 0;
27
28    myObj.addEventListener("mousedown", handleDown);
29    myObj.addEventListener("pressmove", handleMove);
30
31    //三行追加
32    myObj.addEventListener("pressup", handleUp);
33    var dragStartX;//ドラッグ開始時(mousedown)のObject位置を保持
34    var dragStartY;//ドラッグ終了時(pressup)のObject位置を保持
35    var startTime;//ドラッグ開始時(mousedown)の時間
36    var endTime;//ドラッグ終了時(pressup)の時間
37
38
39    function handleDown(event) {
40      createjs.Tween.removeTweens(myObj);//Tween中なら一旦止める処理を 追加
41      // ドラッグを開始した座標を覚えておく
42      dragPointX = stage.mouseX - myObj.x;
43      dragPointY = stage.mouseY - myObj.y;
44      dragStartX = myObj.x;//追加
45      dragStartY = myObj.y;//追加
46      startTime = new Date();//追加
47      console.log('down >' + '  down時X:'+dragStartX+'  down時Y:'+dragStartY);
48    }
49    function handleMove(event) {
50      // 表示オブジェクトはマウス座標に追随する
51      // ただしドラッグ開始地点との補正をいれておく
52      myObj.x = stage.mouseX - dragPointX;
53      myObj.y = stage.mouseY - dragPointY;
54    }
55    //function handleUp 追加
56    function handleUp(event) {
57      endTime = new Date();
58      var toTime = endTime.getTime() - startTime.getTime();
59      console.log('up >' + '  かかった時間'+toTime+'  終了時X:'+myObj.x+'  終了時Y:'+myObj.y+'  移動した距離X:'+(myObj.x-dragStartX)+'  移動した距離Y:'+(myObj.y-dragStartY));
60      //目的地の座標はmousedown時のmyObj座標からpressup時のmyObj座標の（３倍とする）
61      var slideX = (dragStartX +((myObj.x-dragStartX)*3));//目的地ドラッグ移動した距離の３倍
62      var slideY = (dragStartY + ((myObj.y-dragStartY)*3));
63      var moveTime = toTime*4;//どのぐらいの時間をかけて移動するか
64      console.log('  目標位置X:'+(dragStartX +((myObj.x-dragStartX)*3))+'  目標位置Y:'+(dragStartY + ((myObj.y-dragStartY)*3))+'  移動時間:'+(toTime*4));
65      createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut);
66    }
67    // 時間経過
68    createjs.Ticker.addEventListener("tick", handleTick);
69    function handleTick() {
70      stage.update(); // 画面更新
71    }
72  }
73  </script>
74</head>
75
76<body>
77  <canvas id="myCanvas"></canvas>
78</body>
79</html>