0

Имеется обертка в виде окружности, имеется блок внутри этой окружности. Нужно ограничить следование за курсором внутри именно окружности. Обертке задан border-radius, но сама по себе обертка ведь квадратная, поэтому внутренний блок вылезает в некоторых местах за границу.

$(document).ready(function(){ 


  wW = $('.container').width();
  wH = $('.container').height();

  var radius = wH/2;
  console.log(radius);   

  oT = $('.container').offset().top;
  oL = $('.container').offset().left;

  fW = $('.inner__block').width();
  fH = $('.inner__block').height();

  $('.container').mousemove(function(e){
    x = e.pageX-fW/2;
    y = e.pageY-fH/2;
   console.log(x,y);  

    if (x >= wW+oL-fW) {x = wW+oL-fW;};
    if (x <= oL) {x = oL;};
    if (y >= wH+oT-fH) {y = wH+oT-fH;};
    if (y <= oT) {y = oT;};

    $('.inner__block').css('top', y).css('left', x);
  });

}); 
12
  • 1
    По существу заданного вопроса можете что то сказать?
    – vislogurov
    16 ноя 2015 в 20:33
  • если бы Вам написали ответ на вопрос, он бы был опубликован как ответ.
    – Alex
    16 ноя 2015 в 20:38
  • и еще момент - у вас опечатка в самом вверху вопроса - Обертке задан bordr-radius, поправьте bordr-radius на border-radius
    – Alex
    16 ноя 2015 в 20:41
  • 1
    в принципе Ваша задача строится на вычислении углов и проверке при движении, так что вот Вам практически такой же вопрос с решением. Вам нужно немного переделать решение под свою задачу.
    – Alex
    16 ноя 2015 в 20:48
  • блок квадратный или круглый?
    – Grundy
    17 ноя 2015 в 6:38

2 ответа 2

1

В принципе Ваша задача строится на вычислении углов и проверке при движении, так что вот Вам практически такой же вопрос с решением. Вам нужно немного переделать решение под свою задачу.

P.S.: ответ опубликовали из комментариев по рекомендации модератора.

3
  • Вы меня неверно понимаете. Есть контейнер 300х300px ему border-radius задан. Но по факту контейнер остается квадратом, необходимо,чтобы внутренний блок останавливался у border, а не у края контейнера. А в Вашем примере рисуется именно круг, и границы у него, как у круга, а не как у квадрата. codepen.io/anon/pen/OydxyM
    – vislogurov
    17 ноя 2015 в 12:00
  • @vislogurov Вы сами себе противоречите. В вопросе Вы указываете Нужно ограничить следование за курсором внутри именно окружности. В решении, которое мы Вам дали, показывается как делать подсчет границы угла. Как мы и написали, у Вас такая же задача(определение границы), только Вам нужно решение изменить под свои нужды. Не смотрите на canvas, принцип определения угла тот же.
    – Alex
    17 ноя 2015 в 14:59
  • Мне кажется задача в ссылке не дубликат, в текущей нет задачи двигаться по окружности, соответственно не нужно рассчитывать угол, достаточно проверить расстояние между центрами
    – Grundy
    24 ноя 2015 в 6:17
0

И так, в общем случае - один круг находится внутри другого, если расстояние между центрами этих окружностей меньше чем разница радиусов этих окружностей.

Как вы могли заметить, я сохранил точку центра большой окружности,

center {
    x: radius,
    y: radius
}

где raduis - радиус большой окружности.

и рассчитываю точку цента маленькой окружности.
Формула довольно простая, но с нюансами, из-за того что позиционирование большой окружности идет относительно, а маленькой - абсолютно.

Сначала получаем координаты верхнего левого угла (на примере координаты Х):

x = e.pageX - oL - fW / 2 - 1;

из текущего положения курсора вычитаем смещение большой окружности, таким образом перевели координаты в значение относительно большой окружности. дальше вычитаем радиус и величину бордера. При таком значении x курсор мышки будет находится по центру маленькой окружности.

чтобы получить из этого координаты центра добавляем радиус и бордер, то есть фактически координаты центра маленькой окружности могут быть вычислены так

innerCenter {
    x: e.pageX - oL, //возможно нужно будет добавить или отнять значение ширины для более точного определения координат.
    y: e.pageT - oT
}

Функция m вычисляет расстояние между этими центрами по формуле длины отрезка:

формула длины отрезка http://www.sciweavers.org/upload/Tex2Img_1448358955/render.png

Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))

Передаем в эту функцию координаты центров окружностей и далее просто сравниваем если текущая координата центра удалена дальше чем нужно - ничего не делаем, если нет - выставляем диву рассчитанное значение координат для верхнего левого угла.

Пример реализации на CodePen

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.