@raheem_murphy
- Добавьте на 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
2
3
|
var isDragging = false;
var startX,
startY;
|
- Добавьте обработчики событий клика мыши на 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;
}
});
|
- Добавьте обработчики событий перемещения мыши, чтобы изменить позицию объекта на 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
2
3
|
canvas.addEventListener('mouseup', function(e) {
isDragging = false;
});
|
Готово! Теперь вы можете перетаскивать объекты на Canvas.
