1

Хочу сделать передвигающейся элемент(белый круг) внутри круга(красный круг) как показано ниже. Но, если передвигать элемент ближе к углам круга, то элемент выходить за границу круга.

Как сделать ограничение элементу, чтобы он не выходил за пределы внешнего круга?

P.S. Попробовал применить единичную окружность, находил расстояние от центра внешнего круга, до текущего местоположения элемента, и если это расстояние больше 1, то не менял позицию элемента, но это приводит к блокировке элемента(больше не двигается).

const
  stick = document.querySelector("#stick"),
  stickWidth = stick.clientWidth,
  stickHeight = stick.clientHeight,
  stickArea = stick.parentNode,
  stickAreaWidth = stickArea.clientWidth,
  stickAreaHeight = stickArea.clientHeight

stick.style.left = (stickAreaWidth - stickWidth) / 2 + 'px'
stick.style.top = (stickAreaHeight - stickHeight) / 2 + 'px'


stick.onmousedown = function(event) {
  event.preventDefault();

  let shiftX = event.clientX - stick.getBoundingClientRect().left;
  let shiftY = event.clientY - stick.getBoundingClientRect().top;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(event) {
    let
      newLeft = event.clientX - shiftX - stickArea.getBoundingClientRect().left,
      newTop = event.clientY - shiftY - stickArea.getBoundingClientRect().top,
      rightEdge = stickAreaWidth - stickWidth,
      topEdge = stickAreaHeight - stickHeight,
      dataStick = getDataStick(stick);


    if (newLeft < 0) newLeft = 0;
    if (newTop < 0) newTop = 0;

    if (newLeft > rightEdge) newLeft = rightEdge;
    if (newTop > topEdge) newTop = topEdge;

    // if (dataStick.distance > 1) {
    //     return
    // }

    stick.style.left = newLeft + 'px';
    stick.style.top = newTop + 'px';

  }

  function onMouseUp() {
    document.removeEventListener('mouseup', onMouseUp);
    document.removeEventListener('mousemove', onMouseMove);
  }
};

stick.ondragstart = function() {
  return false;
};


function getDataStick(stick) {
  const
    parentPos = stick.parentNode.getBoundingClientRect(),
    stickPos = stick.getBoundingClientRect(),
    x = (parentPos.left - stickPos.left) / (stick.parentNode.clientWidth - stick.clientWidth) * (-2) - 1,
    y = (parentPos.top - stickPos.top) / (stick.parentNode.clientHeight - stick.clientHeight) * 2 + 1,
    data = {}

  data.x = x
  data.y = y
  data.distance = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))).toFixed()

  return data
}
body {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #212529;
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}

.wrapper {
  width: 90vw;
  height: 90vw;
  max-width: 300px;
  max-height: 300px;
  position: relative;
  display: flex;
  justify-content: space-around;
  background: brown;
  border-radius: 50%;
}

#stick {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background-color: white;
  cursor: pointer;
}
<div class="container">
  <div class="wrapper">
    <div id="stick"></div>
  </div>
</div>

1
  • Ответ по данному вопросу
    – De.Minov
    Commented 4 февр. 2022 в 5:05

1 ответ 1

1

Я если честно переписал твой код, трудно было разобраться. Надеюсь не обидишься.

Но все работает:

const stickArea = document.getElementById('stick_area');
const stick = document.getElementById("stick");

let stickAreaRad = 0;
let stickRad = 0;
let X0 = 0;
let Y0 = 0;

const resize = () => {
    stickAreaRad = stickArea.getBoundingClientRect().width / 2;
    stickRad = stick.getBoundingClientRect().width / 2;
    X0 = stickArea.getBoundingClientRect().left;
    Y0 = stickArea.getBoundingClientRect().top;
};
resize();
window.addEventListener("resize", resize);

const centerStick = function () {
    stick.style.left = `${stickAreaRad - stickRad}px`;
    stick.style.top = `${stickAreaRad - stickRad}px`;
};

centerStick();

const distToCenter = function (x, y) {
    return Math.hypot(x - (X0 + stickAreaRad), y - (Y0 + stickAreaRad));
};

let drag = false;
let offsetX = 0;
let offsetY = 0;

stick.addEventListener("mousedown", event => {
    event.preventDefault();

    drag = true;
    offsetX = event.clientX - stick.getBoundingClientRect().left;
    offsetY = event.clientY - stick.getBoundingClientRect().top; 
});

window.addEventListener("mouseup", event => {
    event.preventDefault();
    drag = false;
});

window.addEventListener("mousemove", event => {
    if (!drag) return;

    let x = event.x - X0 - offsetX;
    let y = event.y - Y0 - offsetY;

    let dist = distToCenter(X0 + x + stickRad, Y0 + y + stickRad);

    if (dist > stickAreaRad) {
        let angle = Math.atan2(event.y - Y0 - stickAreaRad, event.x - X0 - stickAreaRad);
        x = stickAreaRad + Math.cos(angle) * stickAreaRad - offsetX;
        y = stickAreaRad + Math.sin(angle) * stickAreaRad - offsetY;
    }

    stick.style.left = `${x}px`;
    stick.style.top = `${y}px`;
});
body {
    width: 100vw;
    height: 100vh;
    font-size: 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212529;
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
}

.stick_area {
    width: 90vw;
    height: 90vw;
    max-width: 300px;
    max-height: 300px;
    position: relative;

    background: brown;
    border-radius: 50%;
}

.wrapper {
    width: 90vw;
    height: 90vw;
    max-width: 300px;
    max-height: 300px;
    position: relative;
    display: flex;
    justify-content: space-around;
    background: brown;
    border-radius: 50%;
}

.stick {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    background-color: white;
    cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="stick_area" id="stick_area">
                <div class="stick" id="stick"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Если захочешь уменьшить максимальное расстояние от центра, просто здесь:

if (dist > stickAreaRad) {
    let angle = Math.atan2(event.y - Y0 - stickAreaRad, event.x - X0 - stickAreaRad);
    x = stickAreaRad + Math.cos(angle) * stickAreaRad - offsetX;
    y = stickAreaRad + Math.sin(angle) * stickAreaRad - offsetY;
}

В проверке используй не stickAreaRad, а радиус, который тебе нужен. Надеюсь помог.

1
  • есть небольшой недочет, но все равно благодарю, сам чет не додумался считать расстояние через углы
    – ck1e
    Commented 4 февр. 2022 в 12:33

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