CODEWITHSUNDEEP
labelanglejsxgraph
JoelScott
JoelScott

Reputation: 1

When creating an angle, how do I control the attributes of the automatically created points?

I'm working with a polygon and attempting to create angles with labels but when angles are created, so are the points used to define them. This would be fine but I can't control the labels on the automatically created points (and I don't know what they are called or how to find out).

var points = [
  [0, 0],
  [0, 5],
  [3, 0]
];
    for (k = 0; k < showAngle.length; k++) {
  if (showAngle[k] == 1) {
    var angle = board.create('angle', [points[k], points[((k + 1) % points.length)], points[((k + 2) % points.length)]],{fixed:true});
  } else if (showAngle[k] == 2) {
    var angle = board.create('angle', [points[k], points[((k + 1) % points.length)], points[((k + 2) % points.length)]], {
      fixed: false,
      name: function() {
        return ((180/Math.PI)*JXG.Math.Geometry.rad(points[k], points[((k + 1) % points.length)], points[((k + 2) % points.length)])).toFixed(1) + '°';
      }
    });
  }
}

https://jsfiddle.net/jscottuq/acyrLxfh/12/ contains what I've got so far.

The arrays showLen and showAngle are setting what labels are shown for each side/angle (0 - no label, 1 - name , 2 - measurement). These will be set when the jsxgraph is created.

Upvotes: 0

Views: 58

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

At the time being, the possibility to control the style of the newly created points of an angle is missing. We will add this soon.

However, a solution would be to use the already existing points which are hidden in this example. For this it would be helpful to kee a list of these points, e.g. jxg_points:

var jxg_points = [];
for (i = 0; i < points.length; i++) {
  var rise = points[(i + 1) % points.length][1] - points[i][1];
  var run = points[(i + 1) % points.length][0] - points[i][0];
  var point = board.create('point', [points[i][0], points[i][1]], {
    fixed: true,
    visible:false
  });
  jxg_points.push(point); // Store the point
  points[i].pop();
  len[i] = Math.round((Math.sqrt(rise * rise + run * run) + Number.EPSILON) * 100) / 100;
}

Then the points can be reused for the angles without creating new points:

for (k = 0; k < showAngle.length; k++) {
  if (showAngle[k] == 1) {
    angle = board.create('angle', [
      jxg_points[k], 
      jxg_points[((k + 1) % jxg_points.length)], 
      jxg_points[((k + 2) % jxg_points.length)]
    ],{fixed:true});
  } else if (showAngle[k] == 2) {
    var angle = board.create('angle', [
          jxg_points[k], 
          jxg_points[((k + 1) % jxg_points.length)], 
          jxg_points[((k + 2) % jxg_points.length)]], {
      fixed: false,
      name: function() {
        return ((180/Math.PI)*JXG.Math.Geometry.rad(points[k], points[((k + 1) % points.length)], points[((k + 2) % points.length)])).toFixed(1) + '°';
      }
    });
  }
}

See it live at https://jsfiddle.net/d8an0epy/.

Upvotes: 0

Related Questions