DEV Community 👩‍💻👨‍💻

Spsoi
Spsoi

Posted on

HTML5 Javascript Canvas : Collision - Drag And Drop

Читать снизу вверх

Продолжение записей
spsoi

Код берём отсюда
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';
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Проверяем, если мышка отпущена над элементом то передвигаемый элемент принимает координаты того элемента.

Если мышка не над элементом, проверяем сам элемент находится ли над каким либо элементом.

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;

}
}
Enter fullscreen mode Exit fullscreen mode

Теперь при событии когда мы левую кнопку мыши отпускаем, если наш передвигаемый элемент находится над другим элементом, он должен перенять его координаты (слиться с ним)

Для этого дополним функцию 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;

}
Enter fullscreen mode Exit fullscreen mode

Для начала, выносим получение координат мыши над canvas, в отдельную функцию:

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}
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Make Your Github Profile Stand Out

Github is great, but have you considered how to make yours more attractive for potential employers or other visitors? Even non-tech ones like recruiters!

Take a couple of hours and show your best side as a person - and a programmer.