Блог

Главная - Вопросы по программированию - Учитывая внешний и внутренний блок, определите, где расположен внутренний блок

Учитывая внешний и внутренний блок, определите, где расположен внутренний блок

#javascript #jquery #html #math

#javascript #jquery #HTML #математика

Вопрос:

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

  • Внутренний блок в основном находится на левой или правой стороне?
  • Внутренний блок в первую очередь расположен в верхней или нижней части внешнего блока?

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

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

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

Спасибо!

введите описание изображения здесь

Комментарии:

1. Вы не знаете высоту внутреннего блока?

2. Да, я делаю !.. давайте назовем это xy?

Ответ №1:

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

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

Высота и ширина внешнего блока, это статично в 200 пикселей

outerH и outerW

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

innerW

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

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

leftPadding

расстояние внутреннего блока от вершины, (разное)

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;
}

Комментарии:

1. Что такое outerW, innerW, leftPadding в этом примере?

2. Попробовал это сначала w isPrimarilyLeft, и он всегда возвращает true. Значения для чего-то, что должно было возвращать false, были следующими: (200, 121.5,54.5)

3. @AnApprentice, отредактировано, чтобы было ясно, как имена параметров соответствуют тому, что вы знаете.

4. @AnApprentice, если ваш внутренний блок имеет ширину 121,5 и начинается с 54,5 пикселей, его центр находится на 115,25, что справа от центра внешнего блока, поэтому большая часть его площади находится справа от центральной линии внешних блоков. В squarefree.com/shell/shell.html , isPrimarilyLeft(200, 121.5, 54.5) выдает false. ложь

5. вау, вау, это было сделано для primarilyLeft. Не могу вас отблагодарить. на самом деле я не могу

Ответ №2:

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

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

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

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

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

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

Ответ №3:

Поле находится в основном слева: X < (200 — x2) / 2

Поле находится в основном справа: X> (200 — x2) / 2

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

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

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

Метки: , ,