JSXGraph中创建角度时如何控制自动生成点的属性？

1. 查找自动生成的角度控制点 #

JSXGraph创建angle元素时，会自动生成两个用于绘制角度弧的端点（point1和point2），你可以通过以下两种方式获取这些点：

• 直接访问角度对象的属性：angle.point1、angle.point2，这两个就是自动生成的控制点
• 通过angle.getChildren()获取所有子元素，筛选出类型为point的元素（排除你传入的三个顶点）

2. 控制自动生成点的标签 #

方式一：创建角度时直接隐藏标签 #

在创建angle的配置项中，添加point子配置，统一设置自动生成点的标签显示规则：

var angle = board.create('angle', [p1, p2, p3], {
  fixed: true,
  // 控制自动生成的点不显示标签
  point: {
    withLabel: false,
    // 也可以通过label配置细化样式
    label: {
      visible: false
    }
  }
});

方式二：创建后自定义标签 #

如果需要给自动生成的点设置自定义标签，可以在创建角度后，直接修改点的属性：

// 获取自动生成的点
var autoPoint1 = angle.point1;
var autoPoint2 = angle.point2;

// 隐藏标签
autoPoint1.setAttribute({withLabel: false});
autoPoint2.setAttribute({withLabel: false});

// 或者设置自定义标签
autoPoint1.setAttribute({
  name: '弧端点1',
  withLabel: true,
  label: {
    offset: [10, 10] // 调整标签偏移位置
  }
});

3. 修正你的代码示例 #

结合你的需求，修改后的代码解决了循环闭包问题，同时默认隐藏自动点标签：

var points = [
  [0, 0],
  [0, 5],
  [3, 0]
];
// 存储所有角度对象，方便后续操作
var angles = [];

for (let k = 0; k < showAngle.length; k++) { // 用let解决闭包问题
  const vertexIdx = (k + 1) % points.length;
  const pPrev = points[k];
  const pVertex = points[vertexIdx];
  const pNext = points[(k + 2) % points.length];

  let angleConfig = {
    fixed: true,
    // 默认隐藏自动生成点的标签
    point: { withLabel: false }
  };

  if (showAngle[k] == 2) {
    angleConfig.fixed = false;
    angleConfig.name = function() {
      const rad = JXG.Math.Geometry.rad(pPrev, pVertex, pNext);
      return ((180/Math.PI)*rad).toFixed(1) + '°';
    };
  }

  const angle = board.create('angle', [pPrev, pVertex, pNext], angleConfig);
  angles.push(angle);
}

关键说明： #

• 使用let k代替var k解决循环闭包问题，确保角度的动态名称能获取到正确的顶点参数
• 通过point: { withLabel: false }默认隐藏自动生成点的标签，避免界面干扰
• 用数组angles存储所有角度对象，方便后续对自动点进行批量调整

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