Angles and Angle Markers
Another useful features available from KGJS is the angle marker, used to draw angles on graphs.
Angle Marker
Here is a basic way to draw an angle at the origin:
layout:
OneGraph:
graph:
xAxis: {min: 0, max: 5}
yAxis: {min: 0, max: 5}
objects:
- AngleMarker:
measure: 45
As you can see, the measure of the angle marker is simply the measurement of the angle in degrees, starting from the positive x-axis.
You can also move an angle marker to a different coordinate, for example to show the angle between the two segments below:
layout:
OneGraph:
graph:
objects:
- Segment:
a: [2,2]
b: [8,8]
- Segment:
a: [2,2]
b: [8,2]
- AngleMarker:
measure: 45
coordinates: [2,2]
You can also create angles using three points:
layout:
OneGraph:
graph:
objects:
- Angle:
pointA:
coordinates: [8, 5]
label: {text: A, position: tl}
pointB:
coordinates: [2, 5]
label: {text: B, position: l}
pointC:
coordinates: [8, 8]
label: {text: C}
showSegments: true
Notice a couple of things above:
showSegments: true shows the segments in between the points making up the angle between them.- Remember that the position of the labels on the points can be specified. Check out the Point documentation for more information.
Angles can be used in fun ways with draggable features. Let’s take a look at a long example below:
params:
- {name: ax, value: 8, round: 0.01}
- {name: ay, value: 5, round: 0.01}
- {name: bx, value: 2, round: 0.01}
- {name: by, value: 5, round: 0.01}
- {name: cx, value: 8, round: 0.01}
- {name: cy, value: 8, round: 0.01}
layout:
OneGraph:
graph:
objects:
- Angle:
pointA:
coordinates: [params.ax, params.ay]
draggable: true
label: {text: A, position: tl}
pointB:
coordinates: [params.bx, params.by]
draggable: true
label: {text: B, position: l}
pointC:
coordinates: [params.cx, params.cy]
draggable: true
label: {text: C}
showSegments: true
Here, the draggable: true attribute of the points allows them to be dragged along whatever parameters it uses. Here, both the x- and y-coordinates of each point are parameters, so the points can be dragged in the x- and y-direction. The angle will adjust as the points move around!