帆布

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; 
     }));