如何在JSXGraph多边形的边上显示边长？支持任意点数

你可以通过动态计算每条边的长度并设置标签来实现支持任意点数的需求，不需要手动给每条边命名。核心思路是创建多边形后，让每条边自动计算自身长度并生成标签内容。

修改后的代码如下：

const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-5, 5, 5, -5],
  axis: true
});
var points = [
  [0, 0],
  [0, 2],
  [3, 1],
  [2, -1] // 可随意添加更多点，数量不受限制
];

var pg = board.create('polygon', points, {
  fixed: true,
  hasInnerPoints: true,
  vertices: {
    visible: false
  },
  borders: {
    withLabel: true,
    label: {
      // 动态生成标签内容，自动计算当前边的长度
      parseText: function() {
        const p1 = this.point1.coords;
        const p2 = this.point2.coords;
        // 用勾股定理计算两点间距离
        const length = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
        // 格式化保留两位小数，可根据需求调整位数
        return length.toFixed(2);
      }
    }
  }
});

关键说明： #

• 移除了手动定义的names数组，改用label.parseText函数动态生成标签
• parseText函数中，this指向当前的边对象，通过point1和point2获取边的两个端点坐标
• 自动计算边长并格式化显示，无论points数组包含多少个点，所有边都会生成对应的长度标签

内容的提问来源于stack exchange，提问作者Joel Scott