2011-06-12 14:04:25 -04:00
<!DOCTYPE html>
< html >
< head >
< title > GradientColor< / title >
< base target = "classFrame" >
< link rel = "stylesheet" href = "../resources/css/reference.css" type = "text/css" >
< link rel = "stylesheet" href = "../resources/css/style.css" type = "text/css" >
< link rel = "stylesheet" href = "../resources/css/paperscript.css" type = "text/css" >
< link rel = "stylesheet" href = "../resources/css/codemirror.css" type = "text/css" >
< script src = "../resources/js/bootstrap.js" type = "text/javascript" > < / script >
< script src = "../resources/js/paper.js" type = "text/javascript" > < / script >
< script src = "../resources/js/codemirror.js" type = "text/javascript" > < / script >
< script src = "../resources/js/reference.js" type = "text/javascript" > < / script >
< / head >
< body class = "reference" >
< div class = "reference-class" >
< h1 > GradientColor< / h1 >
< p > The GradientColor object.< / p >
2011-06-17 06:41:47 -04:00
2011-06-12 14:04:25 -04:00
< / div >
<!-- ============================== constructors ========================= -->
< div class = "reference-members" > < h2 > Constructors< / h2 >
< div id = "gradientcolor-gradient-origin-destination-member" class = "member" >
< div id = "gradientcolor-gradient-origin-destination-link" class = "member-link" >
< a name = "gradientcolor-gradient-origin-destination" href = "#" onClick = "return toggleMember('gradientcolor-gradient-origin-destination', false);" > < tt > < b > GradientColor< / b > (gradient, origin, destination[, hilite])< / tt > < / a >
< / div >
< div id = "gradientcolor-gradient-origin-destination-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('gradientcolor-gradient-origin-destination', false);" > < tt > < b > GradientColor< / b > (gradient, origin, destination[, hilite])< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('gradientcolor-gradient-origin-destination', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Creates a gradient color object.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > gradient:< / tt >
< a href = "../classes/Gradient.html" > < tt > Gradient< / tt > < / a >
< / li >
< li >
< tt > origin:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< li >
< tt > destination:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< li >
< tt > hilite:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
— optional
< / li >
< / ul >
< p >
< b > Example< / b > — Applying a linear gradient color containing evenly distributed color stops:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-0" >
2011-06-12 14:04:25 -04:00
// 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;
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "200" id = "canvas-0" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< p >
< b > Example< / b > — Applying a radial gradient color containing unevenly distributed color stops:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-1" >
2011-06-12 14:04:25 -04:00
// 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;
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "200" id = "canvas-1" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "reference-members" > < h2 > Properties< / h2 >
< div id = "origin-member" class = "member" >
< div id = "origin-link" class = "member-link" >
< a name = "origin" href = "#" onClick = "return toggleMember('origin', false);" > < tt > < b > origin< / b > < / tt > < / a >
< / div >
< div id = "origin-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('origin', false);" > < tt > < b > origin< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('origin', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The origin point of the gradient.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< p >
< b > Example< / b > — Move the origin point of the gradient, by moving your mouse over the view below:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-2" >
2011-06-12 14:04:25 -04:00
// 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;
}
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "200" id = "canvas-2" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< / div >
< div id = "destination-member" class = "member" >
< div id = "destination-link" class = "member-link" >
< a name = "destination" href = "#" onClick = "return toggleMember('destination', false);" > < tt > < b > destination< / b > < / tt > < / a >
< / div >
< div id = "destination-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('destination', false);" > < tt > < b > destination< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('destination', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The destination point of the gradient.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< p >
< b > Example< / b > — Move the destination point of the gradient, by moving your mouse over the view below:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-3" >
2011-06-12 14:04:25 -04:00
// 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;
}
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "300" id = "canvas-3" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< / div >
< div id = "hilite-member" class = "member" >
< div id = "hilite-link" class = "member-link" >
< a name = "hilite" href = "#" onClick = "return toggleMember('hilite', false);" > < tt > < b > hilite< / b > < / tt > < / a >
< / div >
< div id = "hilite-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('hilite', false);" > < tt > < b > hilite< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('hilite', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The hilite point of the gradient.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
< p >
< b > Example< / b > — Move the hilite point of the gradient, by moving your mouse over the view below:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-4" >
2011-06-12 14:04:25 -04:00
// 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;
}
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "300" id = "canvas-4" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- ============================== methods ================================ -->
2011-06-17 06:41:47 -04:00
< div class = "reference-members" > < h2 > Methods< / h2 >
2011-06-12 14:04:25 -04:00
< div id = "clone-member" class = "member" >
< div id = "clone-link" class = "member-link" >
< a name = "clone" href = "#" onClick = "return toggleMember('clone', false);" > < tt > < b > clone< / b > ()< / tt > < / a >
< / div >
< div id = "clone-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('clone', false);" > < tt > < b > clone< / b > ()< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('clone', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< ul > < b > Returns:< / b >
< li >
< tt > < a href = "../classes/GradientColor.html" > < tt > GradientColor< / tt > < / a > < / tt > — a copy of the gradient color
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "equals-color-member" class = "member" >
< div id = "equals-color-link" class = "member-link" >
< a name = "equals-color" href = "#" onClick = "return toggleMember('equals-color', false);" > < tt > < b > equals< / b > (color)< / tt > < / a >
< / div >
< div id = "equals-color-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('equals-color', false);" > < tt > < b > equals< / b > (color)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('equals-color', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Checks if the gradient color has the same properties as that of the
supplied one.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > color:< / tt >
< a href = "../classes/GradientColor.html" > < tt > GradientColor< / tt > < / a >
< / li >
< / ul >
< ul > < b > Returns:< / b >
< li >
< tt > < / tt > — < tt > true< / tt > the GradientColor is the same, < tt > false< / tt > otherwise
< / li >
< / ul >
< / div >
< / div >
< / div >
< div id = "transform-matrix-member" class = "member" >
< div id = "transform-matrix-link" class = "member-link" >
< a name = "transform-matrix" href = "#" onClick = "return toggleMember('transform-matrix', false);" > < tt > < b > transform< / b > (matrix)< / tt > < / a >
< / div >
< div id = "transform-matrix-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('transform-matrix', false);" > < tt > < b > transform< / b > (matrix)< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('transform-matrix', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Transform the gradient color by the specified matrix.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > matrix:< / tt >
< a href = "../classes/Matrix.html" > < tt > Matrix< / tt > < / a >
— the matrix to transform the gradient color by
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
<!-- =========================== copyright notice ========================= -->
2011-06-17 06:41:47 -04:00
< p class = "footer" > Copyright © 2011 < a href = "http://www.lehni.org" target = "_blank" > Jü rg Lehni< / a > & < a href = "http://www.jonathanpuckey.com" target = "_blank" > Jonathan Puckey< / a > . All Rights Reserved.< / p >
< div class = "content-end" > < / div >
2011-06-12 14:04:25 -04:00
< / body >
