求图纸形心的数据预处理与形心计算代码：输入多个矩形的坐标和长度宽度，计算它们的形心坐标

程序员文章站 2023-12-29 18:50:04

...

问题背景：

求一个平面图的形心，其中平面图由多个矩形组成。其中图来自现实世界，无计算机输入。

数据预处理：

需要用到proceson，网址：https://www.processon.com

首先将区域分为多个矩形，用尺子量出它们的长宽后记录到processon中，例如宽2.3厘米，乘个100，算作230px，填写到processon上，如图：

求图纸形心的数据预处理与形心计算代码：输入多个矩形的坐标和长度宽度，计算它们的形心坐标

注意多多使用右边的度量工具来画图，很方便。

处理完毕后，我们就方便的得到了任意一个矩形的坐标和宽高，再将它们手工输入到数组里。

形心计算代码：

<!DOCTYPE html>
<html>
<body>

<div id="answer"></div>


</body>

<script>
  function Rect (x, y, width, height) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
  }
  //在这里从左到右手动写入各个矩形就OK了，左上角坐标+长宽
  let list = [
    new Rect(372, 701, 50, 300),
    new Rect(422, 701, 200, 650),
    new Rect(619, 501, 100, 850),
    new Rect(720, 502, 50, 700),
    new Rect(770, 454, 180, 750),
    new Rect(950, 183, 90, 1020),
    new Rect(1040, 183, 190, 250),
    new Rect(1040, 813, 50, 390),
    new Rect(1090, 813, 250, 180),
    new Rect(1460, 183, 230, 250),
  ]

  let answer = {x: 0, y: 0, s: 0}
  answer.x = getCenterX(list[0])
  answer.y = getCenterY(list[0])
  answer.s = getS(list[0])

  for (let i = 1; i < list.length; i++) {
    answer = compute(answer.x, answer.y, answer.s, list[i])

  }
   //数据展示，可无视这一段代码
  document.getElementById("answer").innerHTML=
"形心x坐标:"+answer.x +"</br>形心y坐标:"+ answer.y
    +"</br>总面积："+ answer.s
  +"</br>对第一个矩形的x偏移量：" + (answer.x-list[0].x) + "</br>对第一个矩形的y偏移量：" + (answer.y-list[0].y);


//计算形心
  function compute (x1, y1, s, rect) {
    let x2 = getCenterX(rect)
    let y2 = getCenterY(rect)
    let smallS = getS(rect);
    let k = smallS / (smallS + s)//分子是谁，就朝着谁的坐标前进k*距离
    x1 = x1 + k * (x2 - x1)
    y1 = y1 + k * (y2 - y1)

    return {x: x1, y: y1, s: s + smallS}
  }

  function  getCenterX (rect) {
    return rect.x + rect.width / 2;
  }

  function getCenterY (rect) {
    return rect.y + rect.height / 2
  }

  function getS (rect) {
    return rect.height * rect.width
  }
</script>
</html>

计算结果：

求图纸形心的数据预处理与形心计算代码：输入多个矩形的坐标和长度宽度，计算它们的形心坐标

这里的偏移量为直角坐标系，x轴向右，y轴向下。以第一个矩形的坐标（左上顶点）为出发点。