Javascript-форум - Активная мини-карта

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Активная мини-карта (https://javascript.ru/forum/dom-window/65902-aktivnaya-mini-karta.html)

Активная мини-карта

Имеется 2 канваса для рисования с загруженной на них картинкой. Первый - карта, второй - миникарта.
Помогите настроить перемещение по карте зажатой кнопкой мыши, а не на баттонах, установленных ниже канваса.
Плюс, так же перемещение миникарты совместно с перемещением основной карты.
В джваскрипте совсем новичок, очень жду вашей помощи.
Весь исходник:

<html>
<head>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<style type="text/css">
body {
    
</style>
<script type="text/javascript">

}

}
</script>
<body>

</body>
</html>

EvIIIL,
addEventListener('mousedown', function(event) {})

addEventListener('mousemove', function(event) {})

event.pageX
event.pageY

Цитата:

Сообщение от Coriolan161 (Сообщение 435013)

EvIIIL,
addEventListener('mousedown', function(event) {})

addEventListener('mousemove', function(event) {})

event.pageX
event.pageY

Так, если ван не трудно, то напишите поконкретнее пожалуйста:)
пытался вставить в функцию onload - не вышло, перед ней - все дропается.
Внутренние параметры функции какие писать?
сейчас сижу, учу JS, а пока что рассчитываю только на вас:-?

EvIIIL,
Трудно)
Короче
1) Приведи свой код к единому стилю. Над каждой функцией напиши что она делает, какие параметры передаются и что она возвращает. Ты офигеешь как проще будет работать и что-то выяснять
2) Это тебе просто идея на посмотреть. Пихай туда где канвас определяешь

var isMoving = false;
canvas.addEventListener('mousedown', function(event) {
 // event - объект события, в нем много интересной фигни
 // попробуй console.log(event) и увидишь

 // event.pageX, event.pageY - координаты `места` события
 console.log(event.pageX);
 console.log(event.pageY);
 isMoving = true;
});

canvas.addEventListener('mouseup', function(event) {
 isMoving = false;
});

canvas.addEventListener('mousemove', function(event) {
  if (isMoving) {
    moveIm(event.pageX, event.pageY);
  };
});

3) Чуть поправь для демонстрации

function moveIm(dx,dy){
  x0 = dx;
  y0 = dy;

Цитата:

Сообщение от Coriolan161 (Сообщение 435030)

var isMoving = false;
canvas.addEventListener('mousedown', function(event) {
 // event - объект события, в нем много интересной фигни
 // попробуй console.log(event) и увидишь

 // event.pageX, event.pageY - координаты `места` события
 console.log(event.pageX);
 console.log(event.pageY);
 isMoving = true;
});

canvas.addEventListener('mouseup', function(event) {
 isMoving = false;
});

canvas.addEventListener('mousemove', function(event) {
  if (isMoving) {
    moveIm(event.pageX, event.pageY);
  };
});

3) Чуть поправь для демонстрации

function moveIm(dx,dy){
  x0 = dx;
  y0 = dy;

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

я человек совестливый, не хочу показаться наглым, и просить помощи абсолютно в каждом действии. Сидел сейчас, разбирался полтора часа, так ничего и не пришло в голову. В шарпе уж давно бы решение пришло, но это для меня ново, а диплом-то сам не напишется:(

EvIIIL,

Цитата:

теперь проблема в ее функционировании)

Я по-моему тебе сразу написал что это демонстрация, а допиливать придется тебе.

Цитата:

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

Забыл добавить что и хитрожопенький

Цитата:

Сидел сейчас, разбирался полтора часа

Молодец, ещё посиди

Цитата:

Сообщение от Coriolan161 (Сообщение 435046)

EvIIIL,

Я по-моему тебе сразу написал что это демонстрация, а допиливать придется тебе.

Забыл добавить что и хитрожопенький

Молодец, ещё посиди

ладно, спасибо и на этом