--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/graphics/graphics-customshape.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Custom Shape</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>Example: Custom Shape</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><style scoped>
+#custom-doc { width: 95%; min-width: 950px; }
+#pagetitle {background-image: url(../../assets/bg_hd.gif);}
+#mygraphiccontainer {
+ position: relative;
+ width: 400px;
+ height: 300px;
+}
+</style>
+<div class="intro">
+<p>
+This example shows how to use the <code>Graphics</code> to create a custom shape. Currently, the <code>Graphics</code> module has four shapes:
+</p>
+<ul>
+ <li>rect</li>
+ <li>circle</li>
+ <li>ellipse</li>
+ <li>path</li>
+</ul>
+<p>
+You can also create your own custom shapes. If you need to have reusable shapes, you can do this by extending the <code>Shape</code> class. Once you have created a custom class, you can instantiate it by passing
+a reference of your class in the <code>type</code> attribute of your config to the <code>addShape</code> method. In this example, we will create shape called <code>RoundedRect</code>.
+</p>
+</div>
+<div class="example">
+<div id="mygraphiccontainer"></div>
+<script>
+YUI({filter:"raw"}).use('graphics', function (Y)
+{
+ var RoundedRect = function()
+ {
+ RoundedRect.superclass.constructor.apply(this, arguments);
+ }
+ RoundedRect.NAME = "roundedRect";
+ Y.extend(RoundedRect, Y.Shape, {
+ _draw: function()
+ {
+ var w = this.get("width"),
+ h = this.get("height"),
+ ew = this.get("ellipseWidth"),
+ eh = this.get("ellipseHeight");
+ this.clear();
+ this.moveTo(0, eh);
+ this.lineTo(0, h - eh);
+ this.quadraticCurveTo(0, h, ew, h);
+ this.lineTo(w - ew, h);
+ this.quadraticCurveTo(w, h, w, h - eh);
+ this.lineTo(w, eh);
+ this.quadraticCurveTo(w, 0, w - ew, 0);
+ this.lineTo(ew, 0);
+ this.quadraticCurveTo(0, 0, 0, eh);
+ this.end();
+ }
+ }, {
+ ATTRS: Y.mix({
+ ellipseWidth: {
+ value: 4
+ },
+
+ ellipseHeight: {
+ value: 4
+ }
+ }, Y.Shape.ATTRS)
+ });
+ Y.RoundedRect = RoundedRect;
+
+ var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
+ myroundrect = mygraphic.addShape({
+ type: Y.RoundedRect,
+ width: 300,
+ height: 200,
+ x: 50,
+ y: 50,
+ ellipseWidth: 12,
+ ellipseHeight: 12,
+ fill: {
+ type: "linear",
+ stops: [
+ {color: "#9aa9bb", offset: 0},
+ {color: "#eeefff", offset: 0.4},
+ {color: "#00000f", offset: 0.8},
+ {color: "#9aa9bb", offset: 1}
+ ],
+ rotation: 45
+ },
+ stroke: {
+ weight: 2,
+ color: "#000"
+ }
+ });
+ });
+</script>
+
+</div>
+
+<h2>HTML</h2>
+<pre class="code prettyprint"><div id="mygraphiccontainer"></div></pre>
+
+
+<h2>CSS</h2>
+<pre class="code prettyprint">#mygraphiccontainer {
+ position: relative;
+ width: 400px;
+ height: 300px;
+}</pre>
+
+<h2>JavaScript</h2>
+
+<p>Create a custom class. When creating shapes, add a method called <code>_draw</code>. This is where you will put your drawing logic for the custom shape. You will also need to mix in any attributes that you need.</p>
+
+<pre class="code prettyprint">var RoundedRect = function()
+{
+ RoundedRect.superclass.constructor.apply(this, arguments);
+}
+RoundedRect.NAME = "roundedRect";
+Y.extend(RoundedRect, Y.Shape, {
+ _draw: function()
+ {
+ var w = this.get("width"),
+ h = this.get("height"),
+ ew = this.get("ellipseWidth"),
+ eh = this.get("ellipseHeight");
+ this.clear();
+ this.moveTo(0, eh);
+ this.lineTo(0, h - eh);
+ this.quadraticCurveTo(0, h, ew, h);
+ this.lineTo(w - ew, h);
+ this.quadraticCurveTo(w, h, w, h - eh);
+ this.lineTo(w, eh);
+ this.quadraticCurveTo(w, 0, w - ew, 0);
+ this.lineTo(ew, 0);
+ this.quadraticCurveTo(0, 0, 0, eh);
+ this.end();
+ }
+}, {
+ ATTRS: Y.mix({
+ ellipseWidth: {
+ value: 4
+ },
+
+ ellipseHeight: {
+ value: 4
+ }
+ }, Y.Shape.ATTRS)
+});
+Y.RoundedRect = RoundedRect;</pre>
+
+<p>Create a <code>Graphic</code> instance and render it to an <code>HTMLElement</code></p>
+<pre class="code prettyprint">var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),</pre>
+
+
+<p>Using the <code>addShape</code> method, add an instance of the custom class to the <code>Graphic</code> instance.</p>
+
+<pre class="code prettyprint">myroundrect = mygraphic.addShape({
+ type: Y.RoundedRect,
+ width: 300,
+ height: 200,
+ x: 50,
+ y: 50,
+ ellipseWidth: 12,
+ ellipseHeight: 12,
+ fill: {
+ type: "linear",
+ stops: [
+ {color: "#9aa9bb", offset: 0},
+ {color: "#eeefff", offset: 0.4},
+ {color: "#00000f", offset: 0.8},
+ {color: "#9aa9bb", offset: 1}
+ ],
+ rotation: 45
+ },
+ stroke: {
+ weight: 2,
+ color: "#000"
+ }
+});</pre>
+
+<h2>Complete Example Source</h2>
+<pre class="code prettyprint"><div id="mygraphiccontainer"></div>
+<script>
+YUI({filter:"raw"}).use('graphics', function (Y)
+{
+ var RoundedRect = function()
+ {
+ RoundedRect.superclass.constructor.apply(this, arguments);
+ }
+ RoundedRect.NAME = "roundedRect";
+ Y.extend(RoundedRect, Y.Shape, {
+ _draw: function()
+ {
+ var w = this.get("width"),
+ h = this.get("height"),
+ ew = this.get("ellipseWidth"),
+ eh = this.get("ellipseHeight");
+ this.clear();
+ this.moveTo(0, eh);
+ this.lineTo(0, h - eh);
+ this.quadraticCurveTo(0, h, ew, h);
+ this.lineTo(w - ew, h);
+ this.quadraticCurveTo(w, h, w, h - eh);
+ this.lineTo(w, eh);
+ this.quadraticCurveTo(w, 0, w - ew, 0);
+ this.lineTo(ew, 0);
+ this.quadraticCurveTo(0, 0, 0, eh);
+ this.end();
+ }
+ }, {
+ ATTRS: Y.mix({
+ ellipseWidth: {
+ value: 4
+ },
+
+ ellipseHeight: {
+ value: 4
+ }
+ }, Y.Shape.ATTRS)
+ });
+ Y.RoundedRect = RoundedRect;
+
+ var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
+ myroundrect = mygraphic.addShape({
+ type: Y.RoundedRect,
+ width: 300,
+ height: 200,
+ x: 50,
+ y: 50,
+ ellipseWidth: 12,
+ ellipseHeight: 12,
+ fill: {
+ type: "linear",
+ stops: [
+ {color: "#9aa9bb", offset: 0},
+ {color: "#eeefff", offset: 0.4},
+ {color: "#00000f", offset: 0.8},
+ {color: "#9aa9bb", offset: 1}
+ ],
+ rotation: 45
+ },
+ stroke: {
+ weight: 2,
+ color: "#000"
+ }
+ });
+ });
+</script></pre>
+
+</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-customshape',
+ title: 'Custom Shape',
+ 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>