Tips on moving the inner rectangle within the outer rectangle

Question

Tips on moving the inner rectangle within the outer rectangle

I am currently trying to center the innermost shape (the red shape) along the X-axis to the middle of the outermost shape (the black shape), while ensuring that the red shape remains within its direct parent, which is the blue shape.

For instance, centering the red shape based on the original image (the dimensions are shown in the second picture):

The desired outcome should resemble this:

Furthermore, the blue shape may be positioned anywhere inside the black shape, and the red shape may be positioned anywhere inside the blue shape.

It's essentially basic math :) and I am struggling to devise a general mathematical formula to center the red shape within the black shape while keeping its position within the blue shape intact. Can someone guide me or explain how to achieve this?

PLEASE NOTE that the values (widths) are in pixels and are not precise.

javascript css math canvas geometry

Answer 1

Answer №1

To keep the red box centered in its parent, first measure the distance between the two, center the red box, and then adjust the parent based on the stored distance:

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

red.x = black.x + black.width / 2 - red.width / 2;        // horizontally center the red box in relation to the black box

redParent.x = red.x - distance;                           // update the red box parent position using the stored distance

Answer 2

To keep the red box centered in its parent, first measure the distance between the two, center the red box, and then adjust the parent based on the stored distance:

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

red.x = black.x + black.width / 2 - red.width / 2;        // horizontally center the red box in relation to the black box

redParent.x = red.x - distance;                           // update the red box parent position using the stored distance

Tips on moving the inner rectangle within the outer rectangle

Answer №1

Similar questions

Three.js - implementing a billboard effect that preserves orientation through camera pans

The functionality of jQuery date picker and time picker is compromised when the fields are generated dynamically

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

Ways to retrieve information beyond the scope of the 'then' method

JavaScript (Create a button that toggles the visibility of an element)

The position of the HTML class shifts when the window is resized

Transform JSON reply in JavaScript/Typescript/Angular

Learn how to fetch user-selected options in Node.js and display the corresponding file contents in a textarea after submission

Fuzzy text upon scrolling in Internet Explorer version 6

Looking for a node.js IDE on OS X that can display JSON objects similar to how they appear in the console of Chrome or Firefox?

Issues with reading d3.js visualization data from a JSON file

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Error: Unable to set reference. The initial argument includes an undefined value in the 'gender' property of 'Users.ji8A7TkSldfdvieDqGxko9eV3Jy1'

Tips on transferring information from a component to an instance in Vue

Issue with Vue Router not rendering components after dynamically importing them

Assign a default value to empty elements in an array

Styling child elements in Angular using css from its parent element

Unable to assign multiple values to a bootstrap select from an array

Problem encountered in Python with Selenium/WebDriver: Unable to convert script into a string

Unwillingness of Ajax to accept Names containing apostrophes as a parameter