Что в этом коде не так?
Все доброго времени суток. Подскажите пожалуйста, где ошибки и что не так с кодом, и как это исправить. Есть код сдвига по svg изображение. При прокрутки колесом и увеличении изображения с мощью этого кода, сдвигать можно только в право, в верх и в низ, а влево нельзя. Получается что нет возможности двигаться влево по изображению, и увидеть что там слева, можно только увеличив изображения до начальных размеров. Вот сам этот код отвевающий за сдвиг:
<script>
var imgMover = {press: false, offX:0, offY:0,x0:0,y0:0,x1:0,y1:0};
$("#imgMove").bind("mousedown",function(e){
imgMover.x0 = e.clientX;
imgMover.y0 = e.clientY;
imgMover.press = true;
e.preventDefault();
});
$(window).bind("mousemove",function(e){
if(!imgMover.press)
return false;
imgMover.x1 = imgMover.x0;
imgMover.y1 = imgMover.y0;
imgMover.x0 = e.clientX;
imgMover.y0 = e.clientY;
var offx = parseInt($("#moved").position().left) + parseInt(imgMover.x0 - imgMover.x1);
var offy = parseInt($("#moved").position().top) + parseInt(imgMover.y0 - imgMover.y1);
$("#moved").css({
"left": offx,
"top": offy
});
if($("#moved").position().top>0)
$("#moved").css({"top":0});
if($("#moved").position().left>0)
$("#moved").css({"left":0});
if($("#moved").position().top < -($("#moved").height() - $("#imgMove").height()))
$("#moved").css({"top":-($("#moved").height() - $("#imgMove").height())});
if($("#moved").position().left < -($("#moved").width() - $("#imgMove").width()))
$("#moved").css({"left":-($("#moved").width() - $("#imgMove").width())});
});
$(window).bind("mouseup",function(){
imgMover.press = false;
});
</script>
А это код отвевающий за зумирование:
<script>
var svgViewBoxWidth = 1910;
var svgViewBoxHeight = 970;
var test = 0;
var theSvgElement = document.getElementById('main-svg');
var viewBox = theSvgElement.getAttribute('viewBox'); // Взял атрибут viewBox SVG.
var viewBoxValues = viewBox.split(' '); // Создал массив из атрибутов
viewBoxValues[0] = parseFloat(viewBoxValues[0]);
viewBoxValues[1] = parseFloat(viewBoxValues[1]);
viewBoxValues[2] = parseFloat(viewBoxValues[2]);
viewBoxValues[3] = parseFloat(viewBoxValues[3]);
document.onwheel = function(e) {
e.preventDefault();
var delta = e.deltaY || e.detail || e.wheelDelta;
test -= delta;
viewBoxValues[2] += delta;
viewBoxValues[3] += (~~(delta / 1.96));
if (test < 0) {
viewBoxValues[2] = svgViewBoxWidth;
viewBoxValues[3] = svgViewBoxHeight;
test = 0;
}
if ((test == 1900) || (test > 1900)) {
test = 1900;
viewBoxValues[2] = 410;
viewBoxValues[3] = 205;
}
xR = ((svgViewBoxWidth/viewBoxValues[2])*e.pageX - e.pageX)/(svgViewBoxWidth/viewBoxValues[2]);
yR = (svgViewBoxHeight/viewBoxValues[3])*e.pageY - e.pageY;
viewBoxValues[0] = xR.toFixed(2);
viewBoxValues[1] = yR.toFixed(2);
theSvgElement.setAttribute('viewBox', viewBoxValues[0] + " " + viewBoxValues[1] + " " + viewBoxValues[2] + " " + viewBoxValues[3]);
};
</script>
|