<!DOCTYPE html> <html> <head> <title>Color</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>Color</h1> </div> <!-- ============================== properties ========================= --> <div class="reference-members"><h2>Operators</h2> <div id="equals-member" class="member"> <div id="equals-link" class="member-link"> <a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Color</tt></tt></a> </div> <div id="equals-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Color</tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>Checks if the component color values of the color are the same as those of the supplied one.</p> <ul><b>Returns:</b> <li> <tt>Boolean</tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise </li> </ul> </div> </div> </div> </div> <div class="reference-members"><h2>Properties</h2> <div id="type-member" class="member"> <div id="type-link" class="member-link"> <a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a> </div> <div id="type-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>Returns the type of the color as a string.</p> <p>Example:</p> <pre class="code"> var color = new RGBColor(1, 0, 0); console.log(color.type); // 'rgb' </pre> <ul><b>Type:</b> <li> String('rgb', 'hsb', 'gray') </li> </ul> </div> </div> </div> <div id="alpha-member" class="member"> <div id="alpha-link" class="member-link"> <a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a> </div> <div id="alpha-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All colors of the different subclasses support alpha values.</p> <ul><b>Type:</b> <li> Number </li> </ul> <p> <b>Example</b> — A filled path with a half transparent stroke: </p> <div class="paperscript split"> <div class="button">Run</div> <script type="text/paperscript" canvas="canvas4"> var circle = new Path.Circle(new Point(80, 50), 30); // Fill the circle with red and give it a 20pt green stroke: circle.style = { fillColor: 'red', strokeColor: 'green', strokeWidth: 20 }; // Make the stroke half transparent: circle.strokeColor.alpha = 0.5; </script> <div class="canvas"><canvas width="516" height="100" id="canvas4"></canvas></div> </div> </div> </div> </div> <h3>RGB Components</h3> <div id="red-member" class="member"> <div id="red-link" class="member-link"> <a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a> </div> <div id="red-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The amount of red in the color as a value between <tt>0</tt> and <tt>1</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> <p> <b>Example</b> — Changing the amount of red in a color: </p> <div class="paperscript split"> <div class="button">Run</div> <script type="text/paperscript" canvas="canvas5"> var circle = new Path.Circle(new Point(80, 50), 30); circle.fillColor = 'blue'; // Blue + red = purple: circle.fillColor.red = 1; </script> <div class="canvas"><canvas width="516" height="100" id="canvas5"></canvas></div> </div> </div> </div> </div> <div id="green-member" class="member"> <div id="green-link" class="member-link"> <a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a> </div> <div id="green-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The amount of green in the color as a value between <tt>0</tt> and <tt>1</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> <p> <b>Example</b> — Changing the amount of green in a color: </p> <div class="paperscript split"> <div class="button">Run</div> <script type="text/paperscript" canvas="canvas6"> var circle = new Path.Circle(new Point(80, 50), 30); // First we set the fill color to red: circle.fillColor = 'red'; // Red + green = yellow: circle.fillColor.green = 1; </script> <div class="canvas"><canvas width="516" height="100" id="canvas6"></canvas></div> </div> </div> </div> </div> <div id="blue-member" class="member"> <div id="blue-link" class="member-link"> <a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a> </div> <div id="blue-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The amount of blue in the color as a value between <tt>0</tt> and <tt>1</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> <p> <b>Example</b> — Changing the amount of blue in a color: </p> <div class="paperscript split"> <div class="button">Run</div> <script type="text/paperscript" canvas="canvas7"> var circle = new Path.Circle(new Point(80, 50), 30); // First we set the fill color to red: circle.fillColor = 'red'; // Red + blue = purple: circle.fillColor.blue = 1; </script> <div class="canvas"><canvas width="516" height="100" id="canvas7"></canvas></div> </div> </div> </div> </div> <h3>Gray Components</h3> <div id="gray-member" class="member"> <div id="gray-link" class="member-link"> <a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a> </div> <div id="gray-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The amount of gray in the color as a value between <tt>0</tt> and <tt>1</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> </div> </div> </div> <h3>HSB Components</h3> <div id="hue-member" class="member"> <div id="hue-link" class="member-link"> <a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a> </div> <div id="hue-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The hue of the color as a value in degrees between <tt>0</tt> and <tt>360</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> <p> <b>Example</b> — Changing the hue of a color: </p> <div class="paperscript split"> <div class="button">Run</div> <script type="text/paperscript" canvas="canvas8"> var circle = new Path.Circle(new Point(80, 50), 30); circle.fillColor = 'red'; circle.fillColor.hue += 30; </script> <div class="canvas"><canvas width="516" height="100" id="canvas8"></canvas></div> </div> <p> <b>Example</b> — Hue cycling: </p> <div class="paperscript split"> <div class="button">Run</div> <script type="text/paperscript" canvas="canvas9"> // Create a rectangle shaped path, using the dimensions // of the view: var path = new Path.Rectangle(view.bounds); path.fillColor = 'red'; function onFrame(event) { path.fillColor.hue += 0.5; } </script> <div class="canvas"><canvas width="516" height="100" id="canvas9"></canvas></div> </div> </div> </div> </div> <div id="saturation-member" class="member"> <div id="saturation-link" class="member-link"> <a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a> </div> <div id="saturation-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> </div> </div> </div> <div id="brightness-member" class="member"> <div id="brightness-link" class="member-link"> <a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a> </div> <div id="brightness-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p> <ul><b>Type:</b> <li> Number </li> </ul> </div> </div> </div> </div> <!-- ============================== methods ================================ --> <div class="reference-members"><h2>Functions</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/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a></tt> — a copy of the color object </li> </ul> </div> </div> </div> <div id="hasalpha-member" class="member"> <div id="hasalpha-link" class="member-link"> <a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a> </div> <div id="hasalpha-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <p>Checks if the color has an alpha value.</p> <ul><b>Returns:</b> <li> <tt>Boolean</tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise </li> </ul> </div> </div> </div> <h3>String Representations</h3> <div id="tostring-member" class="member"> <div id="tostring-link" class="member-link"> <a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a> </div> <div id="tostring-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <ul><b>Returns:</b> <li> <tt>String</tt> — A string representation of the color. </li> </ul> </div> </div> </div> <div id="tocssstring-member" class="member"> <div id="tocssstring-link" class="member-link"> <a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a> </div> <div id="tocssstring-description" class="member-description hidden"> <div class="member-header"> <div class="member-title"> <div class="member-link"> <a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a> </div> </div> <div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div> <div class="clear"></div> </div> <div class="member-text"> <ul><b>Returns:</b> <li> <tt>String</tt> — A css string representation of the color. </li> </ul> </div> </div> </div> </div> <!-- =========================== copyright notice ========================= --> <p class="footer">Copyright © 21011 <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> </body>