質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,253

score 171

表示オブジェクト.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;
}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2018/11/25 23:20

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

    キャンセル

  • cheche0830

    2018/11/26 02:13

    失礼しました!

    キャンセル

回答 1

checkベストアンサー

0

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

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

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

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

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

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

○ function handleUp() を追加

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


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


動かしてみた↓ 全文

<html>
<head>
  <meta charset="utf-8" />
  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <style>
  #myCanvas{
    width:100vw;
    height:100vh;
  }
  </style>
  <script>
  window.addEventListener("load", init);
  function init() {
    var stage = new createjs.Stage("myCanvas");
    stage.canvas.width = window.innerWidth;
    stage.canvas.height = window.innerHeight;

    // ドラッグした場所を保存する変数
    var dragPointX;
    var dragPointY;
    // シェイプを作成
    var myObj = new createjs.Shape();
    myObj.graphics.beginFill("coral").drawRect(0, 0, 100, 100);
    stage.addChild(myObj);
    myObj.x = 0;
    myObj.y = 0;

    myObj.addEventListener("mousedown", handleDown);
    myObj.addEventListener("pressmove", handleMove);

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


    function handleDown(event) {
      createjs.Tween.removeTweens(myObj);//Tween中なら一旦止める処理を 追加
      // ドラッグを開始した座標を覚えておく
      dragPointX = stage.mouseX - myObj.x;
      dragPointY = stage.mouseY - myObj.y;
      dragStartX = myObj.x;//追加
      dragStartY = myObj.y;//追加
      startTime = new Date();//追加
      console.log('down >' + '  down時X:'+dragStartX+'  down時Y:'+dragStartY);
    }
    function handleMove(event) {
      // 表示オブジェクトはマウス座標に追随する
      // ただしドラッグ開始地点との補正をいれておく
      myObj.x = stage.mouseX - dragPointX;
      myObj.y = stage.mouseY - dragPointY;
    }
    //function handleUp 追加
    function handleUp(event) {
      endTime = new Date();
      var toTime = endTime.getTime() - startTime.getTime();
      console.log('up >' + '  かかった時間'+toTime+'  終了時X:'+myObj.x+'  終了時Y:'+myObj.y+'  移動した距離X:'+(myObj.x-dragStartX)+'  移動した距離Y:'+(myObj.y-dragStartY));
      //目的地の座標はmousedown時のmyObj座標からpressup時のmyObj座標の(3倍とする)
      var slideX = (dragStartX +((myObj.x-dragStartX)*3));//目的地ドラッグ移動した距離の3倍
      var slideY = (dragStartY + ((myObj.y-dragStartY)*3));
      var moveTime = toTime*4;//どのぐらいの時間をかけて移動するか
      console.log('  目標位置X:'+(dragStartX +((myObj.x-dragStartX)*3))+'  目標位置Y:'+(dragStartY + ((myObj.y-dragStartY)*3))+'  移動時間:'+(toTime*4));
      createjs.Tween.get(myObj).to({x: slideX,y:slideY }, moveTime,createjs.Ease.cubicOut);
    }
    // 時間経過
    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick() {
      stage.update(); // 画面更新
    }
  }
  </script>
</head>

<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/29 15:22

    ありがとうございます!!!
    そういう考え方なんですね!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る