Sector - Documentation

Usage (signatures)

board.create('sector', [center, p1, p2]);

A sector is defined by three points: The sector's center center, a point p1`` defining the radius and a further point p2defining the angle of the sector. The Sector is always drawn counter clockwise fromp1top2`.

The sector has an arc as sub-object.

Parameters

Name	Type	Description
`center`	PointLike
`p1`	PointLike
`p2`	PointLike

Examples

// Create a sector out of three free points
var p1 = board.create('point', [1.5, 5.0]),
    p2 = board.create('point', [1.0, 0.5]),
    p3 = board.create('point', [5.0, 3.0]),

    a = board.create('sector', [p1, p2, p3]);

var A = board.create('point', [3, -2]),
    B = board.create('point', [-2, -2]),
    C = board.create('point', [0, 4]);

var angle = board.create('sector', [B, A, C], {
        strokeWidth: 0,
        arc: {
        	visible: true,
        	strokeWidth: 3,
          lastArrow: {size: 4},
          firstArrow: {size: 4}
        }
      });
//angle.arc.setAttribute({firstArrow: false});
angle.arc.setAttribute({lastArrow: false});

board.create('sector', [line1, line2, c1, c2, r]);

The sector is defined by two lines. The two legs which define the sector are given by two coordinates arrays which are projected initially to the two lines or by two directions +/- 1. If the two lines are parallel, two of the defining points on different lines have to coincide. This will be the center of the sector. The last parameter is the radius of the sector.

In this case, the sector will not have an arc as sub-object.

Parameters

Name	Type	Description
`line1`	Line
`line2`	Line
`c1`	Array \| Number	Coords1 or direction `+/- 1`
`c2`	Array \| Number	Coords2 or direction `+/- 1`
`r`	NumberLike	radius

Examples

// Create a sector out of two lines, two directions and a radius
var p1 = board.create('point', [-1, 4]),
 p2 = board.create('point', [4, 1]),
 q1 = board.create('point', [-2, -3]),
 q2 = board.create('point', [4,3]),

 li1 = board.create('line', [p1,p2], {strokeColor:'black', lastArrow:true}),
 li2 = board.create('line', [q1,q2], {lastArrow:true}),

 sec1 = board.create('sector', [li1, li2, [5.5, 0], [4, 3], 3]),
 sec2 = board.create('sector', [li1, li2, 1, -1, 4]);

var t = board.create('transform', [2, 1.5], {type: 'scale'});
var s1 = board.create('sector', [[-3.5,-3], [-3.5, -2], [-3.5,-4]], {
                anglePoint: {visible:true}, center: {visible: true}, radiusPoint: {visible: true},
                fillColor: 'yellow', strokeColor: 'black'});
var s2 = board.create('curve', [s1, t], {fillColor: 'yellow', strokeColor: 'black'});

Attributes

Own

anglePoint

Description: Attributes for helper point anglepoint in case it is provided by coordinates.
Type: Point
Source: options.js, line 8752

arc

Description: Attributes for sub-element arc. It is only available, if the sector is defined by three points.
Type: Arc
Default Value: '{visible:false}'
Source: options.js, line 8693

center

Description: Attributes for helper point center in case it is provided by coordinates.
Type: Point
Source: options.js, line 8740

label

Description: Attributes for the sector label.
Type: Label
Source: options.js, line 8764

orientation

Description

Orientation of the sector: 'clockwise' or 'counterclockwise' (default).

If the attribute 'selection' is set to 'minor' or 'major' and "the other" angle sector is to be taken, the orientation of the angle switches, too.

Type

String

Default Value

'counterclockwise'

Example

var p1, p2, p3, a;
p1 = board.create('point', [0, 0]);
p2 = board.create('point', [4, 0]);
p3 = board.create('point', [3, 3]);
a = board.create('sector', [p1, p2, p3], {
    name: 'φ',
    // selection: 'minor',
    orientation: 'clockwise',
    arc: {
        visible: true,
        strokeWidth: 4,
        lastArrow: true,
    }
});

Source

options.js, line 8639

radiusPoint

Description: Attributes for helper point radiuspoint in case it is provided by coordinates.
Type: Point
Source: options.js, line 8728

selection

Description: Type of sector. Possible values are 'minor', 'major', and 'auto'.
Type: String
Default Value: 'auto'
Source: options.js, line 8629

Inherited

none

Members

Own

point1 : JXG.Point

Description: Midpoint of the sector.
Type: JXG.Point
Source: element/sector.js, line 466

point2 : JXG.Point

Description: This point together with Sector#point1 defines the radius.
Type: JXG.Point
Source: element/sector.js, line 474

point3 : JXG.Point

Description: Defines the sector's angle.
Type: JXG.Point
Source: element/sector.js, line 482

point4 : JXG.Point

Description: Defines the sectors orientation in case of circumCircleSectors.
Type: JXG.Point
Source: element/sector.js, line 504

Inherited

none

Methods

Own

Area() → {Number}

Area of the sector.

Returns

The area of the sector.

Type: Number

Details

Source: element/sector.js, line 902

L() → {Number}

Arc length.

Returns

Length of the sector's arc.

Type: Number

Details

See

Arc#L

Source

element/sector.js, line 890

Perimeter() → {Number}

Sector perimeter, i.e. arc length plus 2 * radius.

Returns

Perimeter of sector.

Type: Number

Details

Source: element/sector.js, line 915

Radius() → {Number}

Returns the radius of the sector.

Returns

The distance between Sector#point1 and Sector#point2.

Type: Number

Details

Source: element/sector.js, line 584

Value(unit) → {Number}

Length of the sector's arc or the angle in various units, see Arc#Value.

Parameters

Name	Type	Description
`unit`	String

Returns

The arc length or the angle value in various units.

Type: Number

Details

See

Arc#Value

Source

element/sector.js, line 877

(private) autoRadius() → {Number}

Sets radius if the attribute radius has value 'auto'. Sets a radius between 20 and 50 points, depending on the distance between the center and the radius point. This function is used in Angle.

Returns

returns a radius value in user coordinates.

Type: Number

Details

Source: element/sector.js, line 240

hasPointSector(x, y) → {Boolean}

Checks whether (x,y) is within the area defined by the sector.

Parameters

Name	Type	Description
`x`	Number	Coordinate in x direction, screen coordinates.
`y`	Number	Coordinate in y direction, screen coordinates.

Returns

True if (x,y) is within the sector defined by the arc, False otherwise.

Type: Boolean

Details

Source: element/sector.js, line 709

(private) setPositionDirectly(method, coords, oldcoords) → {JXG.Curve}

Moves the sector by the difference of two coordinates.

Parameters

Name	Type	Description
`method`	Number	The type of coordinates used here. Possible values are JXG.COORDS_BY_USER and JXG.COORDS_BY_SCREEN.
`coords`	Array	coordinates in screen/user units
`oldcoords`	Array	previous coordinates in screen/user units

Returns

this element

Type: JXG.Curve

Details

Source: element/sector.js, line 927

setRadius(value)

Overwrite the Radius method of the sector. Used in GeometryElement#setAttribute.

Parameters

Name	Type	Description
`value`	Number \| function	New radius.

Details

Source: element/sector.js, line 831

Inherited

none

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.
Type Error

Details

Type: JXG.Curve
Source: element/sector.js, line 43