The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 5 more by this user. Created: 02/18/11
Last CDN Push: 03/23/11
Build Tag: gallery-2011.03.23-22-20
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.
Simple API for creating and managing shapes.
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2011.03.23-22-20'
}).use('gallery-graphics', function (Y)
{
var myline,
mygraphic,
myrect,
mycircle,
myellipse;
function loadGraphics(e)
{
mygraphic = new Y.Graphic();
mygraphic.render(Y.one("#mycanvas"));
myline = new Y.Path({stroke: {
weight: 1,
color: "#ff0000",
alpha: 1,
dashstyle: [3, 4]
}});
mygraphic.addShape(myline);
myline.moveTo(-190, -190);
myline.lineTo(60, 120);
myline.end();
myrect = new Y.Rect({stroke: {
color:"#000",
weight: 1
},
fill: {
color: "#fc0"
},
width:50,
height:40
});
mygraphic.addShape(myrect);
myellipse = new Y.Ellipse({stroke: {
color: "#ddd",
weight: 2
},
fill: {
color:"#f00"
},
width: 100,
height: 30,
x:100,
y:50
});
mygraphic.addShape(myellipse);
mycircle = new Y.Circle({stroke: {
color:"#ff0",
weight: 1
},
fill: {
color:"#00f"
},
radius: 12
});
mygraphic.addShape(mycircle);
}
function updateElements(e)
{
myline.clear();
myline.moveTo(-190, -190);
myline.lineTo.apply(myline, [[0, 0], [10, 20], [10, 150], [40, 300], [50, 100], [60, 180]]);
myline.end();
myline.translate(100, 100);
mycircle.translate(-5, -5);
myrect.set("x", 100);
myrect.set("y", 100);
myellipse.set("x", 200);
myellipse.set("y", 200);
}
Y.on("click", loadGraphics, "#loadgraphics");
Y.on("click", updateElements, "#updateElements");
});
No forum posts for this module.
All code on this site is licensed under the BSD License unless stated otherwise.