如何在最外面的矩形内移动最里面的矩形

Question

我正在将 X轴上最内部的（红色形状）居中到最外部的形状（黑色< / strong>形状），而红色形状会将其坐标/位置保留在其直接父对象内，即蓝色形状。

例如，将原始图像的红色形状居中（尺寸显示在第二张图片上）：

应如下所示：

此外，蓝色形状可以在黑色形状内的任何地方，以及红色在蓝色里面的任何地方。 / p>

这是基本的数学运算:)，我在提出如何将 red 形状居于黑暗< / strong>，同时保持其在 blue 形状内的位置。有人可以指导或解释我该怎么做吗？

注意（以像素为单位），值（宽度）不准确。

Answer 1

只需存储红框与其父级之间的距离，将红框居中，然后使用存储的距离更改父级：

let distance = red.x - redParent.x;                       // storing the distances between the red box and its parent

red.x = black.x + black.width / 2 - red.width / 2;        // centering the red box horizontally according to the black box

redParent.x = red.x - distance;                           // changing the red box parent position accordingly