2
2

More than 5 years have passed since last update.

easeljsでスワイプ

Posted at

微妙...

var FPS = 60;
var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);

if (createjs.Touch.isSupported()) {
  createjs.Touch.enable(stage, false, false);
}
createjs.Ticker.setFPS(FPS);
createjs.Ticker.addEventListener("tick", handleTick);

stage.addEventListener("stagemousedown", mouseDown);
stage.addEventListener("stagemousemove", mouseMove);
stage.addEventListener("stagemouseup", mouseUp);
stage.addEventListener("stageswipeleft", swipeLeft);
stage.addEventListener("stageswiperight", swipeRight);
//stage.addEventListener("stageswipeup", swipeUp);
//stage.addEventListener("stageswipedown", swipeDown);

stage.update();


function mouseDown(e) {
  startPosX = e.stageX;
  startPosY = e.stageY;
}

function mouseMove(e) {
}

function mouseUp(e) {
  endPosX = e.stageX;
  endPosY = e.stageY;

  var swipeThreshold = 10; 
  var deltaX = startPosX - endPosX;
  var deltaY = startPosY - endPosY;
  var horSwipeDistancePer = Math.abs((deltaX / stage.canvas.width) * 100);
  var verSwipeDistancePer = Math.abs((deltaY / stage.canvas.height) * 100);
  var swipeDirection;

  // horizontal
  if (Math.abs(deltaX) > Math.abs(deltaY) && horSwipeDistancePer > swipeThreshold) {
      swipeDirection = startPosX - endPosX > 0 ? "left" : "right";
      //console.log(swipeDirection);
      stage.dispatchEvent({type: "stageswipe" + swipeDirection, delta: Math.abs(deltaX)});
  // vertical
  } else if (Math.abs(deltaX) < Math.abs(deltaY) && verSwipeDistancePer > swipeThreshold) {
      swipeDirection = startPosY - endPosY > 0 ? "up" : "down";
      //console.log(swipeDirection);
      stage.dispatchEvent({type: "stageswipe" + swipeDirection, delta: Math.abs(deltaY)});
  }
}

function swipeLeft(event) {
  console.log("left", event.delta);
}

function swipeRight(event) {
  console.log("right", event.delta);
}

//function swipeUp(event) {
//  console.log("up", event.delta);
//}

//function swipeDown(event) {
//  console.log("down", event.delta);
//}

function handleTick(event) {
  stage.update();
}
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2