Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Что в этом коде не так? (https://javascript.ru/forum/css-html/76922-chto-v-ehtom-kode-ne-tak.html)

nzbt 27.02.2019 15:27

Что в этом коде не так?
 
Все доброго времени суток. Подскажите пожалуйста, где ошибки и что не так с кодом, и как это исправить. Есть код сдвига по 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>


Часовой пояс GMT +3, время: 09:42.