Merge remote-tracking branch 'origin/master'

This commit is contained in:
Jürg Lehni 2011-06-10 02:50:17 +01:00
commit 611415fea7
2 changed files with 168 additions and 0 deletions

View file

@ -28,6 +28,59 @@ var GradientColor = this.GradientColor = Color.extend({
* @param {Point} [hilite]
* @constructs GradientColor
*
* @example {@paperscript height=200}
* // Applying a linear gradient color containing evenly distributed
* // color stops:
*
* // Define two points which we will be using to construct
* // the path and to position the gradient color:
* var topLeft = view.center - [80, 80];
* var bottomRight = view.center + [80, 80];
*
* // Create a rectangle shaped path between
* // the topLeft and bottomRight points:
* var path = new Path.Rectangle(topLeft, bottomRight);
*
* // Create the gradient, passing it an array of colors to be converted
* // to evenly distributed color stops:
* var gradient = new Gradient(['yellow', 'red', 'blue']);
*
* // Have the gradient color run between the topLeft and
* // bottomRight points we defined earlier:
* var gradientColor = new GradientColor(gradient, topLeft, bottomRight);
*
* // Set the fill color of the path to the gradient color:
* path.fillColor = gradientColor;
*
* @example {@paperscript height=200}
* // Applying a radial gradient color containing unevenly distributed
* // color stops:
*
* // Create a circle shaped path at the center of the view
* // with a radius of 80:
* var path = new Path.Circle(view.center, 80);
*
* // The stops array: yellow mixes with red between 0 and 15%,
* // 15% to 30% is pure red, red mixes with black between 30% to 100%:
* var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
*
* // Create a radial gradient using the color stops array:
* var gradient = new Gradient(stops, 'radial');
*
* // We will use the center point of the circle shaped path as
* // the origin point for our gradient color
* var from = path.position;
*
* // The destination point of the gradient color will be the
* // center point of the path + 80pt in horizontal direction:
* var to = path.position + [80, 0];
*
* // Create the gradient color:
* var gradientColor = new GradientColor(gradient, from, to);
*
* // Set the fill color of the path to the gradient color:
* path.fillColor = gradientColor;
*
* @class The GradientColor object.
*/
initialize: function(gradient, origin, destination, hilite) {
@ -51,6 +104,29 @@ var GradientColor = this.GradientColor = Color.extend({
*
* @type Point
* @bean
*
* @example {@paperscript height=200}
* // Move the origin point of the gradient, by moving your mouse over
* // the view below:
*
* // Create a rectangle shaped path with the same dimensions as
* // that of the view and fill it with a gradient color:
* var path = new Path.Rectangle(view.bounds);
* var gradient = new Gradient(['yellow', 'red', 'blue']);
*
* // Have the gradient color run from the top left point of the view,
* // to the bottom right point of the view:
* var from = view.bounds.topLeft;
* var to = view.bounds.bottomRight;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
* function onMouseMove(event) {
* // Set the origin point of the path's gradient color
* // to the position of the mouse:
* path.fillColor.origin = event.point;
* }
*
*/
getOrigin: function() {
return this._origin;
@ -70,6 +146,27 @@ var GradientColor = this.GradientColor = Color.extend({
*
* @type Point
* @bean
*
* @example {@paperscript height=300}
* // Move the destination point of the gradient, by moving your mouse over
* // the view below:
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
*
* var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
* var from = view.center;
* var to = view.bounds.bottomRight;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
* function onMouseMove(event) {
* // Set the origin point of the path's gradient color
* // to the position of the mouse:
* path.fillColor.destination = event.point;
* }
*/
getDestination: function() {
return this._destination;
@ -88,6 +185,26 @@ var GradientColor = this.GradientColor = Color.extend({
*
* @type Point
* @bean
*
* @example {@paperscript height=300}
* // Move the hilite point of the gradient, by moving your mouse over
* // the view below:
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
* var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
* var from = path.position;
* var to = path.bounds.rightCenter;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
* function onMouseMove(event) {
* // Set the origin hilite of the path's gradient color
* // to the position of the mouse:
* path.fillColor.hilite = event.point;
* }
*/
getHilite: function() {
return this._hilite;

View file

@ -59,6 +59,33 @@ var GradientStop = this.GradientStop = Base.extend({
*
* @type Number
* @bean
*
* @example {@paperscript height=300}
* // Animating a gradient's ramp points:
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
*
* // Prepare the gradient color and apply it to the path:
* var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
* var gradient = new Gradient(colors, 'radial');
* var from = path.position;
* var to = path.bounds.rightCenter;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
* // This function is called each frame of the animation:
* function onFrame(event) {
* var blackStop = gradient.stops[2];
* // Animate the rampPoint between 0.7 and 0.9:
* blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
*
* // Animate the rampPoint between 0.2 and 0.4
* var redStop = gradient.stops[1];
* redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
* }
*/
getRampPoint: function() {
return this._rampPoint;
@ -74,6 +101,30 @@ var GradientStop = this.GradientStop = Base.extend({
*
* @type Color
* @bean
*
* @example {@paperscript height=300}
* // Animating a gradient's ramp points:
*
* // Create a circle shaped path at the center of the view,
* // using 40% of the height of the view as its radius
* // and fill it with a radial gradient color:
* var path = new Path.Circle(view.center, view.bounds.height * 0.4);
*
* // Create a radial gradient that mixes red and black evenly:
* var gradient = new Gradient(['red', 'black'], 'radial');
*
* // Fill the path with a gradient color that runs from its center,
* // to the right center of its bounding rectangle:
* var from = path.position;
* var to = path.bounds.rightCenter;
* var gradientColor = new GradientColor(gradient, from, to);
* path.fillColor = gradientColor;
*
* // This function is called each frame of the animation:
* function onFrame(event) {
* // Change the hue of the first stop's color:
* gradient.stops[0].color.hue += 1;
* }
*/
getColor: function() {
return this._color;