I have a parent rectangle and would like to add up to 10 or fewer rectangles on the right-hand side corner of the parent rectangle, as shown in the image below:
https://i.sstatic.net/RW9ix.png
I attempted to write code to achieve this, but the alignment is off-center from the parent rectangle.
this.addPortsToTheTransponder(3);
addPortsToTheTransponder(noOfPortsToBeDrawn: number) {
for (let i = 1; i <= noOfPortsToBeDrawn; i++) {
this.createPorts(i, noOfPortsToBeDrawn);
}
}
createPorts(i: number, noOfPortsToBeDrawn: number): void {
this.context.clearRect(0, 0, this.width, this.height);
const length = this.sizeOfTransponder.height / noOfPortsToBeDrawn;
const height = 10;
const width = 10;
const x = this.x + this.sizeOfTransponder.width;
const y = this.y + i * length - length / 2;
this.context.rect(
x,
y,
height,
width
);
this.context.stroke();
}
How can I align the small rectangles so that they are always drawn from the center, regardless of the total number of small rectangles? You can view the code here.