- drawComponent.surface.on({
- 'mousemove': function() {
- console.log('moving the mouse over the surface');
- }
- });
+ * drawComponent.surface.on({
+ * 'mousemove': function() {
+ * console.log('moving the mouse over the surface');
+ * }
+ * });
+ *
+ * ## Example
+ *
+ * drawComponent.surface.add([
+ * {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#f00',
+ * x: 10,
+ * y: 10,
+ * group: 'circles'
+ * },
+ * {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#0f0',
+ * x: 50,
+ * y: 50,
+ * group: 'circles'
+ * },
+ * {
+ * type: 'circle',
+ * radius: 10,
+ * fill: '#00f',
+ * x: 100,
+ * y: 100,
+ * group: 'circles'
+ * },
+ * {
+ * type: 'rect',
+ * radius: 10,
+ * x: 10,
+ * y: 10,
+ * group: 'rectangles'
+ * },
+ * {
+ * type: 'rect',
+ * radius: 10,
+ * x: 50,
+ * y: 50,
+ * group: 'rectangles'
+ * },
+ * {
+ * type: 'rect',
+ * radius: 10,
+ * x: 100,
+ * y: 100,
+ * group: 'rectangles'
+ * }
+ * ]);
+ *
+ * // Get references to my groups
+ * my circles = surface.getGroup('circles');
+ * my rectangles = surface.getGroup('rectangles');
+ *
+ * // Animate the circles down
+ * circles.animate({
+ * duration: 1000,
+ * translate: {
+ * y: 200
+ * }
+ * });
+ *
+ * // Animate the rectangles across
+ * rectangles.animate({
+ * duration: 1000,
+ * translate: {
+ * x: 200
+ * }
+ * });