Добрый Вечер. Есть div. Как можно отследить с какой стороны наводится мышь на этот div ? То есть, по событию mousemove, отследить с какой стороны наводят на этот div. С начала я думал отследить координаты мыши, учитывая текущую и прошлую точки и по ним определить направление. Но получается, что мне каким то образом нужно отследить еще и направление движения (то есть вниз/верх/вправо/влево), помимо координат. Подскажите пожалуйста, вариант решения.
-
разница между координатами текущей и предыдущей точек и даст Вам направление - вектор перемещения – Igor 1 дек '16 в 21:15
-
Дело в том, что это может работать для двух направлений - то есть влево/вправо или вверх/вниз. Для всех 4 направлений такой проверки не достаточно. – Drylozav 1 дек '16 в 21:19
-
Нет, дело не в этом. Для задания/описания направления в математике существует понятие - вектор. Как его найти - я Вам уже написал. – Igor 1 дек '16 в 21:25
-
Скажите, то есть с помощью направляющего косинуса, я смогу найти направление движения вектора ? – Drylozav 1 дек '16 в 21:32
-
Вот видите, Вы уже заговорили про косинус (а раньше было только "вниз/верх/вправо/влево"), значит понимаете, что курсор может двигаться под углом к осям координат. Да, сможете. – Igor 1 дек '16 в 21:35
3 ответа
const DEG_TO_RAD = Math.PI / 180;
const RAD_TO_DEG = 180 / Math.PI;
const point = ( x = 0, y = 0 ) => ({ x, y });
const length = ( { x, y } ) => Math.sqrt( x * x + y * y );
const normalize = ( vector ) => {
let vectorLength = length( vector );
let { x, y } = vector;
return point( x / vectorLength, y / vectorLength );
};
const subtract = ( a, b ) => ({ x: a.x - b.x, y: a.y - b.y });
const DIRECTIONS = {
TOP: "top",
RIGHT: "right",
BOTTOM: "bottom",
LEFT: "left"
};
const defaultBorder = `3px solid black`;
const getBorder = side => ({
borderTop: `${ side === DIRECTIONS.TOP ? defaultBorder : '' }`,
borderRight: `${ side === DIRECTIONS.RIGHT ? defaultBorder : '' }`,
borderBottom: `${ side === DIRECTIONS.BOTTOM ? defaultBorder : '' }`,
borderLeft: `${ side === DIRECTIONS.LEFT ? defaultBorder : '' }`,
})
const actionMap = {
[ DIRECTIONS.TOP ]: element => Object.assign( element.style, getBorder( DIRECTIONS.TOP ) ),
[ DIRECTIONS.RIGHT ]: element => Object.assign( element.style, getBorder( DIRECTIONS.RIGHT ) ),
[ DIRECTIONS.BOTTOM ]: element => Object.assign( element.style, getBorder( DIRECTIONS.BOTTOM ) ),
[ DIRECTIONS.LEFT ]: element => Object.assign( element.style, getBorder( DIRECTIONS.LEFT ) ),
}
let rect = document.body.querySelector('.rect');
let rectangle = rect.getBoundingClientRect();
let center = point(
rectangle.width / 2 + rectangle.left,
rectangle.height / 2 + rectangle.top
);
document.addEventListener('mousemove', document_mouseMoveHandler);
function document_mouseMoveHandler( { clientX, clientY } ){
let mouse = point( clientX, clientY );
let mc = subtract( mouse, center );
let direction = normalize( mc );
let angle = Math.atan2( direction.y, direction.x ) * RAD_TO_DEG;
let type = getDirection( angle );
let action = actionMap[ type ];
action( rect );
}
function getDirection( angle ){
if( angle <= -45 && angle > -130 ){
return DIRECTIONS.TOP;
}else if( angle > -180 && angle <= -130 || angle <= 180 && angle > 130 ){
return DIRECTIONS.LEFT;
}else if( angle > 45 && angle <= 130 ){
return DIRECTIONS.BOTTOM;
}else if( angle <= 45 && angle > -45 ){
return DIRECTIONS.RIGHT;
}
}
.rect {
width: 100px;
height: 100px;
background: tomato;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
}
<div class="rect"></div>
предложу альтернативный вариант:
Можно проверить пересекается ли каждая сторона(или отрезок) прямоугольника с отрезком, начало которого это текущая позиция курсора, а конец - центр прямоугольника, и, с каким отрезком получили пересечение с той стороны и двигается мышка
Тоесть, по сути, всё, что нужно это сделать - это корректно проверить пересечение отрезков, а остальное тривиально :)
;(function() {
let rect = document.getElementById("rect");
let rectWidth = parseFloat(getComputedStyle(rect).width);
let rectHeight = parseFloat(getComputedStyle(rect).height);
let rectTopLeft = {
x: parseFloat(getComputedStyle(rect).getPropertyValue("left")),
y: parseFloat(getComputedStyle(rect).getPropertyValue("top"))
};
let rectCenter = {
x: rectTopLeft.x + rectWidth*0.5,
y: rectTopLeft.y + rectHeight*0.5
};
let rectSides = {
Top: {
p0: {x: rectTopLeft.x, y: rectTopLeft.y},
p1: {x: rectTopLeft.x + rectWidth, y: rectTopLeft.y},
},
Left: {
p0: {x: rectTopLeft.x, y: rectTopLeft.y},
p1: {x: rectTopLeft.x, y: rectTopLeft.y + rectHeight}
},
Right: {
p0: {x: rectTopLeft.x + rectWidth, y: rectTopLeft.y},
p1: {x: rectTopLeft.x + rectWidth, y: rectTopLeft.y + rectHeight}
},
Bottom: {
p0: {x: rectTopLeft.x, y: rectTopLeft.y + rectHeight},
p1: {x: rectTopLeft.x + rectWidth, y: rectTopLeft.y + rectHeight}
}
};
let sides = ["Top", "Left", "Right", "Bottom"];
function cross2d(a, b) {
return a.x*b.y - a.y*b.x;
}
function segmentsIntersect(p1, p2, p3, p4) {
let v1 = cross2d(
{x: p4.x - p3.x, y: p4.y - p3.y},
{x: p1.x - p3.x, y: p1.y - p3.y}
);
let v2 = cross2d(
{x: p4.x - p3.x, y: p4.y - p3.y},
{x: p2.x - p3.x, y: p2.y - p3.y}
);
let v3 = cross2d(
{x: p2.x - p1.x, y: p2.y - p1.y},
{x: p4.x - p1.x, y: p4.y - p1.y}
);
let v4 = cross2d(
{x: p2.x - p1.x, y: p2.y - p1.y},
{x: p3.x - p1.x, y: p3.y - p1.y}
);
return v1*v2 < 0 && v3*v4 < 0;
}
document.onmousemove = function(e) {
let mx = e.clientX, my = e.clientY;
sides.forEach(function(side) {
if (segmentsIntersect({x: mx, y: my}, rectCenter, rectSides[side].p0, rectSides[side].p1)) {
rect.style["border" + side] = "4px solid #f00";
} else {
rect.style["border" + side] = "";
}
});
}
})();
#rect {
width: 100px;
height: 100px;
background: #668;
position: absolute;
top: 30%;
left: 40%;
}
<div id="rect"></div>
Не надо никаких косинусов. На hover событие сохраняете координаты x , y и включатель on = 1. По move событию получаете x1 и y1 и если выключатель включён сравниваете координаты и получаете направление. Ну и выключатель в ноль, чтобы больше не пересчитывал, пока не покинете область.
-
Тем, кто минусует, напишите, пожалуйста, почему это не сработает, есть шанс, что я пойму. – Sergey Panasenko 5 дек '16 в 8:42