mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-06 04:42:15 -05:00
Remove GradientColor and move all documentation to Color.
This commit is contained in:
parent
a99c91e729
commit
fd0f4f0929
2 changed files with 166 additions and 297 deletions
|
@ -272,6 +272,71 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
// Tell Base.read that the Point constructor supporst reading with index
|
// Tell Base.read that the Point constructor supporst reading with index
|
||||||
_readIndex: true,
|
_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) {
|
initialize: function(arg) {
|
||||||
// We are storing color internally as an array of components
|
// We are storing color internally as an array of components
|
||||||
var slice = Array.prototype.slice,
|
var slice = Array.prototype.slice,
|
||||||
|
@ -718,6 +783,107 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
* @type Number
|
* @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 */{
|
statics: /** @lends Color */{
|
||||||
// Export for backward compatibility code below.
|
// Export for backward compatibility code below.
|
||||||
_types: types,
|
_types: types,
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
Loading…
Reference in a new issue