Как реализовать перетаскивание объектов на Canvas?

Пользователь

от francisco.friesen , в категории: Другие , 8 месяцев назад

Как реализовать перетаскивание объектов на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от christine , 8 месяцев назад

@francisco.friesen 

Для реализации перетаскивания объектов на Canvas можно использовать следующий алгоритм:

  1. Создать объект Canvas и добавить на него нужные элементы – фигуры, текст и т.д.
  2. Добавить обработчики событий на объекты, которые нужно перетаскивать – mouseup, mousedown и mousemove.
  3. В обработчике события mousedown запомнить текущие координаты курсора и координаты левого верхнего угла перетаскиваемого объекта.
  4. В обработчике события mousemove вычислять разницу между текущими координатами курсора и координатами левого верхнего угла перетаскиваемого объекта. Это позволит определить, какую дистанцию нужно пройти объекту, чтобы переместить его в новое место на Canvas.
  5. Использовать полученные данные для перемещения объекта на новое место с помощью метода canvas.getContext('2d').translate().
  6. В обработчике события mouseup сбросить запомненные координаты и завершить перетаскивание объекта.


Пример кода на JavaScript:


var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');


// Добавление обработчиков событий на Canvas canvas.addEventListener('mousedown', startDragging); canvas.addEventListener('mousemove', drag); canvas.addEventListener('mouseup', stopDragging);


// Объект, который нужно перетаскивать var rect = { x: 100, y: 100, width: 50, height: 50 };


// Флаг для отслеживания начала перетаскивания объекта var isDragging = false;


// Координаты курсора и координаты левого верхнего угла объекта в момент начала перетаскивания var startCursorCoords; var startRectCoords;


// Обработчик события mousedown function startDragging(event) { var cursorX = event.clientX - canvas.offsetLeft; var cursorY = event.clientY - canvas.offsetTop; if ( cursorX >= rect.x && cursorX <= rect.x + rect.width && cursorY >= rect.y && cursorY <= rect.y + rect.height ) { isDragging = true; startCursorCoords = {x: cursorX, y: cursorY}; startRectCoords = {x: rect.x, y: rect.y}; } }


// Обработчик события mousemove function drag(event) { if (isDragging) { var cursorX = event.clientX - canvas.offsetLeft; var cursorY = event.clientY - canvas.offsetTop; rect.x = startRectCoords.x + cursorX - startCursorCoords.x; rect.y = startRectCoords.y + cursorY - startCursorCoords.y; drawRect(); } }


// Обработчик события mouseup function stopDragging(event) { isDragging = false; }


// Функция для рисования объекта на Canvas function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(rect.x, rect.y, rect.width, rect.height); }


drawRect(); // Рисуем объект на Canvas