Question

如何启用鼠标滚动。我在我的项目中使用了一个名为CircleSlider.js的库（您可以阅读更多相关信息here）和jquery.panzoom-1.7.0。

所以，我做了一个半圆形，我可以通过移动按钮放大（+）和缩小（ - ）（请看一下附图，这样你就可以更好地理解我的意思 - { {3}}）。

直到现在一切正常。我想要做的是启用鼠标滚动，这样我就可以使用鼠标在我的图片中放大和缩小。

这是我的HTML代码：

<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：

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

我希望我清楚地描述了一切。期待得到你的帮助。

Answer 1

我已经解决了这个panzoom和鼠标滚轮的问题，这很简单：这是我的代码，我将解释它：

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

- 首先我们需要指定scrollSensitivity。 -mouse是一个常数（它是我不能放大的最大比例） - 我们还需要指定html页面中可以使用鼠标滚轮的部分 -event.deltaY是使用方向盘的频率我猜其余的很清楚:)

我怎么能启用鼠标滚轮所以我可以缩放+和 - 使用jquery插件（panzoom + circleslider）

1 个答案: