scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-04 03:45:58 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove GradientColor and move all documentation to Color.

Browse source
This commit is contained in:
Jürg Lehni 2013-04-09 08:23:20 -07:00
parent a99c91e729
commit fd0f4f0929
2 changed files with 166 additions and 297 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

166
src/color/Color.js
View file

@ -272,6 +272,71 @@ var Color = this.Color = Base.extend(new function() {
// Tell Base.read that the Point constructor supporst reading with index
_readIndex: true,
/**
* Creates a gradient color object.
*
* @name Color#initialize
* @param {Gradient} gradient
* @param {Point} origin
* @param {Point} destination
* @param {Point} [hilite]
*
* @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 Color(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({
* center: view.center,
* radius: 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, true);
*
* // 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 Color(gradient, from, to);
*
* // Set the fill color of the path to the gradient color:
* path.fillColor = gradientColor;
*/
initialize: function(arg) {
// We are storing color internally as an array of components
var slice = Array.prototype.slice,
@ -718,6 +783,107 @@ var Color = this.Color = Base.extend(new function() {
* @type Number
*/
/**
* {@grouptitle Gradient Components}
*
* The gradient object describing the type of gradient and the stops.
*
* @name Color#gradient
* @property
* @type Gradient
*/
/* The origin point of the gradient.
*
* @name Color#origin
* @property
* @type Point
*
* @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 Color(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;
* }
*/
/*
* The destination point of the gradient.
*
* @name Color#destination
* @property
* @type Point
*
* @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({
* center: view.center,
* radius: view.bounds.height * 0.4
* });
*
* var gradient = new Gradient(['yellow', 'red', 'black'], true);
* var from = view.center;
* var to = view.bounds.bottomRight;
* var gradientColor = new Color(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;
* }
*/
/**
* The hilite point of the gradient.
*
* @name Color#hilite
* @property
* @type Point
*
* @example {@paperscript height=300}
* // 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({
* center: view.center,
* radius: view.bounds.height * 0.4
* });
*
* var gradient = new Gradient(['yellow', 'red', 'black'], true);
* var from = path.position;
* var to = path.bounds.rightCenter;
* var gradientColor = new Color(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;
* }
*/
statics: /** @lends Color */{
// Export for backward compatibility code below.
_types: types,

297
src/color/GradientColor.js
View file

@ -1,297 +0,0 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
* http://lehni.org/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name GradientColor
*
* @class The GradientColor object.
*/
var GradientColor = this.GradientColor = Color.extend(/** @lends GradientColor# */{
/**
* Creates a gradient color object.
*
* @param {Gradient} gradient
* @param {Point} origin
* @param {Point} destination
* @param {Point} [hilite]
*
* @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 Color(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({
* center: view.center,
* radius: 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, true);
*
* // 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 Color(gradient, from, to);
*
* // Set the fill color of the path to the gradient color:
* path.fillColor = gradientColor;
*/
initialize: function(gradient, origin, destination, hilite) {
// Define this GradientColor's unique id.
this._id = ++Base._uid;
// Try object literal constructor first
if (!this._set(gradient)) {
this.setGradient(gradient || new Gradient());
this.setOrigin(origin);
this.setDestination(destination);
if (hilite)
this.setHilite(hilite);
}
},
/**
* @return {GradientColor} a copy of the gradient color
*/
clone: function() {
return new GradientColor(this._gradient, this._origin,
this._destination, this._hilite);
},
_serialize: function(options, dictionary) {
var values = [ this._gradient, this._origin, this._destination ];
if (this._hilite)
values.push(this._hilite);
return Base.serialize(values, options, true, dictionary);
},
/**
* The gradient object describing the type of gradient and the stops.
*
* @type Gradient
* @bean
*/
getGradient: function() {
return this._gradient;
},
setGradient: function(gradient) {
this._gradient = gradient;
gradient._addOwner(this);
this._changed();
},
/**
* The origin point of the gradient.
*
* @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 Color(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;
},
setOrigin: function(origin) {
this._origin = Point.read(arguments, 0, 0, true); // clone
this._changed();
},
/**
* The destination point of the gradient.
*
* @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({
* center: view.center,
* radius: view.bounds.height * 0.4
* });
*
* var gradient = new Gradient(['yellow', 'red', 'black'], true);
* var from = view.center;
* var to = view.bounds.bottomRight;
* var gradientColor = new Color(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;
},
setDestination: function(destination) {
this._destination = Point.read(arguments, 0, 0, true); // clone
this._changed();
},
/**
* The hilite point of the gradient.
*
* @type Point
* @bean
*
* @example {@paperscript height=300}
* // 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({
* center: view.center,
* radius: view.bounds.height * 0.4
* });
*
* var gradient = new Gradient(['yellow', 'red', 'black'], true);
* var from = path.position;
* var to = path.bounds.rightCenter;
* var gradientColor = new Color(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;
},
setHilite: function(hilite) {
this._hilite = Point.read(arguments, 0, 0, true); // clone
this._changed();
},
toCanvasStyle: function(ctx) {
if (this._canvasGradient)
return this._canvasGradient;
var stops = this._gradient._stops,
origin = this._origin,
destination = this._destination,
gradient;
if (this._gradient._radial) {
var radius = destination.getDistance(origin),
hilite = this._hilite;
if (hilite) {
var vector = hilite.subtract(origin);
if (vector.getLength() > radius)
hilite = origin.add(vector.normalize(radius - 0.1));
}
var start = hilite || origin;
gradient = ctx.createRadialGradient(start.x, start.y,
0, origin.x, origin.y, radius);
} else {
gradient = ctx.createLinearGradient(origin.x, origin.y,
destination.x, destination.y);
}
for (var i = 0, l = stops.length; i < l; i++) {
var stop = stops[i];
gradient.addColorStop(stop._rampPoint, stop._color.toCss());
}
return this._canvasGradient = gradient;
},
/**
* Checks if the gradient color has the same properties as that of the
* supplied one.
*
* @param {GradientColor} color
* @return {@true the GradientColor is the same}
*/
equals: function(color) {
return color === this || color && color._type === this._type
&& this._gradient.equals(color._gradient)
&& this._origin.equals(color._origin)
&& this._destination.equals(color._destination);
},
/**
* Transform the gradient color by the specified matrix.
*
* @param {Matrix} matrix the matrix to transform the gradient color by
*/
transform: function(matrix) {
matrix._transformPoint(this._origin, this._origin, true);
matrix._transformPoint(this._destination, this._destination, true);
if (this._hilite)
matrix._transformPoint(this._hilite, this._hilite, true);
}
});