javascript - 使用 Canvas 在父矩形上绘制随机矩形，如图所示

Question

我有父矩形，我想在父矩形的右侧 Angular 添加最多 10 个或更少的矩形，如图所示

我编写了一个代码来执行此操作，但它没有与父矩形居中对齐

this.addPortsToTheTransponder(3);

addPortsToTheTransponder(noOfPortsToBeDrawn: number) {
    for (let i = 1; i <= noOfPortsToBeDrawn; i++) {
      this.createPorts(i, noOfPortsToBeDrawn);
    }
  }
  /**
   *
   * @param i number to create ports
   */
  createPorts(i: number, noOfPortsToBeDrawn: number): void {
    this.context.clearRect(0, 0, this.width, this.height);
    /**
     * Size(height & width) of each port is calculated as follows,
     * A. transpondser size is divided with number of ports to be drawn
     * B. And divide the height and width by number of ports to be drawn
     */
    const length = this.sizeOfTransponder.height / noOfPortsToBeDrawn;
    const height = 10;
    const width = 10;
    /**
     * x is the total of this.x(where this.x is the x value of first transponder)
     * and width of transponder width
     */
    const x = this.x + this.sizeOfTransponder.width;
    /**
     * y is the total of this.y (where this.y is position where all objects drawn) 
     * and nth of ports * length
     */
    const  y = this.y + i * length - length / 2;
    /**
     *
     */
    this.context.rect(
      x,
      y,
      height,
      width
      );
    this.context.stroke();
  }

无论小矩形的总数如何，如何对齐始终从中心绘制的小矩形？这是code

Answer 1

只涉及一点数学。假设您的大矩形位于 x=20,y=20，宽度=200，高度=300。

现在您想在其右侧绘制 5 个较小的矩形。

考虑到这一点，您知道 5 个小矩形的最大垂直空间是大矩形的高度 - 300 - 所以让我们将 300 除以 5 得到 60。如果您只是开始每 60 个像素绘制一个小矩形根据大矩形的 y 位置，小矩形将与顶部对齐。这里的技巧是添加计算出的 60 - 30 - 的一半，并减去小矩形高度的一半以获得其中心。

这是一个示例 - 您可以使用变量 numberOfRectangles 来查看它始终位于大矩形一侧的中心:

var bigRectangle = {
  x: 0,
  y: 0,
  width: 200,
  height: 400
};

var smallRectangle = {
  width: 20,
  height: 35
};
var numberOfRectangles = 6;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.rect(bigRectangle.x, bigRectangle.y, bigRectangle.width, bigRectangle.height)
context.stroke();
for (var a = 0; a < numberOfRectangles; a++) {
  context.rect(bigRectangle.x + bigRectangle.width, bigRectangle.y + (bigRectangle.height / numberOfRectangles) * (a + .5) - smallRectangle.height / 2, smallRectangle.width, smallRectangle.height)
  context.stroke();
}

<canvas id="canvas" width=300 height=500></canvas>

代码的实现略有不同，因为循环从 1 开始

 for (let i = 1; i <= noOfPortsToBeDrawn; i++) {

但基本上你只需要减去计算出的高度而不是添加它，所以只需替换这一行

const  y = this.y + i * length - length / 2;

由

const  y = this.y + length * (i - 0.5) - height/2;