<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</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>
<script type="text/paperscript" canvas="canvas-0">
// 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>
<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
</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>
<script type="text/paperscript" canvas="canvas-1">
// 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>
<div class="canvas"><canvas width="516" height="200" id="canvas-1"></canvas></div>
</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>
<script type="text/paperscript" canvas="canvas-2">
// 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>
<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
</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>
<script type="text/paperscript" canvas="canvas-3">
// 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>
<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
</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>
<script type="text/paperscript" canvas="canvas-4">
// 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>
<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members"><h2>Methods</h2>
<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 ========================= -->
<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>
</body>