手動スライド

めくる

画像を左右にドラッグすることができます。

ソース

function kineticjs(){
  //ステージ準備
  var stage = new Kinetic.Stage({
    container:"kCanvas",
    width:320, height:160,
    draggable:true,
    //ドラッグの許容範囲を指定
    dragBoundFunc:function(pos){
      return{
        x:(pos.x > 0) ? 0: (pos.x < -640) ? -640: pos.x,
        y:0
      }
    }
  });
  //レイヤー作成
  var layer = new Kinetic.Layer();
  //レイヤーへ画像を追加
  var imgList = document.getElementsByName("slideImage");
  var slideImage = new Array(imgList.length);
  for(i = 0; i < imgList.length; i++){
    slideImage[i] = new Kinetic.Image({
      x:i * 320, y:0,
      image:imgList[i],
      width:320, height:160
    });
    layer.add(slideImage[i]);
  }
  //ステージへレイヤーを追加
  stage.add(layer);
  //ドラッグ終了時のずれ補正
  stage.on("dragend", function(){
    stage.transitionTo({
      x:Math.floor((stage.attrs.x - 160) / -320) * -320,
      duration:0.1
    });
  });
  //ステージ上で手の形を変える
  stage.on("mouseover", function(){
    document.body.style.cursor = "move";
  });
  stage.on("mouseout", function(){
    document.body.style.cursor = "default";
  });
}

<kineticjs_slide.js>

 今回はステージをドラッグしたが、レイヤーごと、オブジェクトごとなど、対象を様々に変えることが可能。
 ドラッグ処理が手軽に実装できる。

覚書

Math.floor((stage.attrs.x - 160) / -320) * -320