HTML5 자바스크립트 캔버스: 충돌 - 드래그 앤 드롭
17566 단어 javascriptwebdevcanvas
Читать снизу вверх
Продолжение записей
Код берём отсюда
jsfiddle.net
При наведении на элемент канваса,
cursor = pointer
jsfiddle.net
function changeCursor(event) { // постоянно отрисовываем
console.log('changeCursor');
let mouse = coordinateMouseByCanvas(event); // получаем координаты мыши
console.log(mouse);
for (element of elements) {
x_final = element.left + element.width; // правый край элемента по x
y_final = element.top + element.height; // низ края элемента по y
if (mouse.x > element.left && mouse.x < x_final && mouse.y > element.top && mouse.y < y_final) {
document.body.style.cursor = 'pointer';
break;
} else {
document.body.style.cursor = 'default';
}
}
}
Проверяем, если мышка отпущена над элементом то передвигаемый элемент принимает координматы т.
Если мышка не над элементом, проверяем сам элемент находится ли над каким либо элементом.
jsfiddle.net
function releaseMouseButton (event) { // отпускаем мышку
// 5
let mouse = coordinateMouseByCanvas(event);
if (!elementClick) { return }
elementClickLeftEdge = elementClick.left; // левая сторона
elementClickRightEdge = elementClick.left + elementClick.width; // правая сторона
elementClickTopEdge = elementClick.top; // верхняя сторона
elementClickBottomEdge = elementClick.top + elementClick.height; // нижняя сторона
let elementFound = false;
elements.forEach ( function (element) { // где находятся элементы
x_final = element.left + element.width; // правый край элемента по x
y_final = element.top + element.height; // низ края элемента по y
// Мышка над элементом
if (mouse.x > element.left && mouse.x < x_final && mouse.y > element.top && mouse.y < y_final) { //!*
elementClick.top = element.top;
elementClick.left = element.left;
window.requestAnimationFrame(draw);
elementFound = true;
}
// Мышка не над элементом, но передвигаемый элемент над элементом
if (elementFound == false && elementClickTopEdge < y_final && // Меньше координата нижнее ребра
elementClickTopEdge > element.top &&
elementClickLeftEdge < x_final &&
elementClickRightEdge > element.left) { // Меньше координата левого ребра
elementClick.top = element.top;
elementClick.left = element.left;
window.requestAnimationFrame(draw);
}
});
elementClick = null;
}
}
Теперь при событии когда мы левую кнопку мыши отпускаем, если наш передвигаемый элемент находится над другим элементом, он должен перенять его координаты (слиться с ним)
Для этого дополним функцию
releaseMouseButton
.Определим координаты перетаскиваемого элемента, и элемента под ним.
jsfiddle.net
function releaseMouseButton (event) { // отпускаем мышку
// 5
if (!elementClick) { return }
elementClickLeftEdge = elementClick.left; // левая сторона
elementClickRightEdge = elementClick.left + elementClick.width; // правая сторона
elementClickTopEdge = elementClick.top; // верхняя сторона
elementClickBottomEdge = elementClick.top + elementClick.height; // нижняя сторона
elements.forEach ( function (element) { // где находятся элементы
x_final = element.left + element.width; // правый край элемента по x
y_final = element.top + element.height; // низ края элемента по y
if ( elementClickTopEdge < y_final && // Меньше координата нижнего ребра
elementClickTopEdge > element.top &&
elementClickLeftEdge < x_final &&
elementClickRightEdge > element.left) { // Меньше координата левого ребра
elementClick.top = element.top;
elementClick.left = element.left;
window.requestAnimationFrame(draw);
}
});
elementClick = null;
}
Для начала, выносим получение координат мыши над 캔버스, в отдельную функцию:
function coordinateMouseByCanvas (event) {
let infoPos = canvas.getBoundingClientRect(); // возвращает размер элемента и его позицию относительно viewport
x_click = event.clientX - infoPos.left; // пиксель по x внутри тэга canvas на который нажали
y_click = event.clientY - infoPos.top; // пиксель по y внутри тэга canvas на который нажали
return {x: x_click, y:y_click}
}
Reference
이 문제에 관하여(HTML5 자바스크립트 캔버스: 충돌 - 드래그 앤 드롭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/spsoi/html5-javascript-canvas-rectangular-collision-2783텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)