マウスホイールを有効にするにはどのようにすればいいですか？jqueryプラグイン（panzoom + circleslider）を使用して拡大縮小できます。

Question

マウスのスクロールを有効にするにはどうすればよいですか？私は自分のプロジェクトでCircleSlider.jsというライブラリを使用しています（詳細はhereを参照）。jquery.panzoom-1.7.0です。

ボタンを動かすことでズームイン（+）およびズームアウト（ - ）できる半円のようにしました（囲まれた画像を見てください。 picture）。

これまですべて正常に動作します。私がやりたかったのは、マウスのスクロールを有効にして、マウスを使って自分の画像をズームイン/ズームアウトすることでした。ここで

は私のhtmlコードです：

(function() { 
function circleSliderJs(options) { 
    var min = options.min || 0; 
    var max = options.max || 100; 
    var value = options.value || 0; 
    var slideFn = options.slide || function(e, val) {}; 
    var container = $('#' + options.container); 
    var slider = $('#' + options.slider); 

    if (!container.length || !slider.length) { 
     throw Error('container or slider not found!'); 
    } 

    var sliderWidth = slider.width(); 
    var sliderHeight = slider.height(); 
    var radius = container.width()/2; 
    var mdown = false; 

    function positionSlider(degree) { 
     var x = Math.round(radius * Math.sin(degree * Math.PI/180)); 
     var y = Math.round(radius * -Math.cos(degree * Math.PI/180)); 

     slider.css({ 
      left: x + radius - sliderWidth/2, 
      top: y - sliderHeight/2 
     }); 
    } 

    // initial position 
    var deg = 270 - (value - min) * 180/(max - min); 
    positionSlider(deg); 

    container 
     .mousedown(function(e) { 
      mdown = true; 
      e.originalEvent.preventDefault(); 
     }) 
     .mouseup(function(e) { 
      mdown = false; 
     }) 
     .mouseleave(function(e) { 
      //mdown = false; 
     }) 
     .mousemove(function(e) { 
      if (mdown) { 
       // firefox compatibility 
       if (typeof e.offsetX === "undefined" || typeof e.offsetY === "undefined") { 
        var targetOffset = $(e.target).offset(); 
        e.offsetX = e.pageX - targetOffset.left; 
        e.offsetY = e.pageY - targetOffset.top; 
       } 
       if ($(e.target).is('#rotationSliderContainer')) { 
        var mPos = { 
         x: e.offsetX, 
         y: e.offsetY + radius 
        }; 
       } else { 
        var mPos = { 
         x: e.target.offsetLeft + e.offsetX, 
         y: e.target.offsetTop + e.offsetY + radius 
        }; 
       } 

       var atan = Math.atan2(mPos.x - radius, mPos.y - radius); 
       deg = -atan/Math.PI * 180 + 180; 

       if (deg < 90) { 
        deg = 90; 
       } else if (deg > 270) { 
        deg = 270; 
       } 

       positionSlider(deg); 

       var value = min + (270 - deg)/180 * (max - min); 

       slideFn(e, value); 
      } 
     }); 
} 

function circleSliderSvg(options) { 
    var min = options.min || 0; 
    var max = options.max || 100; 
    var initialValue = options.value || 0; 
    var slideFn = options.slide || function(e, val) {}; 
    var container = $(options.container); 
    var slider = $(options.slider); 

    if (!container.length || !slider.length) { 
     throw Error('container or slider not found!'); 
    } 

    function positionSlider(degree) { 
     slider.attr('transform', 'rotate(' + degree + ', 95, 95)'); 
    } 

    function moveHandler(e) { 
     var evt = e ? e : window.event; 
     var moveX = 0, moveY = 0; 
     var radius = container.width()/2; 

     if ((evt.clientX || evt.clientY) && 
      document.body && 
      document.body.scrollLeft!=null) { 
      moveX = evt.clientX + document.body.scrollLeft; 
      moveY = evt.clientY + document.body.scrollTop; 
     } 
     if ((evt.clientX || evt.clientY) && 
      document.compatMode=='CSS1Compat' && 
      document.documentElement && 
      document.documentElement.scrollLeft!=null) { 
      moveX = evt.clientX + document.documentElement.scrollLeft; 
      moveY = evt.clientY + document.documentElement.scrollTop; 
     } 
     if (evt.pageX || evt.pageY) { 
      moveX = evt.pageX; 
      moveY = evt.pageY; 
     } 

     var x = moveX - container.offset().left - radius; 
     var y = moveY - container.offset().top - radius; 
     var deg = Math.atan2(x, y)/Math.PI * -180 + 270; 

     if (deg < 180) { 
      deg = 180; 
     } else if (deg > 360) { 
      deg = 360; 
     } 
     positionSlider(deg); 

     var value = min + (360 - deg)/180 * (max - min); 
     slideFn(e, value); 

     $(this).addClass('moved'); 
     slider.addClass('active'); 

     return false; 
    } 

    // initial position 
    var initialDeg = (min - initialValue) * 180/(max - min) + 360; 
    positionSlider(initialDeg); 

    slider.mousedown(function(e) { 
     e.originalEvent.preventDefault(); 
     $('body') 
      .bind('mousemove', moveHandler) 
      .bind('mouseup', function(evt) { 
       $(this) 
        .unbind('mousemove', moveHandler) 
        .unbind(evt) 
        .removeClass('moved'); 
       slider.removeClass('active'); 
      }); 
    }); 
} 
$.fn.extend({ 
    circleSlider: circleSliderSvg 
});})(); 

私ははっきりとすべてを説明することを願っています：

<g id="zoom-button" transform="rotate(0, 95, 95)"> 
    <title>Zoomen</title> 
    <circle id="zoom-area" r="8" cx="11" cy="95" stroke="#4c4c4c" fill="url(#lg-zoom-button)" filter="url(#filter-zoom-button)"></circle> 
</g> 
<script> 

そして、ここでは、私は、フルフィット私のニーズをするために変更した私のcircleSlider.jsです。 あなたのお手伝いを楽しみにしています。

Answer 1

私はこのpanzoomとマウスホイールの問題を解決してきた、そしてそれはかなり簡単だった： はここに私のコードで、私はそれを説明します：私たちはscrollSensitivityを指定する必要が-first

var scrollSensitivity = 100; 
     var mouse = fbCover.maxScale; 

     $('body').on('mousewheel', function(event) { 
      mouse = mouse - event.deltaY/scrollSensitivity; 
      if (mouse <= fbCover.maxScale && mouse >= fbCover.minScale) { 
       mouse = mouse - event.deltaY/scrollSensitivity; 
       // console.log(event.deltaX, event.deltaY, event.deltaFactor); 

       $('img#clippingImage').panzoom('zoom', mouse); 
       $('#slider').circleSlider({ 
        min : fbCover.minScale, 
        max : fbCover.maxScale, 
        step : 0.1, 
        value : mouse, 
        slider : '#zoom-button', 
        container : '#master-control' 

       }); 
      } else if (mouse > fbCover.maxScale) { 
       mouse = fbCover.maxScale; 
      } else if (mouse < fbCover.minScale) { 
       mouse = fbCover.minScale; 
      } 
//   Debug 
//   console.log(mouse); 
     }); 

。 -mouseは定数です（それ以上の拡大はできません） - マウスホイールを使用できるhtmlページの部分も指定する必要があります -event.deltaYは使用頻度ですホイール 私は残りがはっきりしていると思います:)