From a880396d26e7d7ff1a223e4037eb1ba4cd4ad1ed Mon Sep 17 00:00:00 2001 From: Jonathan Puckey Date: Thu, 9 Jun 2011 23:21:06 +0200 Subject: [PATCH 1/2] Add example code to GradientColor & GradientStop. --- src/color/GradientColor.js | 117 +++++++++++++++++++++++++++++++++++++ src/color/GradientStop.js | 51 ++++++++++++++++ 2 files changed, 168 insertions(+) diff --git a/src/color/GradientColor.js b/src/color/GradientColor.js index c8095c32..19d8b9fb 100644 --- a/src/color/GradientColor.js +++ b/src/color/GradientColor.js @@ -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', 'blue'], '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; diff --git a/src/color/GradientStop.js b/src/color/GradientStop.js index 8d4df990..48909aff 100644 --- a/src/color/GradientStop.js +++ b/src/color/GradientStop.js @@ -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; From 1bca7f479511f723ade6a8c82d90cba2b111d6bb Mon Sep 17 00:00:00 2001 From: Jonathan Puckey Date: Thu, 9 Jun 2011 23:27:11 +0200 Subject: [PATCH 2/2] Adjust GradientColor example. --- src/color/GradientColor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/color/GradientColor.js b/src/color/GradientColor.js index 19d8b9fb..d2f33b4b 100644 --- a/src/color/GradientColor.js +++ b/src/color/GradientColor.js @@ -156,7 +156,7 @@ var GradientColor = this.GradientColor = Color.extend({ * // 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', 'blue'], 'radial'); + * var gradient = new Gradient(['yellow', 'red', 'black'], 'radial'); * var from = view.center; * var to = view.bounds.bottomRight; * var gradientColor = new GradientColor(gradient, from, to);