Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > перемещение карты

Автор: Evghenusi 29.2.2012, 00:20

Доброго времени суток.
собираю карту, на чистом js, возникла проблема с перемещением карты.
карта движется быстрее курсора, а как поправить не знаю smile

кусок кода

Код


window.onload = function()
{
    var map = document.getElementById('map');
    map.scrollLeft = 1266;
    map.scrollTop = 1056;
    var imgDrag = 0, X = 0, Y = 0;
    
    map.onmousedown = function(e)
    {
        e = e || window.event;
        imgDrag = 1;
        X = e.clientX;
        Y = e.clientY;
        blockEvent(e);
    }
    
    document.onmousemove = function(e)
    {
        e = e || window.event;
        if(imgDrag)
        {
            map.scrollLeft += -(e.clientX - X);
            map.scrollTop += -(e.clientY - Y);
        }
    }
    
    function blockEvent(e)
    {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = 1;
        e.preventDefault ? e.preventDefault() : e.returnValue = 0;
    }
    
    document.onmouseup = function(){ imgDrag = 0; }
    
}

Код


<style type="text/css">
#map {
    cursor:pointer;
    overflow:hidden;
    position:relative;
    height:704px;
    width:844px;

}
#map img {
    position:absolute;
}
</style>
...
<div id="map">
    <img src="map.jpg" alt="" style="width:400%;height:400%" />
</div>

подскажите пожалуйста как исправить, а то я только новые ворота и вижу smile

http://test3.22web.net/

Автор: $дмитрий 29.2.2012, 11:26

Лови исправленный вариант

Код


window.onload = function()
{
    var map = document.getElementById('map');
    map.scrollLeft = 1266;
    map.scrollTop = 1056;
    var imgDrag = 0, X = 0, Y = 0;

    map.onmousedown = function(e)
    {
        e = e || window.event;
        imgDrag = 1;
        X = e.clientX + map.scrollLeft;
        Y = e.clientY + map.scrollTop;
        blockEvent(e);
    }

    document.onmousemove = function(e)
    {
        e = e || window.event;
        if(imgDrag)
        {
            map.scrollLeft = -(e.clientX - X);
            map.scrollTop = -(e.clientY - Y);
        }
    }

    function blockEvent(e)
    {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = 1;
        e.preventDefault ? e.preventDefault() : e.returnValue = 0;
    }

    document.onmouseup = function(){ imgDrag = 0; }

}

Автор: Evghenusi 29.2.2012, 12:02

$дмитрий, объясни пожалуйста что изменилось?
сколько на листке не высчитываю, цифры получаются одни и теже, js подтверждает, но твой вариант работает адекватнее. почему? smile

___________
в скрипте получаются разные результаты.
но что я тогда не учёл?

Автор: $дмитрий 29.2.2012, 12:30

Цитата

но что я тогда не учёл?

При клике метод onmousemove должен получить разницу текущих координат миши + смещение(scroll) и дальше уже работать с этим постоянным значением
В твоем случаи это значение просчитывается каждый раз при движении мыши, что создает эффект ускорения

Автор: Evghenusi 29.2.2012, 12:57

спасибо, теперь осознал свою глупость

Автор: Evghenusi 29.2.2012, 16:47

пытаюсь ещё одну задачу решить, связанную с той же картой.
при изменении масштаба смещение карты должно учитываться, не всё же время показывать центр карты)

использую такой код:

Код


function setScaling(scaling) //срабатывает при изменении масштаба
{
    scaling = parseInt(scaling)/10 +.5|0; // масштаб - 0..10
    var shift = {x:0, sx:0, y:0, sy:0};
    var x = (map.scrollWidth - map.offsetWidth) / 2;
    var y = (map.scrollHeight - map.offsetHeight) / 2;
    
    if( x != map.scrollLeft )
    {
        shift.x = map.scrollLeft - x;
        shift.sx = scaling - 1;
        // sx/sy - сохраняет значение ползунка при котором произошло смешение карты
    }
    else
    {
        shift.x = 0;
        shift.sx = 0;
    }
    if( y != map.scrollTop )
    {
        shift.y = map.scrollTop - y;
        shift.sy = scaling - 1;
    }
    else
    {
        shift.y = 0;
        shift.sy = 0;
    }

    map.scrollLeft = map.offsetWidth / 2 * scaling + shift.x * (scaling - shift.sx);
    map.scrollTop = map.offsetHeight / 2 * scaling + shift.y * (scaling - shift.sy);
}

при таком алгоритме погрешность примерно +/- 120 пикселей, а из-за чего я вновь не понимаю.

пните пожалуйста в нужную сторону.