鉴于外在＆amp;内盒，确定内盒的位置

Question

我正在努力解决数学问题并可以使用你的帮助。我想知道以下内容：

• 内盒主要位于左侧还是右侧？
• 内盒主要位于外盒的顶部还是底部？

为了解决这个问题，我知道以下内容：

• 身高＆amp;外盒的宽度，这是200px的静态
• 内盒的宽度（var X）
• 外箱左侧的内箱距离（var x2）
• 距离顶部的内盒距离（var y）

任何想法哦如何确定内盒主要是向左还是向右......顶部还是底部？

谢谢！

Answer 1

您可以通过平均左边和右边来计算内框的中心。然后将其与外框中心进行比较，以确定其主要方向。

在下面的代码中，我正在调用

  

高度＆amp;外框的宽度，这是200px的静态

outerH和outerW

  

内盒的宽度（var X）

innerW

（我假设你也知道了innerBox的高度，我称之为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 2

我将解释一个可能解决方案的基本思维过程。

要计算它是否为“左”，您需要确定哪个距离更大，内框左侧与外边缘或右边之间的距离。

你已经知道左边的距离了。要计算右边的距离，你需要取总外宽并减去内框的宽度和左边的距离：

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

现在，如果左边的距离大于右边，则为“右边”，如果它们相等，则居中，如果距离较小，则为“左”。

从上到下也是如此。

Answer 3

该框主要位于左侧：X＆lt; （200 - x2）/ 2

该框主要位于右侧：X＆gt; （200 - x2）/ 2

该框主要位于顶部：Y＆lt; （200 - y）/ 2 （我想你可以计算盒子的高度 - Y）

该框主要位于底部：Y＆gt; （200 - y）/ 2

你应该用宽度/高度常数替换200。