5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<style scoped>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#custom-doc { width: 95%; min-width: 950px; }
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:400px;
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="intro">
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86TrippThis example shows how to create gradient fills for a shape. By default, the `fill` attribute of a shape instance will generate a solid fill for the shape. Setting the `type` property on the `fill` attribute to `linear` or `radial` will create corresponding
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippgradient fill. Each gradient type has its own set of properties for defining the fill. Both share the `stop` property. The `stop` property defines the colors and their opacity and position in a
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Trippgradient fill. It is an array of objects containing the following information.
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>color</dt><dd>The color of the stop.</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE <= 8</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86TrippLinear gradients included a rotation property which defines the direction of the gradient. (by default, linear gradients go left to right)
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86TrippRadial gradients include the following additional properties:
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp <dt>cx</dt><dd>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp <p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp <dt>cy</dt><dd>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp <p><strong>Note: </strong>This property currently has no effect on Android or IE 6 - 8.</p>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>r</dt><dd>Radius of the gradient circle. Determines where the color stops end. The default value is 0.5.</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div class="example">
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-gradients-source}}
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>HTML</h2>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<div id="mygraphiccontainer"></div>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>CSS</h2>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp#mygraphiccontainer {
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp position: relative;
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp width: 700px;
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp height:400px;
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Javascript</h2>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Add a rectangle with a linear gradient.</p>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var myrect = mygraphic.addShape({
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "rect",
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color:"#000",
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "linear",
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp rotation: 271,
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#ff6666", opacity: 1, offset: 0},
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#00ffff", opacity: 1, offset: 0.5},
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#000000", opacity: 1, offset: 1}
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<p>Add a circle with a radial gradient.</p>
d1a404610f53bdff63cde29a00ea9cf48739d91eTripp var mycircle = mygraphic.addShape({
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "circle",
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp radius: 50,
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp type: "radial",
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#ff6666", offset: 0},
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#00ffff", offset: 0.4},
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp {color: "#000000", offset: 0.7}
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp color: "#000"
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp<h2>Complete Example Source</h2>
5e878519d1a8afcc3b0c5d9aa68d4751ed294c86Tripp{{>graphics-gradients-source}}