Styjun

Have you been refused entry into the Federal Republic of Germany?

Why does the friction act on the inward direction when a car makes a turn on a level road?

What license to choose for my PhD thesis?

(7 of 11: Fillomino) What is Pyramid Cult's Favorite Shape?

On the expression "sun-down"

Has J.J.Jameson ever found out that Peter Parker is Spider-Man?

What does Argus Filch specifically do?

What printing process is this?

how to change ^L code in many files in ubuntu?

Subtle ways to render a planet uninhabitable

Can I say "Gesundheit" if someone is coughing?

Can birds evolve without trees?

Do moonless nights cause dim light to become darkness, and bright light (e.g. from torches) to become dim light?

Can't understand an ACT practice problem: Triangle appears to be isosceles, why isn't the answer 7.3~ here?

A verb for when some rights are not violated?

What does "autolyco-sentimental" mean?

Why is the Vasa Museum in Stockholm so Popular?

Why isn't the new LEGO CV joint available on Bricklink or Brickowl?

Is Norway in the Single Market?

coding the arrow's path in flowchart

In MTG, was there ever a five-color deck that worked well?

What is Modern Vipassana?

Feedback diagram

A wiild aanimal, a cardinal direction, or a place by the water

How to shift the most inner rectangle inside the most outer rectangle

How to vertically align an image inside a divGenerate Random Points Within the Area of Two Overlapping Ellipse ShapesObject controll with mouse position relative to circleGet Element position from outer DIvCSS rotate element while staying inside containerHow to access the correct `this` inside a callback?How can I calculate the size of an outer rectangle when it is rotated and must encompass an inner rectangle totallyDetermine the correct calculation to maintain visual exactness between two squares with different centers of rotationHow to find all cells in a inner oriented rectangleTranslating/transforming? list of points from its center with an offset/distance

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I'm working on centering the most inner (the red shape) on X-axis to the center of the most outer shape (the black shape), while the red shape keeps its coordinates/position inside its direct parent, i.e. the blue shape.

For example, centering the red shape from this original image (dimensions are shown on the second picture):

should look like that:

Additionally, the blue shape can be anywhere inside black shape, and red anywhere inside blue.

It's basic math :) and I'm having troubles with coming up with a general math formula on how to center the red shape inside the dark one while maintaining its position inside the blue shape. Could somebody direct or explain me how to do this?

NOTE the values (widths) are in pixels and are not accurate.

javascript css math canvas geometry

share|improve this question

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Once red is centered on black and blue moves +10px, then counter-move red -10px and red is centered again. However, your question is, how to get red centered in black with arbitrary positioning of blue in the first place. Is that correct? Regards, M.
  
  – Micha
  Mar 27 at 1:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Micha, the red shape keeps its position inside the blue shape, I mean the blue shape also can shift to the left or right inside black shape (can go out of bounds too) with the red shape inside it in the same position but centered in the very center of the black shape
  
  – j doe
  Mar 27 at 1:36
  

  
  
  
  

add a comment | 

2

I'm working on centering the most inner (the red shape) on X-axis to the center of the most outer shape (the black shape), while the red shape keeps its coordinates/position inside its direct parent, i.e. the blue shape.

For example, centering the red shape from this original image (dimensions are shown on the second picture):

should look like that:

Additionally, the blue shape can be anywhere inside black shape, and red anywhere inside blue.

It's basic math :) and I'm having troubles with coming up with a general math formula on how to center the red shape inside the dark one while maintaining its position inside the blue shape. Could somebody direct or explain me how to do this?

NOTE the values (widths) are in pixels and are not accurate.

javascript css math canvas geometry

share|improve this question

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Once red is centered on black and blue moves +10px, then counter-move red -10px and red is centered again. However, your question is, how to get red centered in black with arbitrary positioning of blue in the first place. Is that correct? Regards, M.
  
  – Micha
  Mar 27 at 1:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Micha, the red shape keeps its position inside the blue shape, I mean the blue shape also can shift to the left or right inside black shape (can go out of bounds too) with the red shape inside it in the same position but centered in the very center of the black shape
  
  – j doe
  Mar 27 at 1:36
  

  
  
  
  

add a comment | 

I'm working on centering the most inner (the red shape) on X-axis to the center of the most outer shape (the black shape), while the red shape keeps its coordinates/position inside its direct parent, i.e. the blue shape.

For example, centering the red shape from this original image (dimensions are shown on the second picture):

should look like that:

Additionally, the blue shape can be anywhere inside black shape, and red anywhere inside blue.

It's basic math :) and I'm having troubles with coming up with a general math formula on how to center the red shape inside the dark one while maintaining its position inside the blue shape. Could somebody direct or explain me how to do this?

NOTE the values (widths) are in pixels and are not accurate.

javascript css math canvas geometry

share|improve this question

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

share|improve this question

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

share|improve this question

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

edited Mar 27 at 8:36

Spektre

32.4k66 gold badges5454 silver badges232232 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

asked Mar 27 at 1:16

j doej doe

1633 bronze badges

1 Answer
1

active

oldest

votes

1

Just store the distance between the red box and its parent, center the red box and then change the parent by using the stored distance:

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

share|improve this answer

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368402%2fhow-to-shift-the-most-inner-rectangle-inside-the-most-outer-rectangle%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Just store the distance between the red box and its parent, center the red box and then change the parent by using the stored distance:

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

share|improve this answer

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges

add a comment | 

1

Just store the distance between the red box and its parent, center the red box and then change the parent by using the stored distance:

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

share|improve this answer

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges

add a comment | 

Just store the distance between the red box and its parent, center the red box and then change the parent by using the stored distance:

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

share|improve this answer

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges

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

share|improve this answer

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges

answered Mar 27 at 1:36

ibrahim mahriribrahim mahrir

22.7k44 gold badges2121 silver badges5454 bronze badges