HTML5 Javascript Canvas :Kolize - Drag And Drop

Pokračování záznamů
spsoi

Získejte kód odtud
jsfiddle.net

Když najedete na prvek plátna, 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';
        }
    }
}

Zkontrolujeme, zda je nad prvkem uvolněná myš, pak přesunovaný prvek převezme souřadnice tohoto prvku.

Pokud se myš nenachází nad prvkem, zkontrolujte, zda je nad nějakým prvkem samotný prvek.

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;

}
}

Nyní, při události, kdy uvolníme levé tlačítko myši, pokud je náš přesunutý prvek nad jiným prvkem, měl by převzít jeho souřadnice (sloučit se s ním)

K tomu doplníme funkci releaseMouseButton .

Definujme souřadnice taženého prvku a prvku pod ním.

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;

}

Nejprve přesuneme získávání souřadnic myši přes plátno do samostatné funkce:

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}
}