По заданному внешнему и внутреннему блоку определите, где расположен внутренний блок.

Question

Я борюсь с математической проблемой и могу использовать вашу помощь. Я хочу знать следующее:

• Внутренняя коробка в основном слева или справа?
• Внутренняя коробка в основном расположена сверху или снизу внешней коробки?

Чтобы понять это, я знаю следующее:

• Высота и ширина внешнего блока, это статично на 200px
• Ширина внутреннего поля (var X)
• Расстояние до внутреннего ящика слева от внешнего ящика (var x2)
• расстояние до внутреннего ящика от вершины, (var y)

Любые идеи о том, как определить, находится ли внутренняя коробка в основном слева или справа .. сверху или снизу?

Спасибо!

Answer 1

Я объясню основной мыслительный процесс для одного возможного решения.

Чтобы вычислить, «левое» оно или нет, вы хотите определить, какое расстояние больше, расстояние между левым краем внутреннего поля, внешним краем или правым.

Вы уже знаете расстояние слева. Чтобы вычислить расстояние справа, вам нужно взять общую externalWidth и вычесть ширину внутреннего поля и расстояние слева:

|-------------------------Outer Box----------------------------------|
|---left distance---|---------inner box--------|---right distance----|

Теперь, если левое расстояние больше правого, оно «правое», если они равны, оно центрировано, а если меньше, то «левое».

То же самое касается сверху вниз.

Answer 2

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

В приведенном ниже коде я звоню

Высота и ширина внешней рамки, это статично на 200px

outerH и outerW

Ширина внутреннего поля (var X)

innerW

(я предполагаю, что вы тоже знаете высоту внутреннего блока, и я называю это innerH)

Расстояние внутреннего блока слева от внешнего блока (var x2)

leftPadding

расстояние до внутреннего ящика от вершины, (var y)

topPadding

function isPrimarilyLeft(outerW, innerW, leftPadding) {
  var outerCentroidX = outerW / 2;
  // center = (leftedge + right edge) / 2
  // leftedge = leftPadding
  // rightedge = leftpadding + innerWidth
  // center = (leftPadding + leftPadding + width) / 2
  //        = 2*leftPadding / 2 + width / 2 =
  var innerCentroidX = leftPadding + innerW / 2;
  return innerCentroidX < outerCentroidX;
}

function isPrimarilyTop(outerH, innerH, topPadding) {
  var outerCentroidY = outerH / 2;
  var innerCentroidY = topPadding + innerH / 2;
  return innerCentroidY < outerCentroidY;
}

Answer 3

Поле в основном слева: X <(200 - x2) / 2 </p>

Поле в основном справа: X> (200 - x2) / 2

Ящик находится в основном сверху: Y <(200 - y) / 2 (Я полагаю, вы можете рассчитать высоту коробки - Y) </p>

Коробка находится в основном снизу: Y> (200-й) / 2

Вы должны заменить 200 на постоянную ширины / высоты.