Что не так с моей реализацией миникарты? - PullRequest
Новая
       28

Что не так с моей реализацией миникарты?

0 голосов
/ 25 декабря 2018

Мне нужно создать миникарту для моего веб-приложения, которая показывает, где на странице вы сейчас находитесь.Для работы с холстом я использую библиотеку RaphaelJS.Итак, мой код«viewport» на миникарте, это показывает вашу позицию на странице: 

viewport = paper.rect(document.documentElement.scrollLeft * scaleX, 
document.documentElement.scrollTop * scaleY, window.innerWidth * scaleX, 
window.innerHeight * scaleY).attr({'stroke' : '#000000', 'fill' : 
'#F0F0F0'})

scaleX = 280 / 5000 и scaleY = 180 / 5000 - они необходимы для масштабирования значений при перемещении по холстам.

Функция для перетаскивания'n'drop тип прокрутки на главном холсте: 

function dragWindow() {
var clicked = false,
startX, startY,
$d = $(document);
function updatePosition(e) {
    viewport.attr({'x' : $d.scrollLeft() * scaleX, 'y' : $d.scrollTop() * scaleY});
  $d.scrollLeft($d.scrollLeft() + (startX - e.pageX));
  $d.scrollTop($d.scrollTop() + (startY - e.pageY));
}
function startDragScroll(e){
  clicked = true;
  startX = e.pageX;
  startY = e.pageY;
}
function moveDragScroll(e){
  clicked && updatePosition(e);
}
function endDragScroll(){
  clicked = false;
}
document.addEventListener('mousedown', startDragScroll);
document.addEventListener('mousemove', moveDragScroll);
document.addEventListener('mouseup', endDragScroll);
}

В этой строке viewport.attr({'x' : $d.scrollLeft() * scaleX, 'y' : $d.scrollTop() * scaleY}); я назначаю значения x и y "viewport" на миникарте;Это все работает нормально.Я перетаскиваю на основные большие cnavas и "окно просмотра" на миникарте перемещается правильно, как прокрутка документа.

Функция для перетаскивания "окно просмотра" на миникарте: 

drag = function(){
    this.ox = this.attr('x');
    this.oy = this.attr('y');
};
move = function(dx, dy){
this.attr({'x' : Math.min(Math.max(this.ox + dx, 0), 280 - this.attr('width')), 'y' : Math.min(Math.max(this.oy + dy, 0), 180 - this.attr('height'))});
};
up = function(){

};

Это также работает правильно,«Окно просмотра» перемещается на миникарте и не выходит за ее пределы.

Но появляются странные вещи, когда я пытаюсь изменить прокрутку документа при перетаскивании «окна просмотра» на миникарте.Вот код, просто добавив две строки в функцию move: 

$d.scrollLeft(this.attr('x') / scaleX);
$d.scrollTop(this.attr('y') / scaleY);

И теперь, когда я пытаюсь переместить «окно просмотра» на миникарте, он быстро переходит на один из углов миникарты ивот и все.Документ также прокручивается до конца в том же направлении.

Итак, ребята, что может пойти не так в этом простом коде?

1 Ответ

0 голосов
/ 26 декабря 2018

UPD: проблема решена путем изменения типа прокрутки документа.Я установил width и height основного холста на window.innerWidth и window.innerHeight и изменил эти значения в обработчике событий $(window).resize().Так что теперь у меня есть полосы прокрутки на div, а не на теле, и я изменяю значения .scrollLeft() и .scrollRight() на этом div.Значения dx и dy являются правильными в функции Raphael move, поскольку теперь документ не прокручивается.

...