+
+This example shows how to draw shapes and line segments with the Path shape.
+
+
+
+
+
+HTML
+<div id="mygraphiccontainer"></div>+ + +
CSS
+#mygraphiccontainer {
+ position: relative;
+ width: 700px;
+ height:300px;
+}
+
+
+Javascript
+Create a Graphic instance.
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
+
+
+Create two path elements for end shapes. Give each a red fill and a black stroke.
+ +var diamond1 = mygraphic.addShape({
+ type: "path",
+ stroke: {
+ weight: 1,
+ color: "#000"
+ },
+ fill: {
+ color: "#f00"
+ }
+ });
+
+var diamond2 = mygraphic.addShape({
+ type: "path",
+ stroke: {
+ weight: 1,
+ color: "#000"
+ },
+ fill: {
+ color: "#f00"
+ }
+ });
+
+Create a path for the connecting segment. Give it a black dashed stroke and no fill. The dashstyle property of the stroke attribute allows for the creation of a dashed stroke. The first value is
+the length of the dash and the second value is the gap space between dashes.
var connector = mygraphic.addShape({
+ type: "path",
+ stroke: {
+ weight: 1,
+ color: "#000",
+ opacity: 1,
+ dashstyle: [3, 4]
+ }
+ });
+
+Draw the first diamond.
+ +diamond1.moveTo(60, 60); +diamond1.lineTo(80, 40); +diamond1.lineTo(100, 60); +diamond1.lineTo(80, 80); +diamond1.lineTo(60, 60); +diamond1.end();+ +
Draw the connector segment.
+connector.moveTo(100, 60); +connector.lineTo(450, 220); +connector.end();+ + +
Draw the second diamond.
+diamond2.moveTo(450, 220); +diamond2.lineTo(470, 200); +diamond2.lineTo(490, 220); +diamond2.lineTo(470, 240); +diamond2.lineTo(450, 220); +diamond2.end();+ +
Complete Example Source
+<div id="mygraphiccontainer"></div>
+<script>
+ YUI().use('graphics', function (Y)
+ {
+ var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
+ connector = mygraphic.addShape({
+ type: "path",
+ stroke: {
+ weight: 1,
+ color: "#000",
+ opacity: 1,
+ dashstyle: [3, 4]
+ },
+ id: "connector"
+ }),
+ diamond1 = mygraphic.addShape({
+ type: "path",
+ stroke: {
+ weight: 1,
+ color: "#000"
+ },
+ fill: {
+ color: "#f00"
+ },
+ id: "diamond1"
+ }),
+ diamond2 = mygraphic.addShape({
+ type: "path",
+ stroke: {
+ weight: 1,
+ color: "#000"
+ },
+ fill: {
+ color: "#f00"
+ },
+ id: "diamond2"
+ });
+
+ diamond1.moveTo(60, 60);
+ diamond1.lineTo(80, 40);
+ diamond1.lineTo(100, 60);
+ diamond1.lineTo(80, 80);
+ diamond1.lineTo(60, 60);
+ diamond1.end();
+
+ connector.moveTo(100, 60);
+ connector.lineTo(450, 220);
+ connector.end();
+
+ diamond2.moveTo(450, 220);
+ diamond2.lineTo(470, 200);
+ diamond2.lineTo(490, 220);
+ diamond2.lineTo(470, 240);
+ diamond2.lineTo(450, 220);
+ diamond2.end();
+ });
+</script>
+
+