帆布

Question

註銷滾動我有kineticjs創建在480 * 960 大小的畫布問題是，當我查看我的手機我不能滾動比帆布下一個頁面。

我如何註銷觸摸事件的舞臺？

我的代碼與此類似：

<div id="container"></div> 
<div id="other">other stuff</div> 
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 480, 
    height: 960 
    }); 
    var uploaded; 
    var mask; 
    var layer = new Kinetic.Layer(); 
    var imageObj = new Image(); 
    var maskObj = new Image(); 
    mask = new Kinetic.Image({ 
     x: 130, 
     y: 50, 
     image: maskObj, 
     width: newwidth, 
     height: newheight 
    }); 
    uploaded = new Kinetic.Image({ 
     x: 105, 
     y: 130, 
     image: imageObj, 
     width: 160, 
     height: 240, 
     offset: [95,120], 
     draggable: true 
    }); 
    imageObj.onload = function() { 
    layer.add(mask); 
    layer.add(uploaded); 
    stage.add(layer); 
    uploaded.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
     }); 
    uploaded.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
     }); 
    mask.on('mouseover', function() { 
     document.body.style.cursor = 'default'; 
     }); 

    }; 
imageObj.src = 'pic1.png'; 
maskObj.src = 'pic2.png'; 

Answer 1

所以最後我通過touchmove觸發一個簡單的滾動解決它

uploaded.on('touchmove',function(e) { 
     //still need an action here that would stop scrolling meanwhile the photo is dragged. 
     },uploaded.off('touchmove'),mask.on('touchmove',function(e) { 
      var currentY = e.touches[0].clientY; 
      var currentX = e.touches[0].clientX; 
      if(currentY > lastY){ 
      window.scrollTo(currentX,$(document).scrollTop()-15); 
      }else{ 
      window.scrollTo(currentX,$(document).scrollTop()+15); 
      } 
      lastY = currentY; 
     }));