diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/graphics/graphics-radial-tool.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/graphics/graphics-radial-tool.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,366 @@ + + + + + Graphics: Radial Gradient Tool + + + + + + + + + + +
+
+

+
+ + +

Graphics: Radial Gradient Tool

+
+
+
+
+ +
+
+
+
+
    +
  • 0.5
    • +
  • 0.5
    • +
  • 0.5
    • +
  • 0.5
    • +
  • 0.5
    • +
    • +
    • +
    • +
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + +
+ +

The Radial Gradient Tool

+ +

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. +

+ + +

Using the Generated Code

+

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,

+
<div id="mygraphiccontainer"></div>
+ +

CSS such as this,

+
#mygraphiccontainer {
+    position: relative;
+    width: 400px;
+    height: 400px;
+}
+ +and a YUI instance containing a Graphics object such as this. +
YUI().use('graphics', function (Y) {
+
+    var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
+    // generated code from the radial gradient tool goes here
+    
+});
+ +

The tool generates paste-able code for an addShape method that will +create and render an ellipse. You can change this after it's pasted into +your code.

+
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+

Examples That Use This Component

+
+ +
+ +
+
+ +
+
+
+
+ + + + + + + + + + +