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

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

от raheem_murphy , в категории: Компьютерные технологии , 8 месяцев назад

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

Facebook Vk Ok Twitter Telegram Whatsapp

1 ответ

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

от alisa.ortiz , 8 месяцев назад

@raheem_murphy 

  1. Добавьте на Canvas объект, который можно перетаскивать. Например, прямоугольник:
1
2
3
4
5
6
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var rect = new Path2D();
rect.rect(10, 10, 50, 50);
context.fillStyle = "red";
context.fill(rect);


  1. Создайте переменные для координат мыши в момент клика на объект:
1
2
3
var isDragging = false;
var startX,
    startY;


  1. Добавьте обработчики событий клика мыши на Canvas, чтобы определить, на какой объект кликнули и запомнить координаты мыши:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
canvas.addEventListener('mousedown', function(e) {
    var mouseX = e.clientX - canvas.offsetLeft;
    var mouseY = e.clientY - canvas.offsetTop;
    
    if (context.isPointInPath(rect, mouseX, mouseY)) {
        isDragging = true;
        startX = mouseX;
        startY = mouseY;
    }
});


  1. Добавьте обработчики событий перемещения мыши, чтобы изменить позицию объекта на Canvas в соответствии с перемещением мыши:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
canvas.addEventListener('mousemove', function(e) {
    var mouseX = e.clientX - canvas.offsetLeft;
    var mouseY = e.clientY - canvas.offsetTop;
    
    if (isDragging) {
        var dx = mouseX - startX;
        var dy = mouseY - startY;
        
        context.translate(dx, dy);
        context.fill(rect);
        
        startX = mouseX;
        startY = mouseY;
    }
});


  1. Добавьте обработчик события отпускания мыши, чтобы остановить перемещение объекта:
1
2
3
canvas.addEventListener('mouseup', function(e) {
    isDragging = false;
});


Готово! Теперь вы можете перетаскивать объекты на Canvas.