2011-06-12 14:04:25 -04:00
<!DOCTYPE html>
< html >
< head >
2011-08-01 07:05:06 -04:00
< meta charset = "UTF-8" >
2011-06-12 14:04:25 -04:00
< title > GradientStop< / 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 > GradientStop< / h1 >
< p > The GradientStop 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 = "gradientstop-member" class = "member" >
< div id = "gradientstop-link" class = "member-link" >
< a name = "gradientstop" href = "#" onClick = "return toggleMember('gradientstop', false);" > < tt > < b > GradientStop< / b > ([color[, rampPoint]])< / tt > < / a >
< / div >
< div id = "gradientstop-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('gradientstop', false);" > < tt > < b > GradientStop< / b > ([color[, rampPoint]])< / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('gradientstop', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > Creates a GradientStop object.< / p >
< ul > < b > Parameters:< / b >
< li >
< tt > color:< / tt >
< a href = "../classes/Color.html" > < tt > Color< / tt > < / a >
— the color of the stop
2011-11-10 13:19:25 -05:00
— optional, default: < tt > new RgbColor(0, 0, 0)< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< li >
< tt > rampPoint:< / tt >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
— the position of the stop on the gradient
ramp {@default 0}
— optional, default: < tt > 0< / tt >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< div class = "reference-members" > < h2 > Properties< / h2 >
< div id = "ramppoint-member" class = "member" >
< div id = "ramppoint-link" class = "member-link" >
< a name = "ramppoint" href = "#" onClick = "return toggleMember('ramppoint', false);" > < tt > < b > rampPoint< / b > < / tt > < / a >
< / div >
< div id = "ramppoint-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('ramppoint', false);" > < tt > < b > rampPoint< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('ramppoint', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The ramp-point of the gradient stop as a value between < tt > 0< / tt > and
< tt > 1< / tt > .< / p >
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< p >
< b > Example< / b > — Animating a gradient's ramp points:
< / 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
// 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);
// Prepare the gradient color and apply it to the path:
var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
var gradient = new Gradient(colors, 'radial');
var from = path.position;
var to = path.bounds.rightCenter;
var gradientColor = new GradientColor(gradient, from, to);
path.fillColor = gradientColor;
// This function is called each frame of the animation:
function onFrame(event) {
var blackStop = gradient.stops[2];
// Animate the rampPoint between 0.7 and 0.9:
blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
2011-07-13 08:30:22 -04:00
2011-06-12 14:04:25 -04:00
// Animate the rampPoint between 0.2 and 0.4
var redStop = gradient.stops[1];
redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
}
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "300" id = "canvas-0" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< / div >
< div id = "color-member" class = "member" >
< div id = "color-link" class = "member-link" >
< a name = "color" href = "#" onClick = "return toggleMember('color', false);" > < tt > < b > color< / b > < / tt > < / a >
< / div >
< div id = "color-description" class = "member-description hidden" >
< div class = "member-header" >
< div class = "member-title" >
< div class = "member-link" >
< a href = "#" onClick = "return toggleMember('color', false);" > < tt > < b > color< / b > < / tt > < / a >
< / div >
< / div >
< div class = "member-close" > < input type = "button" value = "Close" onClick = "toggleMember('color', false);" > < / div >
< div class = "clear" > < / div >
< / div >
< div class = "member-text" >
< p > The color of the gradient stop.< / p >
< ul > < b > Type:< / b >
< li >
< a href = "../classes/Color.html" > < tt > Color< / tt > < / a >
< / li >
< / ul >
< p >
< b > Example< / b > — Animating a gradient's ramp points:
< / 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,
// 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);
// Create a radial gradient that mixes red and black evenly:
var gradient = new Gradient(['red', 'black'], 'radial');
// Fill the path with a gradient color that runs from its center,
// to the right center of its bounding rectangle:
var from = path.position;
var to = path.bounds.rightCenter;
var gradientColor = new GradientColor(gradient, from, to);
path.fillColor = gradientColor;
// This function is called each frame of the animation:
function onFrame(event) {
// Change the hue of the first stop's color:
gradient.stops[0].color.hue += 1;
}
< / script >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "300" id = "canvas-1" > < / 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-stop
< / 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 >
