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