JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements
Classes

Element Group

JXG.Group
      ↳ Group

This element combines a given set of JXG.Point elements to a group. The elements of the group and dependent elements can be translated, rotated and scaled by dragging one of the group elements.

Defined in: group.js.
Extends JXG.Group.

Element Summary
Constructor Attributes Constructor Name and Description
 
Methods borrowed from class JXG.Group:
_addActionPoint, _removeActionPoint, _setActionPoints, _update_apply_transformation, _update_centroid_center, _update_find_drag_type, _updateCoordsCache, addGroup, addParents, addPoint, addPoints, addRotationPoint, addScalePoint, addTranslationPoint, getParents, removePoint, removeRotationPoint, removeScalePoint, removeTranslationPoint, setParents, setProperty, setRotationCenter, setRotationPoints, setScaleCenter, setScalePoints, setTranslationPoints, ungroup, update
Element Detail
Group
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "group".

Possible parent array combinations are:
{JXG.Board} board

The board the points are on.


{Array} parents

Array of points to group.


{Object} attributes

Visual properties (unused).


Returns:
{JXG.Group}
Examples:
 // Create some free points. e.g. A, B, C, D
 // Create a group

 var p, col, g;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
 g = board.create('group', p);


				
				
 // Create some free points. e.g. A, B, C, D
 // Create a group
 // If the points define a polygon and the polygon has the attribute hasInnerPoints:true,
 // the polygon can be dragged around.

 var p, col, pol, g;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

 pol = board.create('polygon', p, {hasInnerPoints: true});
 g = board.create('group', p);


				
				
 // Allow rotations:
 // Define a center of rotation and declare points of the group as "rotation points".

 var p, col, pol, g;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
 p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
 p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

 pol = board.create('polygon', p, {hasInnerPoints: true});
 g = board.create('group', p);
 g.setRotationCenter(p[0]);
 g.setRotationPoints([p[1], p[2]]);


				
				
 // Allow rotations:
 // As rotation center, arbitrary points, coordinate arrays,
 // or functions returning coordinate arrays can be given.
 // Another possibility is to use the predefined string 'centroid'.

 // The methods to define the rotation points can be chained.

 var p, col, pol, g;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
 p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
 p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

 pol = board.create('polygon', p, {hasInnerPoints: true});
 g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[1], p[2]]);


				
				
 // Allow scaling:
 // As for rotation one can declare points of the group to trigger a scaling operation.
 // For this, one has to define a scaleCenter, in analogy to rotations.

 // Here, the yellow  point enables scaling, the red point a rotation.

 var p, col, pol, g;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
 p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
 p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));

 pol = board.create('polygon', p, {hasInnerPoints: true});
 g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[2]]);
 g.setScaleCenter(p[0]).setScalePoints(p[1]);


				
				
 // Allow Translations:
 // By default, every point of a group triggers a translation.
 // There may be situations, when this is not wanted.

 // In this example, E triggers nothing, but itself is rotation center
 // and is translated, if other points are moved around.

 var p, q, col, pol, g;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
 p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
 p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
 q = board.create('point',[0, 0], {size: 5, strokeColor:col, fillColor:col});

 pol = board.create('polygon', p, {hasInnerPoints: true});
 g = board.create('group', p.concat(q)).setRotationCenter('centroid').setRotationPoints([p[2]]);
 g.setScaleCenter(p[0]).setScalePoints(p[1]);
 g.removeTranslationPoint(q);


				
                

Attributes borrowed from other Elements

Fields borrowed from other Elements
Fields borrowed from class JXG.Group:
coords

Methods borrowed from other Elements
Methods borrowed from class JXG.Group:
_addActionPoint, _removeActionPoint, _setActionPoints, _update_apply_transformation, _update_centroid_center, _update_find_drag_type, _updateCoordsCache, addGroup, addParents, addPoint, addPoints, addRotationPoint, addScalePoint, addTranslationPoint, getParents, removePoint, removeRotationPoint, removeScalePoint, removeTranslationPoint, setParents, setProperty, setRotationCenter, setRotationPoints, setScaleCenter, setScalePoints, setTranslationPoints, ungroup, update

Events borrowed from other Elements
Documentation generated by JsDoc Toolkit 2.4.0 on Fri Mar 08 2024 12:21:00 GMT+0100 (Mitteleuropäische Normalzeit)