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.
| 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
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