На холсте canvas отрисованы 2 окружности, одна внутри другой. нужно ограничить движение внутренней окружности границами внешней
-
расстояние между центрами вы можете проверить, чтобы было не больше разницы радиусов? – teran 16 апр '19 в 9:51
-
@teran да, известны оба центра и оба радиуса... но что то с формулой туплю... – pepel_xD 16 апр '19 в 9:54
-
теорема пифагора вам в помощь – teran 16 апр '19 в 10:02
-
Постарайтесь писать более развёрнутые вопросы. Для получения ответа поясните, в чём именно вы видите проблему, что вы хотите получить в результате и т. д. Приведите пример, наглядно демонстрирующий проблему. – Kromster 16 апр '19 в 10:35
2 ответа
Чтобы нарисовать окружности у вас, очевидно, есть координаты центров O1 (x1, y1)
и O2 (x2, y2)
, и их радиусы R1
и R2
.
Представьте, что центры ваших окружностей совпадают. На сколько вы можете сдвинуть внутреннюю окружность в сторону? на столько, на сколько различаются их радиусы. Это значит, что и центр вы можете двигать именно на такое расстояние, не больше.
Таким образом, получается, что расстояние между центрами не должно превышать R1-R2
(или модуль этого значения).
Как посчитать расстояние между центрами, зная их координаты? В целом формулы расстояний известны. Но для наглядности, есть у вас две точки. Через одну вы проводите вертикальную линию. Через вторую - горизонтальную. Получаете прямоугольный треугольник, где гипотенуза как раз соединяет ваши точки.
Что в таком случае говорит теорема Пифагора? Что сумма квадратов длин катетов равна квадрату гипотенузы. Длины катетов каике? первый |x2-x1|
и второй |y2-y1|
.
и вот чтобы корни дальше не извлекать, сравните квадрат гипотенузы с квадратом разности радиусов.
(x2-x1)^2 + (y2-y1)^2 <= (r2-r1)^2
В этом примере я использовал svg, для канвы формулы такие же.
Тут просто теорема Пифагора:
// если расстояние от центра меньше разница радиуса внешнего и внутреннего круга
if (dx*dx + dy*dy < dr*dr)
А второй компонент чуть посложнее, считаем корректное положение, когда произошел выход за пределы границы, чтобы поведение было более ожидаемое и один круг не "упирался в другой".
// получаем из декартовых координат компонент угла полярных координат
let a = Math.atan2(dy, dx);
// считаем центр окружности исходя из угла и возможного максимального радиуса
d3.select(this).attr("cx", x - Math.cos(a)*dr)
.attr("cy", y - Math.sin(a)*dr);
Таскайте за внутренний круг мышкой:
dragCircleInCircle('#drag1', '#bounds1');
dragCircleInCircle('#drag2', '#bounds2', true);
function dragCircleInCircle(dragCircle, boundingCircle, right){
boundingCircle = d3.select(boundingCircle);
dragCircle = d3.select(dragCircle).call(d3.drag().on("drag", dragged));
let x = +boundingCircle.attr('cx');
let y = +boundingCircle.attr('cy');
let dr = +boundingCircle.attr('r') - dragCircle.attr('r');
function dragged(d) {
let dx = x - d3.event.x;
let dy = y - d3.event.y;
if (dx*dx + dy*dy < dr*dr)
d3.select(this).attr("cx", d3.event.x)
.attr("cy", d3.event.y);
else if (right) {
let a = Math.atan2(dy, dx);
d3.select(this).attr("cx", x - Math.cos(a)*dr)
.attr("cy", y - Math.sin(a)*dr);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg viewbox="0 0 200 100" height="90vh">
<circle id="bounds1" r="40" fill="none" stroke="red" cx="50" cy="50"/>
<circle id="drag1" r="10" fill="aqua" stroke="blue" cx="50" cy="50"/>
<circle id="bounds2" r="40" fill="none" stroke="red" cx="150" cy="50"/>
<circle id="drag2" r="10" fill="aqua" stroke="blue" cx="150" cy="50"/>
</svg>