mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-07 13:22:07 -05:00
464 lines
No EOL
13 KiB
HTML
464 lines
No EOL
13 KiB
HTML
<!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>
|
|
|
|
</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> |