<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graphics: Radial Gradient Tool</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Graphics: Radial Gradient Tool</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="example">
<style scoped>
.example{
position: relative;
background-color: #000;
font-family: verdana;
color: #ccc;
height: 250px;
}
.example #mygraphiccontainer {
position: absolute;
top: 20px;
left: 20px;
width: 250px;
height: 233px;
background-color: #333;
/*border: 3px solid #ff0000;*/
}
.example .code-div{
position: absolute;
top: 70px;
left: 305px;
text-align: left;
}
.example .code-div label{
display: inline-block;
color: #ccc;
width: 7em;
text-align: right;
}
.example #output-grad input{
width: 5em;
}
/*gradient controls*/
.example .grad-c{
position: absolute;
top: 50px;
left: 50px;
width: 1px;
height: 1px;
cursor: move;
}
.example .grad-f{
position: absolute;
top: 40px;
left: 40px;
width: 20px;
height: 20px;
background-color: #ff8800;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
cursor: move;
}
.example .grad-r{ /* is contained within .grad-c */
position: absolute;
top: -50px;
left: -50px;
width: 100px;
height: 100px;
background-color: #300060;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
opacity: 0.8;
filter: alpha(opacity=80);
}
.example #grad-control{
position: relative;
width: 100px;
height: 100px;
border: solid 1px #555;
}
.example #grad-control label{
position: absolute;
width: 100px;
top: 100%;
padding-top: 0.3em;
text-align: center;
color: #555;
}
.example #output-grad {
position: absolute;
left: 182px;
top: -53px;
width: 200px;
}
.example #output-grad ul{
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 1.3em;
}
.example #output-grad li{
padding: 0.3em;
}
.example #output-grad li span {
display: inline-block;
width: 5em;
color: #fff;
margin-left: 0.5em;
}
.example #panel-content textarea {
width: 100%;
height: 257px;
resize: none;
}
.example #output-grad .button-item{
text-align: right;
padding: 1.5em 2.3em 0 0;
}
</style>
<div id="mygraphiccontainer">
</div>
<div class="code-div">
<div id="output-grad">
<ul>
<li><label>cx:</label> <span id='out-cx'>0.5</span></li>
<li><label>cy:</label> <span id='out-cy'>0.5</span></li>
<li><label>fx:</label> <span id='out-fx'>0.5</span></li>
<li><label>fy:</label> <span id='out-fy'>0.5</span></li>
<li><label>r:</label> <span id='out-r'>0.5</span></li>
<li><label>Center color:</label> <input type="text" id='center-color' value="#ff8800" /></li>
<li><label>Outer color:</label> <input type="text" id='outer-color' value="#300060" /></li>
<li class="button-item"><button id="btn-get-code" class='yui3-button'>Get Code Snippet</button></li>
</ul>
</div>
<div id="grad-control" title="Represents the boundary of the object">
<label>Interactive Control</label>
<div class="grad-c">
<div id="resize-r" class="grad-r" title="Drag to set 'cx,cy' properties. Resize to set 'r' property."></div>
</div>
<div class="grad-f" title="Drag to set 'fx,fy' properties."></div>
</div>
</div>
<div class="yui3-skin-night">
<div id="panel-content">
</div>
</div>
<script src="../assets/graphics/js/radial-tool.js"></script>
</div>
<h2>The Radial Gradient Tool</h2>
<p>The Interactive Control modifies the gradient fill.
As you drag the center dot, or drag or resize the outer disc,
the fill preview updates. You can also see the fill's
property values update. The center color and outer color can also be changed.
These are the colors of the gradient stops.
Click the "Get Code Snippet" button. This code can be copied and pasted
into a graphics instance to reproduce the gradient fill in your code.
</p>
<h2>Using the Generated Code</h2>
<p>When you click the "Get Code Snippet" button, generated code is placed
in the text area control. The generated code assumes you will have a separate
page to paste it into. This separate page must contain the following code:
A graphics container such as this,</p>
<pre class="code prettyprint"><div id="mygraphiccontainer"></div></pre>
<p>CSS such as this,</p>
<pre class="code prettyprint">#mygraphiccontainer {
position: relative;
width: 400px;
height: 400px;
}</pre>
and a YUI instance containing a <code>Graphics</code> object such as this.
<pre class="code prettyprint">YUI().use('graphics', function (Y) {
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
// generated code from the radial gradient tool goes here
});</pre>
<p>The tool generates paste-able code for an <code>addShape</code> method that will
create and render an ellipse. You can change this after it's pasted into
your code.</p>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to create a Graphic instance and add shapes.">
<a href="graphics-simple.html">Basic Graphics Implementation</a>
</li>
<li data-description="Shows how to draw lines and polygons.">
<a href="graphics-path.html">Basic Path</a>
</li>
<li data-description="Shows how to create linear and radial gradient fills.">
<a href="graphics-gradients.html">Create Gradient Fills</a>
</li>
<li data-description="Shows how to add drag to a shape.">
<a href="graphics-drag.html">Basic drag with graphic object</a>
</li>
<li data-description="Shows how to apply transforms to shape.">
<a href="graphics-transforms.html">Using Transforms</a>
</li>
<li data-description="Shows how to use a custom shape with the Graphics module.">
<a href="graphics-customshape.html">Custom Shape</a>
</li>
<li data-description="Shows to use the graphics api to draw a realistic glass.">
<a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
</li>
<li data-description="Shows to use the graphics api to draw a violin.">
<a href="graphics-violin.html">Complex Drawing: Violin</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="This example demonstrates animating an element along a curved path using bezier control points.">
<a href="../anim/curve.html">Animating Along a Curved Path</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/graphics',
name: 'graphics',
title: 'Graphics: Radial Gradient Tool',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('graphics-simple');
YUI.Env.Tests.examples.push('graphics-path');
YUI.Env.Tests.examples.push('graphics-gradients');
YUI.Env.Tests.examples.push('graphics-drag');
YUI.Env.Tests.examples.push('graphics-transforms');
YUI.Env.Tests.examples.push('graphics-customshape');
YUI.Env.Tests.examples.push('graphics-muddyglass');
YUI.Env.Tests.examples.push('graphics-violin');
YUI.Env.Tests.examples.push('curve');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>