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]
}
}),
diamond1 = mygraphic.addShape({
type: "path",
stroke: {
weight: 1,
color: "#000"
},
fill: {
color: "#f00"
}
}),
diamond2 = mygraphic.addShape({
type: "path",
stroke: {
weight: 1,
color: "#000"
},
fill: {
color: "#f00"
}
});
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>