1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<style scoped>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mygraphiccontainer {
position: relative;
width: 700px;
height:300px;
}
</style>
<div class="intro">
<p>This example shows how to draw shapes and line segments with the `Path` shape.</p>
</div>
<div class="example">
{{>graphics-path-source}}
</div>
<h2>HTML</h2>
```
<div id="mygraphiccontainer"></div>
```
<h2>CSS</h2>
```
#mygraphiccontainer {
position: relative;
width: 700px;
height:300px;
}
```
<h2>Javascript</h2>
<p>Create a `Graphic` instance.</p>
```
var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"});
```
<p>Create two path elements for end shapes. Give each a red fill and a black stroke.</p>
```
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"
}
});
```
<p>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.</p>
```
var connector = mygraphic.addShape({
type: "path",
stroke: {
weight: 1,
color: "#000",
opacity: 1,
dashstyle: [3, 4]
}
});
```
<p>Draw the first diamond.</p>
```
diamond1.moveTo(60, 60);
diamond1.lineTo(80, 40);
diamond1.lineTo(100, 60);
diamond1.lineTo(80, 80);
diamond1.lineTo(60, 60);
diamond1.end();
```
<p>Draw the connector segment.</p>
```
connector.moveTo(100, 60);
connector.lineTo(450, 220);
```
<p>Draw the second diamond.</p>
```
diamond2.moveTo(450, 220);
diamond2.lineTo(470, 200);
diamond2.lineTo(490, 220);
diamond2.lineTo(470, 240);
diamond2.lineTo(450, 220);
diamond2.end();
```
<h2>Complete Example Source</h2>
```
{{>graphics-path-source}}
```