|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html> |
|
3 <head> |
|
4 <title>Graphics Path Tool</title> |
|
5 |
|
6 <style> |
|
7 </style> |
|
8 |
|
9 <link rel="stylesheet" href="../../build/cssreset/cssreset-min.css" type="text/css" charset="utf-8"> |
|
10 <script src="../../build/yui/yui-min.js"></script> |
|
11 |
|
12 </head> |
|
13 |
|
14 <body class="yui3-skin-sam"> |
|
15 <style> |
|
16 html { |
|
17 background-color:#000; |
|
18 } |
|
19 body{ |
|
20 font-family:verdana; |
|
21 font-size:78%; |
|
22 } |
|
23 #mygraphiccontainer { |
|
24 position:absolute; |
|
25 top:100px; |
|
26 left:100px; |
|
27 width:1000px; |
|
28 height:480px; |
|
29 background-color:#333; |
|
30 } |
|
31 #pencil { |
|
32 position:absolute; |
|
33 top:200px; |
|
34 left:200px; |
|
35 z-index:10; |
|
36 cursor:pointer; |
|
37 } |
|
38 .control-point{ |
|
39 border:solid 1px #fff; |
|
40 position:absolute; |
|
41 top:0; |
|
42 left:0; |
|
43 z-index:11; |
|
44 color:#fff; |
|
45 visibility:hidden; |
|
46 cursor:pointer; |
|
47 } |
|
48 .control-point:hover{ |
|
49 border:solid 1px #f00; |
|
50 } |
|
51 .control-point .drag-disc{ |
|
52 position:absolute; |
|
53 top:-10px; |
|
54 left:-10px; |
|
55 width:20px; |
|
56 height:20px; |
|
57 background-color:#fff; |
|
58 -moz-border-radius:10px; |
|
59 -webkit-border-radius:10px; |
|
60 border-radius:10px; |
|
61 filter:alpha(opacity=10); |
|
62 opacity:0.1; |
|
63 } |
|
64 #pencil .pencil-img-container{ |
|
65 position:absolute; |
|
66 top:-47px; |
|
67 left:0px; |
|
68 height:47px; |
|
69 width:46px; |
|
70 background-image:url(../assets/graphics/img/icon_pencil.png); |
|
71 opacity:0.8; |
|
72 filter:alpha(opacity=40); |
|
73 } |
|
74 #pencil .pencil-img-container-moving{ |
|
75 background-position:-46px, 0; |
|
76 } |
|
77 .pencil-xy{ |
|
78 margin: 0.3em; |
|
79 width: 5em; |
|
80 color: #ccc; |
|
81 } |
|
82 .obj-name{ |
|
83 width:100px; |
|
84 |
|
85 } |
|
86 .code-div{ |
|
87 position:absolute; |
|
88 top: 10px; |
|
89 right: 5px; |
|
90 text-align:left; |
|
91 } |
|
92 #txt-code{ |
|
93 height:200px; |
|
94 width:279px; |
|
95 } |
|
96 .code-div label{ |
|
97 color:#ccc; |
|
98 } |
|
99 .tips{ |
|
100 margin:1em; |
|
101 color:#777; |
|
102 } |
|
103 .tips li, |
|
104 .code-div li { |
|
105 margin-bottom: 0.3em; |
|
106 } |
|
107 </style> |
|
108 |
|
109 <ul class="tips"> |
|
110 <li>lineTo - Drag Pencil</li> |
|
111 <li>moveTo - Shift + Drag</li> |
|
112 <li>curveTo - Alt + Drag</li> |
|
113 <li>New Path Object - Change 'Graphic Object Name', then click New button</li> |
|
114 </ul> |
|
115 <div id="mygraphiccontainer"> |
|
116 <div id="pencil"> |
|
117 <div class="pencil-img-container"></div> |
|
118 </div> |
|
119 <div class="control-point cp1"><div class="drag-disc"></div></div> |
|
120 <div class="control-point cp2"><div class="drag-disc"></div></div> |
|
121 </div> |
|
122 <div class="code-div"> |
|
123 <ul> |
|
124 <li> |
|
125 <label>Graphic Object Name</label> |
|
126 <input class="obj-name" type="text" value="bob"/> |
|
127 <input type="button" value="New"/> |
|
128 </li> |
|
129 <li> |
|
130 <label>Copy code from here</label> |
|
131 </li> |
|
132 <li> |
|
133 <textarea id="txt-code" rows="8" cols="5000"></textarea> |
|
134 </li> |
|
135 <li> |
|
136 <label>Pencil X,Y: </label> <span class="pencil-xy">200,200</span> |
|
137 </li> |
|
138 </ul> |
|
139 </div> |
|
140 |
|
141 |
|
142 |
|
143 </body> |
|
144 <script src="../assets/graphics/js/path-tool.js"></script> |
|
145 </html> |