Как реализовать перетаскивание объектов на Canvas с помощью мыши?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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

var objectToMove = null;
var offsetX, offsetY;

canvas.addEventListener('mousedown', function(e) {
  var x = e.pageX - canvas.offsetLeft;
  var y = e.pageY - canvas.offsetTop;

  // Находим объект, который будем перемещать
  objectToMove = findObject(x, y);

  // Вычисляем начальные координаты объекта и смещение указателя мыши
  offsetX = x - objectToMove.x;
  offsetY = y - objectToMove.y;
});

canvas.addEventListener('mousemove', function(e) {
  if (objectToMove) {
    var x = e.pageX - canvas.offsetLeft;
    var y = e.pageY - canvas.offsetTop;

    // Перемещаем объект на новое положение
    objectToMove.x = x - offsetX;
    objectToMove.y = y - offsetY;

    // Перерисовываем всё, чтобы обновить экран
    redraw();
  }
});

canvas.addEventListener('mouseup', function(e) {
  objectToMove = null;
});

// Функция для поиска объекта по координатам
function findObject(x, y) {
  // Реализация зависит от вашей конкретной задачи
}

// Функция для перерисовки всех объектов на экране
function redraw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  // Рисуем все объекты
}