2015-01-07 68 views
0

目前正在使用此代碼這個插件林mouse wheeljQuery的鼠標滾輪插件規模問題

$('#painter').on('mousewheel', function(e) { 
     cp.scale(2, 2); 
     var e0 = e.originalEvent, 
      delta = e0.wheelDelta || -e0.detail; 
     this.scrollTop += (delta < 0 ? 1 : -1) * 30; 
     e.preventDefault(); 
     console.log(e.deltaX, e.deltaY, e.deltaFactor); 
    }); 

如果畫家在畫布的事情是cp.scale事件而如果我把它ouside鼠標滾輪永遠不會beeing解僱發揮它的工作......真的不知道爲什麼

  • 代碼的其餘部分工作只是標尺部分沒有做它的工作

回答

0

而不是試圖調試一個插件,這裏的mousewheel代碼適合我(不需要插件)。

註釋的代碼和一個演示:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
// Listen for 2 wheel events 
 
// mousewheel for IE, DOMMouseScroll for everyone else 
 
canvas.addEventListener('mousewheel',handleScroll,false); 
 
canvas.addEventListener('DOMMouseScroll',handleScroll,false); 
 

 
var ups=0; 
 
var downs=0; 
 
$results=$('#results'); 
 

 
// 
 
function handleScroll(e){ 
 

 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    // Determine wheel direction 
 
    // ------------------------- 
 
    // Adjust for different browsers 
 
    // FF returns e.detail 
 
    // where wheelups are - and wheeldowns are + 
 
    // Other browsers return e.wheelData 
 
    // where wheelups are + and wheeldowns are - 
 
    if(e.wheelDelta){ 
 
    var direction=e.wheelDelta>0?1:-1; 
 
    }else{ 
 
    // Firefox (returns - for wheelups & + for wheeldowns) 
 
    var direction=e.detail<0?1:-1; 
 
    } 
 

 
    // 'direction' holds +1 for wheelup, -1 for wheeldown 
 

 
    // Do stuff! 
 
    if(direction>0){ ups++; } 
 
    if(direction<0){ downs++; } 
 
    $results.text('Ups='+ups+', Downs='+downs+', Net='+(ups-downs)); 
 

 
};
body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4 id='results'>Click in canvas and scroll the mouse wheel</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>