Improve Group example code.

This commit is contained in:
Jonathan Puckey 2011-06-03 14:25:25 +02:00
parent 831159147f
commit e9260562f2

View file

@ -19,36 +19,47 @@ var Group = this.Group = Item.extend({
beans: true,
// DOCS: document new Group(item, item...);
/**
* Creates a new Group item and places it at the top of the active layer.
*
* @param {Array} [children] An optional array of children that will be
* added to the newly created group.
*
* @example
* // Create an empty group and append a path to the top of its children
* // array:
* @example {@paperscript split=true height=200}
* // Create a group containing two paths:
* var path = new Path(new Point(100, 100), new Point(100, 200));
* var path2 = new Path(new Point(50, 150), new Point(150, 150));
*
* // Create an empty group:
* var group = new Group();
*
* var path = new Path([new Point(10, 10), new Point(50, 50)]);
* path.strokeColor = 'black';
*
* // Append the path to the group:
* group.appendTop(path);
* // Create a group from the two paths:
* var group = new Group([path, path2]);
*
* // Set the stroke color of all items in the group:
* circleGroup.strokeColor = 'black';
* group.strokeColor = 'black';
*
* @example
* // Create a group containing two paths:
* var circle = new Path.Circle(new Point(30, 50), 10);
* var circle2 = new Path.Circle(new Point(50, 50), 10);
* // Move the group to the center of the view:
* group.position = view.center;
*
* var circleGroup = new Group([circle, circle2]);
* // Set the fill color of all items in the group:
* circleGroup.fillColor = 'black';
* @example {@paperscript split=true}
* // Click in the view to add a path to the group, which in turn is rotated
* // every frame:
* var group = new Group();
*
* function onMouseDown(event) {
* // Create a new circle shaped path at the position
* // of the mouse:
* var path = new Path.Circle(event.point, 5);
* path.fillColor = 'black';
*
* // Move the path to the top of the group's children list:
* group.appendTop(path);
* }
*
* function onFrame(event) {
* // Rotate the group by 1 degree from
* // the centerpoint of the view:
* group.rotate(1, view.center);
* }
*
* @class A Group is a collection of items. When you transform a Group, its
* children are treated as a single unit without changing their relative