← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/docs/graphics/graphics-violin.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/graphics/graphics-violin.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Complex Drawing: Violin</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Complex Drawing: Violin</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
#custom-doc { width: 95%; min-width: 950px; }
24
 
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
25
 
#outerframe {
26
 
    display: inline-block;
27
 
    height: 446px;
28
 
    width: 714px;
29
 
}
30
 
 
31
 
#mygraphiccontainer {
32
 
    display: inline-block;
33
 
    top: 100px;
34
 
    width: 614px;
35
 
    top: 15px;
36
 
    left: 34px;
37
 
    position: relative;
38
 
}
39
 
.woodgrain{
40
 
    opacity:0.2;
41
 
    filter:alpha(opacity=20);
42
 
}
43
 
</style>
44
 
<div class="intro">
45
 
<p>
46
 
This example shows how to use the <code>Graphics</code> to draw the head of a violin.
47
 
</p>
48
 
<p>
49
 
The comparable uncompressed .jpg photo image of the violin head was 161KB, .png(24-bit) was 359KB.
50
 
The Graphics code to render this example is 18KB.
51
 
</p>
52
 
</div>
53
 
<div class="example">
54
 
<div id="outerframe">
55
 
<div id="mygraphiccontainer"></div>
56
 
</div>
57
 
<script>
58
 
    YUI().use('graphics', function (Y) 
59
 
    { 
60
 
        //create a graphic instance
61
 
        var mygraphic = new Y.Graphic();
62
 
        mygraphic.render("#mygraphiccontainer");
63
 
        
64
 
        //draw a background
65
 
        var background = mygraphic.addShape({
66
 
            type: "rect",
67
 
            stroke: {
68
 
               weight: 0,
69
 
               color: "#f00",
70
 
               opacity: 0
71
 
            },
72
 
            fill: {
73
 
               type: "radial",
74
 
               stops: [
75
 
               {color: "#001000", opacity: 1, offset: 0},
76
 
               {color: "#000", opacity: 1, offset: 1}
77
 
               ]
78
 
            },
79
 
            width: 614,
80
 
            height: 397,
81
 
            x: 0,
82
 
            y: 0
83
 
        });
84
 
        
85
 
        //create a path element to use for the strings
86
 
        var strings = mygraphic.addShape({
87
 
           type: "path",
88
 
           stroke: {
89
 
               weight: 2,
90
 
               color: "#bbb" 
91
 
           }
92
 
        });
93
 
 
94
 
        //draw strings
95
 
        strings.moveTo(614,199);
96
 
        strings.lineTo(536,181);
97
 
        strings.curveTo(532,178,519,181,515,183);
98
 
        strings.lineTo(465,197);
99
 
        strings.lineTo(487,203);
100
 
        strings.lineTo(515,187);
101
 
        strings.curveTo(519,184,529,182,536,184);
102
 
        strings.lineTo(613,202);
103
 
        strings.end();
104
 
 
105
 
        //create a path element to use for the fingerboard
106
 
        var finger_board = mygraphic.addShape({
107
 
           type: "path",
108
 
           stroke: {
109
 
               weight: 1,
110
 
               color: "#f00",
111
 
               opacity: 0 
112
 
           },
113
 
           fill: {
114
 
               type: "linear",
115
 
               rotation: 140,
116
 
               stops: [
117
 
                   {color: "#000", opacity: 1, offset: 0},
118
 
                   {color: "#000", opacity: 1, offset: 0.2},
119
 
                   {color: "#302420", opacity: 1, offset: 0.8}
120
 
               ]
121
 
           }
122
 
        });
123
 
        
124
 
        //draw the fingerboard
125
 
        finger_board.moveTo(613,231);
126
 
        finger_board.lineTo(507,204);
127
 
        finger_board.curveTo(506,186,527,183,533,186);
128
 
        finger_board.lineTo(613,205);
129
 
        finger_board.end();
130
 
 
131
 
        //Highlight for the fingerboard
132
 
        var fingerboard_high = mygraphic.addShape({
133
 
           type: "path",
134
 
           stroke: {
135
 
               weight: 1,
136
 
               color: "#555",  //, dashstyle: [3, 4]
137
 
               opacity: 0.5
138
 
           }
139
 
        });
140
 
        
141
 
        fingerboard_high.moveTo(512,199);
142
 
        fingerboard_high.curveTo(517,193,527,190,534,191);
143
 
        fingerboard_high.end();
144
 
 
145
 
        //Create a path to use for the headstock
146
 
        var head = mygraphic.addShape({
147
 
           type: "path",
148
 
           stroke: {
149
 
               weight: 0,
150
 
               color: "#f00",
151
 
               opacity: 1 //,
152
 
               //dashstyle: [3, 4]
153
 
           },
154
 
           fill: {
155
 
               type: "linear",
156
 
               rotation: 60,
157
 
               stops: [
158
 
               {color: "#9B4D17", opacity: 1, offset: 0},
159
 
               {color: "#3B1E09", opacity: 1, offset: 0.8}
160
 
               ]
161
 
           }
162
 
        });
163
 
        
164
 
        //Draw the headstock
165
 
        head.moveTo(614,278);
166
 
        head.lineTo(553,263);
167
 
        head.curveTo(516,255,503,283,500,300);
168
 
        head.lineTo(496,318);
169
 
        head.curveTo(496,323,488,323,486,318);
170
 
        head.curveTo(405,233,310,332,218,321);
171
 
        head.curveTo(149,320,101,270,99,217);
172
 
        head.curveTo(96,182,120,143,141,132);
173
 
        head.curveTo(162,116,199,116,223,131);
174
 
        head.curveTo(242,140,260,170,253,202);
175
 
        head.curveTo(249,228,230,242,213,246);
176
 
        head.curveTo(214,249,218,257,235,246);
177
 
        head.curveTo(254,233,299,209,324,199);
178
 
        head.curveTo(369,182,428,185,470,195);
179
 
        head.lineTo(505,204);
180
 
        head.lineTo(506,203);
181
 
        head.lineTo(614,231);
182
 
        head.end();
183
 
        
184
 
        //Outer portion of the spiral on top of the head
185
 
        var outerTopScroll = mygraphic.addShape({     //outter top scroll
186
 
           type: "path",
187
 
           stroke: {
188
 
               weight: 0,
189
 
               color: "#00dd00", // , dashstyle: [3, 4]  
190
 
               opacity: 1
191
 
           },
192
 
           fill: {
193
 
               type: "linear", // 
194
 
               rotation: 90,
195
 
               stops: [
196
 
               {color: "#562A0D", opacity: 1, offset: 0},
197
 
               {color: "#68340F", opacity: 1, offset: 1}
198
 
               ]
199
 
           }
200
 
        });
201
 
        outerTopScroll.moveTo(106,229);
202
 
        outerTopScroll.curveTo(104,190,116,154,144,137);
203
 
        outerTopScroll.curveTo(169,121,214,121,237,150);
204
 
        outerTopScroll.curveTo(251,173,258,209,229,230);
205
 
        outerTopScroll.lineTo(219,227);
206
 
        outerTopScroll.curveTo(219,212,237,170,210,157);
207
 
        outerTopScroll.curveTo(175,134,132,167,146,216);
208
 
        outerTopScroll.curveTo(147,220,152,232,156,234);
209
 
        outerTopScroll.lineTo(105,229);
210
 
        outerTopScroll.end();
211
 
 
212
 
        //Inner portion of the spiral on top of the head
213
 
        var innerTopScroll = mygraphic.addShape({  // inner top scroll
214
 
           type: "path",
215
 
           stroke: {
216
 
               weight: 0,
217
 
               color: "#00dd00", // , dashstyle: [3, 4]  
218
 
               opacity: 1
219
 
           },
220
 
           fill: {
221
 
               type: "linear", // 
222
 
               rotation: 90,
223
 
               stops: [
224
 
               {color: "#562A0D", opacity: 1, offset: 0},
225
 
               {color: "#68340F", opacity: 1, offset: 1}
226
 
               ]
227
 
           }
228
 
        });
229
 
        innerTopScroll.moveTo(200,200);
230
 
        innerTopScroll.moveTo(160,227);
231
 
        innerTopScroll.curveTo(143,206,142,156,190,156);
232
 
        innerTopScroll.curveTo(236,164,226,215,198,219);
233
 
        innerTopScroll.curveTo(185,220,165,211,178,190);
234
 
        innerTopScroll.curveTo(182,216,210,205,204,188);
235
 
 
236
 
        //Highlight line along the top of the head
237
 
        var base_high = mygraphic.addShape({
238
 
           type: "path",
239
 
           stroke: {
240
 
               weight: 2,
241
 
               color: "#fff", 
242
 
               opacity: 0.1//, dashstyle: [3, 4]
243
 
           }
244
 
        });
245
 
        base_high.moveTo(503,207);
246
 
        base_high.curveTo(428,188,354,182,292,221);
247
 
        base_high.curveTo(270,233,242,252,217,258);
248
 
        base_high.lineTo(209,254);
249
 
        base_high.end();
250
 
 
251
 
        //Highlight along the spiral and lower edge of the violin head and neck
252
 
        var headLine = mygraphic.addShape({
253
 
           type: "path",
254
 
           stroke: {
255
 
               weight: 4,
256
 
               color: "#fff",
257
 
               opacity: 0.1
258
 
           }
259
 
        });
260
 
        headLine.moveTo(614,278);
261
 
        headLine.lineTo(553,263);
262
 
        headLine.curveTo(516,255,503,283,500,300);
263
 
        headLine.lineTo(496,318);
264
 
        headLine.curveTo(496,323,488,323,486,318);
265
 
        headLine.curveTo(405,233,310,332,218,321);
266
 
        headLine.curveTo(149,320,101,270,99,217);
267
 
        headLine.curveTo(96,182,120,143,141,132);
268
 
        headLine.curveTo(162,116,199,116,223,131);
269
 
        headLine.curveTo(242,140,260,170,253,202);
270
 
        headLine.curveTo(249,228,230,240,213,244);
271
 
        headLine.moveTo(216,244);
272
 
        headLine.curveTo(180,248,154,236,148,204);
273
 
        headLine.curveTo(143,185,153,157,184,154);
274
 
        headLine.curveTo(209,152,227,171,222,197);
275
 
        headLine.curveTo(219,224,180,229,172,205);
276
 
        headLine.curveTo(167,201,174,186,181,187);
277
 
        headLine.end();
278
 
         
279
 
        //create an ellipse for the fiddle head dot
280
 
        var fiddleHeadDot = mygraphic.addShape({   
281
 
            type: "ellipse",
282
 
            fill: {
283
 
                color: "#fff",
284
 
                opacity: 0.1
285
 
            },
286
 
            stroke: {
287
 
                weight: 0,
288
 
                color: "#000"
289
 
            },
290
 
            width: 25,
291
 
            height: 25,
292
 
            x: 178,
293
 
            y: 178
294
 
        });
295
 
 
296
 
        //shared properties for the shadows
297
 
        var shadowConfig = {
298
 
           type: "path",
299
 
           stroke: {
300
 
               weight: 0,
301
 
               color: "#000",
302
 
               opacity: 1
303
 
           },
304
 
           fill: {
305
 
               type: "linear",
306
 
               rotation: 60,
307
 
               stops: [
308
 
                   {color: "#000", opacity: 1, offset: 0},
309
 
                   {color: "#241105", opacity: 1, offset: 0.8}
310
 
               ]
311
 
           }
312
 
        }
313
 
 
314
 
        //Shadow for inner spiral on the top of the head
315
 
        var innerSpiralFiddleHeadShadow = mygraphic.addShape(shadowConfig); // at center of fiddle head 
316
 
        innerSpiralFiddleHeadShadow.moveTo(204,188);
317
 
        innerSpiralFiddleHeadShadow.curveTo(207,211,179,206,178,194);
318
 
        innerSpiralFiddleHeadShadow.curveTo(166,215,219,229,204,190);
319
 
        innerSpiralFiddleHeadShadow.end();
320
 
 
321
 
        //Shadow for middle spiral on the top of the head
322
 
        var middleSpiralFiddleHeadShadow = mygraphic.addShape(shadowConfig);
323
 
        middleSpiralFiddleHeadShadow.moveTo(223,172);
324
 
        middleSpiralFiddleHeadShadow.curveTo(239,224,186,233,173,213);
325
 
        middleSpiralFiddleHeadShadow.curveTo(174,266,257,223,222,171);
326
 
        middleSpiralFiddleHeadShadow.end();
327
 
        
328
 
        //Shadow for outer spiral on the top of the head
329
 
        var outerSpiralFiddleHeadShadow = mygraphic.addShape(shadowConfig);
330
 
        outerSpiralFiddleHeadShadow.moveTo(148,214);
331
 
        outerSpiralFiddleHeadShadow.curveTo(158,242,186,250,218,246);
332
 
        outerSpiralFiddleHeadShadow.lineTo(221,253);
333
 
        outerSpiralFiddleHeadShadow.curveTo(178,258,154,241,147,214);
334
 
        outerSpiralFiddleHeadShadow.end();
335
 
        
336
 
        //Shadow beneath the left tuning key
337
 
        var leftTuningKeyShadow = mygraphic.addShape(shadowConfig);
338
 
        leftTuningKeyShadow.moveTo(293,286);
339
 
        leftTuningKeyShadow.lineTo(323,277);
340
 
        leftTuningKeyShadow.lineTo(337,289);
341
 
        leftTuningKeyShadow.lineTo(336,293);
342
 
        leftTuningKeyShadow.lineTo(292,307);
343
 
        leftTuningKeyShadow.lineTo(288,294);
344
 
        leftTuningKeyShadow.lineTo(292,285);
345
 
        leftTuningKeyShadow.end();
346
 
        
347
 
        //Shadow beneath the right tuning key
348
 
        var rightTuningKeyShadow = mygraphic.addShape(shadowConfig);
349
 
        rightTuningKeyShadow.moveTo(441,260);
350
 
        rightTuningKeyShadow.lineTo(440,276);
351
 
        rightTuningKeyShadow.lineTo(436,283);
352
 
        rightTuningKeyShadow.curveTo(453,286,474,299,492,319);
353
 
        rightTuningKeyShadow.curveTo(497,308,497,299,498,297);
354
 
        rightTuningKeyShadow.lineTo(492,278);
355
 
        rightTuningKeyShadow.lineTo(483,267);
356
 
        rightTuningKeyShadow.lineTo(468,254);
357
 
        rightTuningKeyShadow.lineTo(440,260);
358
 
        rightTuningKeyShadow.end();
359
 
        
360
 
        //Shadow beneath the left dowel
361
 
        var leftDowelShadow = mygraphic.addShape(shadowConfig);
362
 
        leftDowelShadow.moveTo(230,284);
363
 
        leftDowelShadow.lineTo(251,280);
364
 
        leftDowelShadow.curveTo(257,308,230,301,229,283);
365
 
        leftDowelShadow.end();
366
 
        
367
 
        //Shadow beneath the right dowel
368
 
        var rightDowelShadow = mygraphic.addShape(shadowConfig);
369
 
        rightDowelShadow.moveTo(377,246);
370
 
        rightDowelShadow.lineTo(399,242);
371
 
        rightDowelShadow.curveTo(402,261,383,263,376,246);
372
 
        rightDowelShadow.end();
373
 
 
374
 
        //Add transparent gradients for the woodgrain if the browser supports gradient transparency
375
 
        var DOCUMENT = Y.config.doc,
376
 
            canvas = DOCUMENT && DOCUMENT.createElement("canvas");
377
 
        
378
 
        if(DOCUMENT && (DOCUMENT.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") || (canvas && canvas.getContext && canvas.getContext("2d"))))
379
 
        {
380
 
            var headWoodgrain = mygraphic.addShape({
381
 
               type: "path",
382
 
               stroke: {
383
 
                   weight: 0,
384
 
                   color: "#f00",
385
 
                   opacity: 1 
386
 
               },
387
 
               fill: {
388
 
                        type: "linear",
389
 
                        rotation: 5,
390
 
                        stops: [
391
 
                           {color: "#3B1E09", opacity: 1, offset: 0.03},
392
 
                           {color: "#9B4D17", opacity: 1, offset: 0.06},
393
 
                           {color: "#3B1E09", opacity: 1, offset: 0.09},
394
 
                           {color: "#9B4D17", opacity: 1, offset: 0.12},
395
 
                           {color: "#3B1E09", opacity: 1, offset: 0.18},
396
 
                           {color: "#9B4D17", opacity: 1, offset: 0.20},
397
 
                           {color: "#3B1E09", opacity: 1, offset: 0.23},
398
 
                           {color: "#9B4D17", opacity: 1, offset: 0.29},
399
 
                           {color: "#3B1E09", opacity: 1, offset: 0.34},
400
 
                           {color: "#9B4D17", opacity: 1, offset: 0.36},
401
 
                           {color: "#3B1E09", opacity: 1, offset: 0.38},
402
 
                           {color: "#9B4D17", opacity: 1, offset: 0.40},
403
 
                           {color: "#3B1E09", opacity: 1, offset: 0.45},
404
 
                           {color: "#9B4D17", opacity: 1, offset: 0.48},
405
 
                           {color: "#3B1E09", opacity: 1, offset: 0.50},
406
 
                           {color: "#9B4D17", opacity: 1, offset: 0.52},
407
 
                           {color: "#3B1E09", opacity: 1, offset: 0.55},
408
 
                           {color: "#9B4D17", opacity: 1, offset: 0.62},
409
 
                           {color: "#3B1E09", opacity: 1, offset: 0.68},
410
 
                           {color: "#9B4D17", opacity: 1, offset: 0.73},
411
 
                           {color: "#3B1E09", opacity: 1, offset: 0.76},
412
 
                           {color: "#9B4D17", opacity: 1, offset: 0.78},
413
 
                           {color: "#3B1E09", opacity: 1, offset: 0.82},
414
 
                           {color: "#9B4D17", opacity: 1, offset: 0.86},
415
 
                           {color: "#3B1E09", opacity: 1, offset: 0.90},
416
 
                           {color: "#9B4D17", opacity: 1, offset: 0.94},
417
 
                           {color: "#3B1E09", opacity: 1, offset: 0.96},
418
 
                           {color: "#9B4D17", opacity: 1, offset: 1}
419
 
                       ]
420
 
                    }
421
 
                });
422
 
 
423
 
            //Draw the woodgrain
424
 
            headWoodgrain.moveTo(614,278);
425
 
            headWoodgrain.lineTo(553,263);
426
 
            headWoodgrain.curveTo(516,255,503,283,500,300);
427
 
            headWoodgrain.lineTo(496,318);
428
 
            headWoodgrain.curveTo(496,323,488,323,486,318);
429
 
            headWoodgrain.curveTo(405,233,310,332,218,321);
430
 
            headWoodgrain.curveTo(149,320,101,270,99,217);
431
 
            headWoodgrain.curveTo(96,182,120,143,141,132);
432
 
            headWoodgrain.curveTo(162,116,199,116,223,131);
433
 
            headWoodgrain.curveTo(242,140,260,170,253,202);
434
 
            headWoodgrain.curveTo(249,228,230,242,213,246);
435
 
            headWoodgrain.curveTo(214,249,218,257,235,246);
436
 
            headWoodgrain.curveTo(254,233,299,209,324,199);
437
 
            headWoodgrain.curveTo(369,182,428,185,470,195);
438
 
            headWoodgrain.lineTo(505,204);
439
 
            headWoodgrain.lineTo(506,203);
440
 
            headWoodgrain.lineTo(614,231);
441
 
            headWoodgrain.end();
442
 
            
443
 
            //handle for adding opacity to the whole object.
444
 
            headWoodgrain.addClass('woodgrain');  
445
 
        }
446
 
        
447
 
        //The bushing for the left tuning key
448
 
        var nob_bushing_left = mygraphic.addShape({
449
 
            type: "ellipse",
450
 
            stroke: {
451
 
               weight: 0,
452
 
               color: "#00dd00",
453
 
               opacity: 1 
454
 
            },
455
 
            fill: {
456
 
               type: "radial",
457
 
               stops: [
458
 
                   {color: "#000", opacity: 1, offset: 0},
459
 
                   {color: "#000", opacity: 1, offset: 0.7},
460
 
                   {color: "#282622", opacity: 1, offset: 0.8},
461
 
                   {color: "#000", opacity: 1, offset: 0.9}
462
 
               ],
463
 
                cx: 0.45,
464
 
                cy: 0.45,
465
 
                fx: 0.9,
466
 
                fy: 0.9,
467
 
                r: 0.6
468
 
            },
469
 
            width: 52,
470
 
            height: 52,
471
 
            x: 277,
472
 
            y: 240
473
 
        });
474
 
 
475
 
        //The bushing for the right tuning key
476
 
        var nob_bushing_right = mygraphic.addShape({
477
 
            type: "ellipse",
478
 
            stroke: {
479
 
               weight: 0,
480
 
               color: "#00dd00",
481
 
               opacity: 1 
482
 
            },
483
 
            fill: {
484
 
               type: "radial",
485
 
               stops: [
486
 
                   {color: "#000", opacity: 1, offset: 0},
487
 
                   {color: "#000", opacity: 1, offset: 0.7},
488
 
                   {color: "#282622", opacity: 1, offset: 0.8},
489
 
                   {color: "#000", opacity: 1, offset: 0.9}
490
 
               ],
491
 
                cx: 0.45,
492
 
                cy: 0.45,
493
 
                fx: 0.9,
494
 
                fy: 0.9,
495
 
                r: 0.6
496
 
            },
497
 
            width: 52,
498
 
            height: 52,
499
 
            x: 429,
500
 
            y: 217
501
 
        });
502
 
 
503
 
        var leftTuningKeySides = mygraphic.addShape({
504
 
           type: "path",
505
 
           stroke: {
506
 
               weight: 0,
507
 
               color: "#00dd00",
508
 
               opacity: 1
509
 
           },
510
 
           fill: {
511
 
               type: "radial",
512
 
               stops: [
513
 
               {color: "#73371F", opacity: 1, offset: 0},
514
 
               {color: "#35211B", opacity: 1, offset: 1}
515
 
               ]
516
 
           }
517
 
        });
518
 
        leftTuningKeySides.moveTo(318,231);
519
 
        leftTuningKeySides.curveTo(333,227,344,237,336,252);
520
 
        leftTuningKeySides.lineTo(335,253);
521
 
        leftTuningKeySides.curveTo(326,267,297,294,286,300);
522
 
        leftTuningKeySides.curveTo(281,305,262,295,266,283);
523
 
        leftTuningKeySides.curveTo(278,266,306,245,313,234);
524
 
        leftTuningKeySides.end();
525
 
 
526
 
        var rightTuningKeySides = mygraphic.addShape({
527
 
           type: "path",
528
 
           stroke: {
529
 
               weight: 0,
530
 
               color: "#00dd00",
531
 
               opacity: 1
532
 
           },
533
 
           fill: {
534
 
               type: "radial",
535
 
               stops: [
536
 
               {color: "#73371F", opacity: 1, offset: 0},
537
 
               {color: "#35211B", opacity: 1, offset: 1}
538
 
               ]
539
 
           }
540
 
        });
541
 
        
542
 
        rightTuningKeySides.moveTo(476,214);
543
 
        rightTuningKeySides.curveTo(492,206,504,229,494,238);
544
 
        rightTuningKeySides.curveTo(482,247,455,265,432,271);
545
 
        rightTuningKeySides.curveTo(422,275,403,262,420,244);
546
 
        rightTuningKeySides.curveTo(430,235,463,224,476,214);
547
 
        rightTuningKeySides.end();
548
 
 
549
 
        //Shared attributes for tuning key edges
550
 
        var tuningKeyBevelStyle = {   
551
 
           type: "path",
552
 
           stroke: {
553
 
               weight: 0,
554
 
               color: "#00dd00",
555
 
               opacity: 1 
556
 
           },
557
 
           fill: {
558
 
               type: "radial",
559
 
                   stops: [
560
 
                   {color: "#DB8C64", opacity: 1, offset: 0},
561
 
                   {color: "#593123", opacity: 1, offset: 0.5},
562
 
                   {color: "#231610", opacity: 1, offset: 1}
563
 
               ],
564
 
                cx: 0.5,
565
 
                cy: 0.5,
566
 
                fx: 0.3,
567
 
                fy: 0.2,
568
 
                r: 0.5
569
 
           }
570
 
        };
571
 
 
572
 
        //bevel for the right side tuning key
573
 
        var leftTuningKeyBevel = mygraphic.addShape(tuningKeyBevelStyle);      
574
 
        leftTuningKeyBevel.moveTo(318,236);
575
 
        leftTuningKeyBevel.curveTo(324,219,345,249,336,249);
576
 
        leftTuningKeyBevel.curveTo(316,263,292,286,282,301);
577
 
        leftTuningKeyBevel.curveTo(282,304,264,295,266,285);
578
 
        leftTuningKeyBevel.curveTo(273,279,313,247,317,237);
579
 
        leftTuningKeyBevel.end();
580
 
 
581
 
        //bevel for the right side tuning key
582
 
        var rightTuningKeyBevel = mygraphic.addShape(tuningKeyBevelStyle);
583
 
        rightTuningKeyBevel.moveTo(477,215);
584
 
        rightTuningKeyBevel.curveTo(495,205,506,240,494,238);
585
 
        rightTuningKeyBevel.curveTo(481,246,443,268,428,272);
586
 
        rightTuningKeyBevel.curveTo(421,274,407,256,417,248);
587
 
        rightTuningKeyBevel.curveTo(413,253,466,234,477,215);
588
 
        rightTuningKeyBevel.end();
589
 
 
590
 
        //Add an ellipse for the dowel of the left (opposite side) tuning key
591
 
        var nobdowel_left = mygraphic.addShape({
592
 
            type: "ellipse",
593
 
            stroke: {
594
 
               weight: 0,
595
 
               color: "#00dd00",
596
 
               opacity: 1 
597
 
            },
598
 
            fill: {
599
 
               type: "radial",
600
 
               stops: [
601
 
                   {color: "#8E5B40", opacity: 1, offset: 0},
602
 
                   {color: "#593123", opacity: 1, offset: 0.3},
603
 
                   {color: "#231610", opacity: 1, offset: 1}
604
 
               ],
605
 
                cx: 0.5,
606
 
                cy: 0.5,
607
 
                fx: 0.3,
608
 
                fy: 0.2,
609
 
                r: 0.5
610
 
            },
611
 
            width: 24,
612
 
            height: 24,
613
 
            x: 228,
614
 
            y: 268
615
 
        });
616
 
       
617
 
        //Add an ellipse for the dowel of the right (opposite side) tuning key
618
 
        var nobdowel_right = mygraphic.addShape({
619
 
            type: "ellipse",
620
 
            stroke: {
621
 
               weight: 0,
622
 
               color: "#00dd00",
623
 
               opacity: 1 
624
 
            },
625
 
            fill: {
626
 
               type: "radial",
627
 
               stops: [
628
 
                   {color: "#8E5B40", opacity: 1, offset: 0},
629
 
                   {color: "#593123", opacity: 1, offset: 0.3},
630
 
                   {color: "#231610", opacity: 1, offset: 1}
631
 
               ],
632
 
                cx: 0.5,
633
 
                cy: 0.5,
634
 
                fx: 0.3,
635
 
                fy: 0.2,
636
 
                r: 0.5
637
 
            },
638
 
            width: 24,
639
 
            height: 24,
640
 
            x: 374,
641
 
            y: 227
642
 
        });
643
 
        
644
 
        //Add an ellipse for the black tip of the left tuning key
645
 
        var nob_tip_left = mygraphic.addShape({
646
 
            type: "ellipse",
647
 
            stroke: {
648
 
               weight: 2,
649
 
               color: "#332017",
650
 
               opacity: 0.8
651
 
            },
652
 
            fill: {
653
 
               type: "radial",
654
 
               stops: [
655
 
               {color: "#808080", opacity: 1, offset: 0},
656
 
               {color: "#000", opacity: 1, offset: 0.3},
657
 
               {color: "#000", opacity: 1, offset: 1}
658
 
               ],
659
 
                cx: 0.5,
660
 
                cy: 0.5,
661
 
                fx: 0.3,
662
 
                fy: 0.2,
663
 
                r: 0.5
664
 
            },
665
 
            width: 12,
666
 
            height: 12,
667
 
            x: 297,
668
 
            y: 261
669
 
        });
670
 
      
671
 
        //Add an ellipse for the black tip of the right tuning key
672
 
       var nob_tip_right = mygraphic.addShape({
673
 
            type: "ellipse",
674
 
            stroke: {
675
 
               weight: 2,
676
 
               color: "#332017",
677
 
               opacity: 0.8
678
 
            },
679
 
            fill: {
680
 
                type: "radial",
681
 
                stops: [
682
 
                {color: "#808080", opacity: 1, offset: 0},
683
 
                {color: "#000", opacity: 1, offset: 0.5},
684
 
                {color: "#000", opacity: 1, offset: 1}
685
 
                ],
686
 
                cx: 0.5,
687
 
                cy: 0.5,
688
 
                fx: 0.3,
689
 
                fy: 0.2,
690
 
                r: 0.5
691
 
            },
692
 
            width: 12,
693
 
            height: 12,
694
 
            x: 450,
695
 
            y: 238
696
 
        });
697
 
    });
698
 
</script>
699
 
 
700
 
</div>
701
 
 
702
 
<h2>Path Drawing Tool</h2>
703
 
<!-- doesn't contain the header because it may be h3 or h2 -->
704
 
    <p>
705
 
        <div style="float:right; margin: 6px 0 8px 8px;">
706
 
            <a href="graphics-path-tool.html">
707
 
                <img style="border: 1px solid #bfbfbf; height:149px; width:395px;" alt="Screen capture of Graphics path tool" src="../assets/graphics/img/path-tool-capture.png">
708
 
                
709
 
            </a>
710
 
            <div>
711
 
            <a href="graphics-path-tool.html" class="button">Read More</a>
712
 
            </div>
713
 
        </div>
714
 
        Try this simple <a href="graphics-path-tool.html">tool</a> that helps you by generating code while you interactively
715
 
        draw graphic paths. 
716
 
    </p>
717
 
    <p>
718
 
        As you drag the pencil icon, corresponding graphics code is auto-generated. 
719
 
        This code can be copied and pasted into a graphics instance to reproduce 
720
 
        the paths you created with the pencil.
721
 
    </p>
722
 
    <p>    
723
 
        The <a href="graphics-violin.html">violin example</a> was created with this tool.
724
 
    </p>
725
 
 
726
 
 
727
 
<h2>HTML</h2>
728
 
<pre class="code prettyprint">&lt;div id=&quot;#outerframe&quot;&gt;
729
 
    &lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
730
 
&lt;&#x2F;div&gt;</pre>
731
 
 
732
 
 
733
 
<h2>CSS</h2>
734
 
<pre class="code prettyprint">#outerframe {
735
 
    display: inline-block;
736
 
    height: 446px;
737
 
    width: 714px;
738
 
}
739
 
 
740
 
#mygraphiccontainer {
741
 
    display: inline-block;
742
 
    top: 100px;
743
 
    width: 614px;
744
 
    top: 15px;
745
 
    left: 34px;
746
 
    position: relative;
747
 
}
748
 
.woodgrain{
749
 
    opacity:0.2;
750
 
    filter:alpha(opacity=20);
751
 
}</pre>
752
 
 
753
 
 
754
 
<h2>Complete Example Source</h2>
755
 
<pre class="code prettyprint">&lt;div id=&quot;outerframe&quot;&gt;
756
 
&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
757
 
&lt;&#x2F;div&gt;
758
 
&lt;script&gt;
759
 
    YUI().use(&#x27;graphics&#x27;, function (Y) 
760
 
    { 
761
 
        &#x2F;&#x2F;create a graphic instance
762
 
        var mygraphic = new Y.Graphic();
763
 
        mygraphic.render(&quot;#mygraphiccontainer&quot;);
764
 
        
765
 
        &#x2F;&#x2F;draw a background
766
 
        var background = mygraphic.addShape({
767
 
            type: &quot;rect&quot;,
768
 
            stroke: {
769
 
               weight: 0,
770
 
               color: &quot;#f00&quot;,
771
 
               opacity: 0
772
 
            },
773
 
            fill: {
774
 
               type: &quot;radial&quot;,
775
 
               stops: [
776
 
               {color: &quot;#001000&quot;, opacity: 1, offset: 0},
777
 
               {color: &quot;#000&quot;, opacity: 1, offset: 1}
778
 
               ]
779
 
            },
780
 
            width: 614,
781
 
            height: 397,
782
 
            x: 0,
783
 
            y: 0
784
 
        });
785
 
        
786
 
        &#x2F;&#x2F;create a path element to use for the strings
787
 
        var strings = mygraphic.addShape({
788
 
           type: &quot;path&quot;,
789
 
           stroke: {
790
 
               weight: 2,
791
 
               color: &quot;#bbb&quot; 
792
 
           }
793
 
        });
794
 
 
795
 
        &#x2F;&#x2F;draw strings
796
 
        strings.moveTo(614,199);
797
 
        strings.lineTo(536,181);
798
 
        strings.curveTo(532,178,519,181,515,183);
799
 
        strings.lineTo(465,197);
800
 
        strings.lineTo(487,203);
801
 
        strings.lineTo(515,187);
802
 
        strings.curveTo(519,184,529,182,536,184);
803
 
        strings.lineTo(613,202);
804
 
        strings.end();
805
 
 
806
 
        &#x2F;&#x2F;create a path element to use for the fingerboard
807
 
        var finger_board = mygraphic.addShape({
808
 
           type: &quot;path&quot;,
809
 
           stroke: {
810
 
               weight: 1,
811
 
               color: &quot;#f00&quot;,
812
 
               opacity: 0 
813
 
           },
814
 
           fill: {
815
 
               type: &quot;linear&quot;,
816
 
               rotation: 140,
817
 
               stops: [
818
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0},
819
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0.2},
820
 
                   {color: &quot;#302420&quot;, opacity: 1, offset: 0.8}
821
 
               ]
822
 
           }
823
 
        });
824
 
        
825
 
        &#x2F;&#x2F;draw the fingerboard
826
 
        finger_board.moveTo(613,231);
827
 
        finger_board.lineTo(507,204);
828
 
        finger_board.curveTo(506,186,527,183,533,186);
829
 
        finger_board.lineTo(613,205);
830
 
        finger_board.end();
831
 
 
832
 
        &#x2F;&#x2F;Highlight for the fingerboard
833
 
        var fingerboard_high = mygraphic.addShape({
834
 
           type: &quot;path&quot;,
835
 
           stroke: {
836
 
               weight: 1,
837
 
               color: &quot;#555&quot;,  &#x2F;&#x2F;, dashstyle: [3, 4]
838
 
               opacity: 0.5
839
 
           }
840
 
        });
841
 
        
842
 
        fingerboard_high.moveTo(512,199);
843
 
        fingerboard_high.curveTo(517,193,527,190,534,191);
844
 
        fingerboard_high.end();
845
 
 
846
 
        &#x2F;&#x2F;Create a path to use for the headstock
847
 
        var head = mygraphic.addShape({
848
 
           type: &quot;path&quot;,
849
 
           stroke: {
850
 
               weight: 0,
851
 
               color: &quot;#f00&quot;,
852
 
               opacity: 1 &#x2F;&#x2F;,
853
 
               &#x2F;&#x2F;dashstyle: [3, 4]
854
 
           },
855
 
           fill: {
856
 
               type: &quot;linear&quot;,
857
 
               rotation: 60,
858
 
               stops: [
859
 
               {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0},
860
 
               {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.8}
861
 
               ]
862
 
           }
863
 
        });
864
 
        
865
 
        &#x2F;&#x2F;Draw the headstock
866
 
        head.moveTo(614,278);
867
 
        head.lineTo(553,263);
868
 
        head.curveTo(516,255,503,283,500,300);
869
 
        head.lineTo(496,318);
870
 
        head.curveTo(496,323,488,323,486,318);
871
 
        head.curveTo(405,233,310,332,218,321);
872
 
        head.curveTo(149,320,101,270,99,217);
873
 
        head.curveTo(96,182,120,143,141,132);
874
 
        head.curveTo(162,116,199,116,223,131);
875
 
        head.curveTo(242,140,260,170,253,202);
876
 
        head.curveTo(249,228,230,242,213,246);
877
 
        head.curveTo(214,249,218,257,235,246);
878
 
        head.curveTo(254,233,299,209,324,199);
879
 
        head.curveTo(369,182,428,185,470,195);
880
 
        head.lineTo(505,204);
881
 
        head.lineTo(506,203);
882
 
        head.lineTo(614,231);
883
 
        head.end();
884
 
        
885
 
        &#x2F;&#x2F;Outer portion of the spiral on top of the head
886
 
        var outerTopScroll = mygraphic.addShape({     &#x2F;&#x2F;outter top scroll
887
 
           type: &quot;path&quot;,
888
 
           stroke: {
889
 
               weight: 0,
890
 
               color: &quot;#00dd00&quot;, &#x2F;&#x2F; , dashstyle: [3, 4]  
891
 
               opacity: 1
892
 
           },
893
 
           fill: {
894
 
               type: &quot;linear&quot;, &#x2F;&#x2F; 
895
 
               rotation: 90,
896
 
               stops: [
897
 
               {color: &quot;#562A0D&quot;, opacity: 1, offset: 0},
898
 
               {color: &quot;#68340F&quot;, opacity: 1, offset: 1}
899
 
               ]
900
 
           }
901
 
        });
902
 
        outerTopScroll.moveTo(106,229);
903
 
        outerTopScroll.curveTo(104,190,116,154,144,137);
904
 
        outerTopScroll.curveTo(169,121,214,121,237,150);
905
 
        outerTopScroll.curveTo(251,173,258,209,229,230);
906
 
        outerTopScroll.lineTo(219,227);
907
 
        outerTopScroll.curveTo(219,212,237,170,210,157);
908
 
        outerTopScroll.curveTo(175,134,132,167,146,216);
909
 
        outerTopScroll.curveTo(147,220,152,232,156,234);
910
 
        outerTopScroll.lineTo(105,229);
911
 
        outerTopScroll.end();
912
 
 
913
 
        &#x2F;&#x2F;Inner portion of the spiral on top of the head
914
 
        var innerTopScroll = mygraphic.addShape({  &#x2F;&#x2F; inner top scroll
915
 
           type: &quot;path&quot;,
916
 
           stroke: {
917
 
               weight: 0,
918
 
               color: &quot;#00dd00&quot;, &#x2F;&#x2F; , dashstyle: [3, 4]  
919
 
               opacity: 1
920
 
           },
921
 
           fill: {
922
 
               type: &quot;linear&quot;, &#x2F;&#x2F; 
923
 
               rotation: 90,
924
 
               stops: [
925
 
               {color: &quot;#562A0D&quot;, opacity: 1, offset: 0},
926
 
               {color: &quot;#68340F&quot;, opacity: 1, offset: 1}
927
 
               ]
928
 
           }
929
 
        });
930
 
        innerTopScroll.moveTo(200,200);
931
 
        innerTopScroll.moveTo(160,227);
932
 
        innerTopScroll.curveTo(143,206,142,156,190,156);
933
 
        innerTopScroll.curveTo(236,164,226,215,198,219);
934
 
        innerTopScroll.curveTo(185,220,165,211,178,190);
935
 
        innerTopScroll.curveTo(182,216,210,205,204,188);
936
 
 
937
 
        &#x2F;&#x2F;Highlight line along the top of the head
938
 
        var base_high = mygraphic.addShape({
939
 
           type: &quot;path&quot;,
940
 
           stroke: {
941
 
               weight: 2,
942
 
               color: &quot;#fff&quot;, 
943
 
               opacity: 0.1&#x2F;&#x2F;, dashstyle: [3, 4]
944
 
           }
945
 
        });
946
 
        base_high.moveTo(503,207);
947
 
        base_high.curveTo(428,188,354,182,292,221);
948
 
        base_high.curveTo(270,233,242,252,217,258);
949
 
        base_high.lineTo(209,254);
950
 
        base_high.end();
951
 
 
952
 
        &#x2F;&#x2F;Highlight along the spiral and lower edge of the violin head and neck
953
 
        var headLine = mygraphic.addShape({
954
 
           type: &quot;path&quot;,
955
 
           stroke: {
956
 
               weight: 4,
957
 
               color: &quot;#fff&quot;,
958
 
               opacity: 0.1
959
 
           }
960
 
        });
961
 
        headLine.moveTo(614,278);
962
 
        headLine.lineTo(553,263);
963
 
        headLine.curveTo(516,255,503,283,500,300);
964
 
        headLine.lineTo(496,318);
965
 
        headLine.curveTo(496,323,488,323,486,318);
966
 
        headLine.curveTo(405,233,310,332,218,321);
967
 
        headLine.curveTo(149,320,101,270,99,217);
968
 
        headLine.curveTo(96,182,120,143,141,132);
969
 
        headLine.curveTo(162,116,199,116,223,131);
970
 
        headLine.curveTo(242,140,260,170,253,202);
971
 
        headLine.curveTo(249,228,230,240,213,244);
972
 
        headLine.moveTo(216,244);
973
 
        headLine.curveTo(180,248,154,236,148,204);
974
 
        headLine.curveTo(143,185,153,157,184,154);
975
 
        headLine.curveTo(209,152,227,171,222,197);
976
 
        headLine.curveTo(219,224,180,229,172,205);
977
 
        headLine.curveTo(167,201,174,186,181,187);
978
 
        headLine.end();
979
 
         
980
 
        &#x2F;&#x2F;create an ellipse for the fiddle head dot
981
 
        var fiddleHeadDot = mygraphic.addShape({   
982
 
            type: &quot;ellipse&quot;,
983
 
            fill: {
984
 
                color: &quot;#fff&quot;,
985
 
                opacity: 0.1
986
 
            },
987
 
            stroke: {
988
 
                weight: 0,
989
 
                color: &quot;#000&quot;
990
 
            },
991
 
            width: 25,
992
 
            height: 25,
993
 
            x: 178,
994
 
            y: 178
995
 
        });
996
 
 
997
 
        &#x2F;&#x2F;shared properties for the shadows
998
 
        var shadowConfig = {
999
 
           type: &quot;path&quot;,
1000
 
           stroke: {
1001
 
               weight: 0,
1002
 
               color: &quot;#000&quot;,
1003
 
               opacity: 1
1004
 
           },
1005
 
           fill: {
1006
 
               type: &quot;linear&quot;,
1007
 
               rotation: 60,
1008
 
               stops: [
1009
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0},
1010
 
                   {color: &quot;#241105&quot;, opacity: 1, offset: 0.8}
1011
 
               ]
1012
 
           }
1013
 
        }
1014
 
 
1015
 
        &#x2F;&#x2F;Shadow for inner spiral on the top of the head
1016
 
        var innerSpiralFiddleHeadShadow = mygraphic.addShape(shadowConfig); &#x2F;&#x2F; at center of fiddle head 
1017
 
        innerSpiralFiddleHeadShadow.moveTo(204,188);
1018
 
        innerSpiralFiddleHeadShadow.curveTo(207,211,179,206,178,194);
1019
 
        innerSpiralFiddleHeadShadow.curveTo(166,215,219,229,204,190);
1020
 
        innerSpiralFiddleHeadShadow.end();
1021
 
 
1022
 
        &#x2F;&#x2F;Shadow for middle spiral on the top of the head
1023
 
        var middleSpiralFiddleHeadShadow = mygraphic.addShape(shadowConfig);
1024
 
        middleSpiralFiddleHeadShadow.moveTo(223,172);
1025
 
        middleSpiralFiddleHeadShadow.curveTo(239,224,186,233,173,213);
1026
 
        middleSpiralFiddleHeadShadow.curveTo(174,266,257,223,222,171);
1027
 
        middleSpiralFiddleHeadShadow.end();
1028
 
        
1029
 
        &#x2F;&#x2F;Shadow for outer spiral on the top of the head
1030
 
        var outerSpiralFiddleHeadShadow = mygraphic.addShape(shadowConfig);
1031
 
        outerSpiralFiddleHeadShadow.moveTo(148,214);
1032
 
        outerSpiralFiddleHeadShadow.curveTo(158,242,186,250,218,246);
1033
 
        outerSpiralFiddleHeadShadow.lineTo(221,253);
1034
 
        outerSpiralFiddleHeadShadow.curveTo(178,258,154,241,147,214);
1035
 
        outerSpiralFiddleHeadShadow.end();
1036
 
        
1037
 
        &#x2F;&#x2F;Shadow beneath the left tuning key
1038
 
        var leftTuningKeyShadow = mygraphic.addShape(shadowConfig);
1039
 
        leftTuningKeyShadow.moveTo(293,286);
1040
 
        leftTuningKeyShadow.lineTo(323,277);
1041
 
        leftTuningKeyShadow.lineTo(337,289);
1042
 
        leftTuningKeyShadow.lineTo(336,293);
1043
 
        leftTuningKeyShadow.lineTo(292,307);
1044
 
        leftTuningKeyShadow.lineTo(288,294);
1045
 
        leftTuningKeyShadow.lineTo(292,285);
1046
 
        leftTuningKeyShadow.end();
1047
 
        
1048
 
        &#x2F;&#x2F;Shadow beneath the right tuning key
1049
 
        var rightTuningKeyShadow = mygraphic.addShape(shadowConfig);
1050
 
        rightTuningKeyShadow.moveTo(441,260);
1051
 
        rightTuningKeyShadow.lineTo(440,276);
1052
 
        rightTuningKeyShadow.lineTo(436,283);
1053
 
        rightTuningKeyShadow.curveTo(453,286,474,299,492,319);
1054
 
        rightTuningKeyShadow.curveTo(497,308,497,299,498,297);
1055
 
        rightTuningKeyShadow.lineTo(492,278);
1056
 
        rightTuningKeyShadow.lineTo(483,267);
1057
 
        rightTuningKeyShadow.lineTo(468,254);
1058
 
        rightTuningKeyShadow.lineTo(440,260);
1059
 
        rightTuningKeyShadow.end();
1060
 
        
1061
 
        &#x2F;&#x2F;Shadow beneath the left dowel
1062
 
        var leftDowelShadow = mygraphic.addShape(shadowConfig);
1063
 
        leftDowelShadow.moveTo(230,284);
1064
 
        leftDowelShadow.lineTo(251,280);
1065
 
        leftDowelShadow.curveTo(257,308,230,301,229,283);
1066
 
        leftDowelShadow.end();
1067
 
        
1068
 
        &#x2F;&#x2F;Shadow beneath the right dowel
1069
 
        var rightDowelShadow = mygraphic.addShape(shadowConfig);
1070
 
        rightDowelShadow.moveTo(377,246);
1071
 
        rightDowelShadow.lineTo(399,242);
1072
 
        rightDowelShadow.curveTo(402,261,383,263,376,246);
1073
 
        rightDowelShadow.end();
1074
 
 
1075
 
        &#x2F;&#x2F;Add transparent gradients for the woodgrain if the browser supports gradient transparency
1076
 
        var DOCUMENT = Y.config.doc,
1077
 
            canvas = DOCUMENT &amp;&amp; DOCUMENT.createElement(&quot;canvas&quot;);
1078
 
        
1079
 
        if(DOCUMENT &amp;&amp; (DOCUMENT.implementation.hasFeature(&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;TR&#x2F;SVG11&#x2F;feature#BasicStructure&quot;, &quot;1.1&quot;) || (canvas &amp;&amp; canvas.getContext &amp;&amp; canvas.getContext(&quot;2d&quot;))))
1080
 
        {
1081
 
            var headWoodgrain = mygraphic.addShape({
1082
 
               type: &quot;path&quot;,
1083
 
               stroke: {
1084
 
                   weight: 0,
1085
 
                   color: &quot;#f00&quot;,
1086
 
                   opacity: 1 
1087
 
               },
1088
 
               fill: {
1089
 
                        type: &quot;linear&quot;,
1090
 
                        rotation: 5,
1091
 
                        stops: [
1092
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.03},
1093
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.06},
1094
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.09},
1095
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.12},
1096
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.18},
1097
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.20},
1098
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.23},
1099
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.29},
1100
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.34},
1101
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.36},
1102
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.38},
1103
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.40},
1104
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.45},
1105
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.48},
1106
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.50},
1107
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.52},
1108
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.55},
1109
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.62},
1110
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.68},
1111
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.73},
1112
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.76},
1113
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.78},
1114
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.82},
1115
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.86},
1116
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.90},
1117
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 0.94},
1118
 
                           {color: &quot;#3B1E09&quot;, opacity: 1, offset: 0.96},
1119
 
                           {color: &quot;#9B4D17&quot;, opacity: 1, offset: 1}
1120
 
                       ]
1121
 
                    }
1122
 
                });
1123
 
 
1124
 
            &#x2F;&#x2F;Draw the woodgrain
1125
 
            headWoodgrain.moveTo(614,278);
1126
 
            headWoodgrain.lineTo(553,263);
1127
 
            headWoodgrain.curveTo(516,255,503,283,500,300);
1128
 
            headWoodgrain.lineTo(496,318);
1129
 
            headWoodgrain.curveTo(496,323,488,323,486,318);
1130
 
            headWoodgrain.curveTo(405,233,310,332,218,321);
1131
 
            headWoodgrain.curveTo(149,320,101,270,99,217);
1132
 
            headWoodgrain.curveTo(96,182,120,143,141,132);
1133
 
            headWoodgrain.curveTo(162,116,199,116,223,131);
1134
 
            headWoodgrain.curveTo(242,140,260,170,253,202);
1135
 
            headWoodgrain.curveTo(249,228,230,242,213,246);
1136
 
            headWoodgrain.curveTo(214,249,218,257,235,246);
1137
 
            headWoodgrain.curveTo(254,233,299,209,324,199);
1138
 
            headWoodgrain.curveTo(369,182,428,185,470,195);
1139
 
            headWoodgrain.lineTo(505,204);
1140
 
            headWoodgrain.lineTo(506,203);
1141
 
            headWoodgrain.lineTo(614,231);
1142
 
            headWoodgrain.end();
1143
 
            
1144
 
            &#x2F;&#x2F;handle for adding opacity to the whole object.
1145
 
            headWoodgrain.addClass(&#x27;woodgrain&#x27;);  
1146
 
        }
1147
 
        
1148
 
        &#x2F;&#x2F;The bushing for the left tuning key
1149
 
        var nob_bushing_left = mygraphic.addShape({
1150
 
            type: &quot;ellipse&quot;,
1151
 
            stroke: {
1152
 
               weight: 0,
1153
 
               color: &quot;#00dd00&quot;,
1154
 
               opacity: 1 
1155
 
            },
1156
 
            fill: {
1157
 
               type: &quot;radial&quot;,
1158
 
               stops: [
1159
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0},
1160
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0.7},
1161
 
                   {color: &quot;#282622&quot;, opacity: 1, offset: 0.8},
1162
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0.9}
1163
 
               ],
1164
 
                cx: 0.45,
1165
 
                cy: 0.45,
1166
 
                fx: 0.9,
1167
 
                fy: 0.9,
1168
 
                r: 0.6
1169
 
            },
1170
 
            width: 52,
1171
 
            height: 52,
1172
 
            x: 277,
1173
 
            y: 240
1174
 
        });
1175
 
 
1176
 
        &#x2F;&#x2F;The bushing for the right tuning key
1177
 
        var nob_bushing_right = mygraphic.addShape({
1178
 
            type: &quot;ellipse&quot;,
1179
 
            stroke: {
1180
 
               weight: 0,
1181
 
               color: &quot;#00dd00&quot;,
1182
 
               opacity: 1 
1183
 
            },
1184
 
            fill: {
1185
 
               type: &quot;radial&quot;,
1186
 
               stops: [
1187
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0},
1188
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0.7},
1189
 
                   {color: &quot;#282622&quot;, opacity: 1, offset: 0.8},
1190
 
                   {color: &quot;#000&quot;, opacity: 1, offset: 0.9}
1191
 
               ],
1192
 
                cx: 0.45,
1193
 
                cy: 0.45,
1194
 
                fx: 0.9,
1195
 
                fy: 0.9,
1196
 
                r: 0.6
1197
 
            },
1198
 
            width: 52,
1199
 
            height: 52,
1200
 
            x: 429,
1201
 
            y: 217
1202
 
        });
1203
 
 
1204
 
        var leftTuningKeySides = mygraphic.addShape({
1205
 
           type: &quot;path&quot;,
1206
 
           stroke: {
1207
 
               weight: 0,
1208
 
               color: &quot;#00dd00&quot;,
1209
 
               opacity: 1
1210
 
           },
1211
 
           fill: {
1212
 
               type: &quot;radial&quot;,
1213
 
               stops: [
1214
 
               {color: &quot;#73371F&quot;, opacity: 1, offset: 0},
1215
 
               {color: &quot;#35211B&quot;, opacity: 1, offset: 1}
1216
 
               ]
1217
 
           }
1218
 
        });
1219
 
        leftTuningKeySides.moveTo(318,231);
1220
 
        leftTuningKeySides.curveTo(333,227,344,237,336,252);
1221
 
        leftTuningKeySides.lineTo(335,253);
1222
 
        leftTuningKeySides.curveTo(326,267,297,294,286,300);
1223
 
        leftTuningKeySides.curveTo(281,305,262,295,266,283);
1224
 
        leftTuningKeySides.curveTo(278,266,306,245,313,234);
1225
 
        leftTuningKeySides.end();
1226
 
 
1227
 
        var rightTuningKeySides = mygraphic.addShape({
1228
 
           type: &quot;path&quot;,
1229
 
           stroke: {
1230
 
               weight: 0,
1231
 
               color: &quot;#00dd00&quot;,
1232
 
               opacity: 1
1233
 
           },
1234
 
           fill: {
1235
 
               type: &quot;radial&quot;,
1236
 
               stops: [
1237
 
               {color: &quot;#73371F&quot;, opacity: 1, offset: 0},
1238
 
               {color: &quot;#35211B&quot;, opacity: 1, offset: 1}
1239
 
               ]
1240
 
           }
1241
 
        });
1242
 
        
1243
 
        rightTuningKeySides.moveTo(476,214);
1244
 
        rightTuningKeySides.curveTo(492,206,504,229,494,238);
1245
 
        rightTuningKeySides.curveTo(482,247,455,265,432,271);
1246
 
        rightTuningKeySides.curveTo(422,275,403,262,420,244);
1247
 
        rightTuningKeySides.curveTo(430,235,463,224,476,214);
1248
 
        rightTuningKeySides.end();
1249
 
 
1250
 
        &#x2F;&#x2F;Shared attributes for tuning key edges
1251
 
        var tuningKeyBevelStyle = {   
1252
 
           type: &quot;path&quot;,
1253
 
           stroke: {
1254
 
               weight: 0,
1255
 
               color: &quot;#00dd00&quot;,
1256
 
               opacity: 1 
1257
 
           },
1258
 
           fill: {
1259
 
               type: &quot;radial&quot;,
1260
 
                   stops: [
1261
 
                   {color: &quot;#DB8C64&quot;, opacity: 1, offset: 0},
1262
 
                   {color: &quot;#593123&quot;, opacity: 1, offset: 0.5},
1263
 
                   {color: &quot;#231610&quot;, opacity: 1, offset: 1}
1264
 
               ],
1265
 
                cx: 0.5,
1266
 
                cy: 0.5,
1267
 
                fx: 0.3,
1268
 
                fy: 0.2,
1269
 
                r: 0.5
1270
 
           }
1271
 
        };
1272
 
 
1273
 
        &#x2F;&#x2F;bevel for the right side tuning key
1274
 
        var leftTuningKeyBevel = mygraphic.addShape(tuningKeyBevelStyle);      
1275
 
        leftTuningKeyBevel.moveTo(318,236);
1276
 
        leftTuningKeyBevel.curveTo(324,219,345,249,336,249);
1277
 
        leftTuningKeyBevel.curveTo(316,263,292,286,282,301);
1278
 
        leftTuningKeyBevel.curveTo(282,304,264,295,266,285);
1279
 
        leftTuningKeyBevel.curveTo(273,279,313,247,317,237);
1280
 
        leftTuningKeyBevel.end();
1281
 
 
1282
 
        &#x2F;&#x2F;bevel for the right side tuning key
1283
 
        var rightTuningKeyBevel = mygraphic.addShape(tuningKeyBevelStyle);
1284
 
        rightTuningKeyBevel.moveTo(477,215);
1285
 
        rightTuningKeyBevel.curveTo(495,205,506,240,494,238);
1286
 
        rightTuningKeyBevel.curveTo(481,246,443,268,428,272);
1287
 
        rightTuningKeyBevel.curveTo(421,274,407,256,417,248);
1288
 
        rightTuningKeyBevel.curveTo(413,253,466,234,477,215);
1289
 
        rightTuningKeyBevel.end();
1290
 
 
1291
 
        &#x2F;&#x2F;Add an ellipse for the dowel of the left (opposite side) tuning key
1292
 
        var nobdowel_left = mygraphic.addShape({
1293
 
            type: &quot;ellipse&quot;,
1294
 
            stroke: {
1295
 
               weight: 0,
1296
 
               color: &quot;#00dd00&quot;,
1297
 
               opacity: 1 
1298
 
            },
1299
 
            fill: {
1300
 
               type: &quot;radial&quot;,
1301
 
               stops: [
1302
 
                   {color: &quot;#8E5B40&quot;, opacity: 1, offset: 0},
1303
 
                   {color: &quot;#593123&quot;, opacity: 1, offset: 0.3},
1304
 
                   {color: &quot;#231610&quot;, opacity: 1, offset: 1}
1305
 
               ],
1306
 
                cx: 0.5,
1307
 
                cy: 0.5,
1308
 
                fx: 0.3,
1309
 
                fy: 0.2,
1310
 
                r: 0.5
1311
 
            },
1312
 
            width: 24,
1313
 
            height: 24,
1314
 
            x: 228,
1315
 
            y: 268
1316
 
        });
1317
 
       
1318
 
        &#x2F;&#x2F;Add an ellipse for the dowel of the right (opposite side) tuning key
1319
 
        var nobdowel_right = mygraphic.addShape({
1320
 
            type: &quot;ellipse&quot;,
1321
 
            stroke: {
1322
 
               weight: 0,
1323
 
               color: &quot;#00dd00&quot;,
1324
 
               opacity: 1 
1325
 
            },
1326
 
            fill: {
1327
 
               type: &quot;radial&quot;,
1328
 
               stops: [
1329
 
                   {color: &quot;#8E5B40&quot;, opacity: 1, offset: 0},
1330
 
                   {color: &quot;#593123&quot;, opacity: 1, offset: 0.3},
1331
 
                   {color: &quot;#231610&quot;, opacity: 1, offset: 1}
1332
 
               ],
1333
 
                cx: 0.5,
1334
 
                cy: 0.5,
1335
 
                fx: 0.3,
1336
 
                fy: 0.2,
1337
 
                r: 0.5
1338
 
            },
1339
 
            width: 24,
1340
 
            height: 24,
1341
 
            x: 374,
1342
 
            y: 227
1343
 
        });
1344
 
        
1345
 
        &#x2F;&#x2F;Add an ellipse for the black tip of the left tuning key
1346
 
        var nob_tip_left = mygraphic.addShape({
1347
 
            type: &quot;ellipse&quot;,
1348
 
            stroke: {
1349
 
               weight: 2,
1350
 
               color: &quot;#332017&quot;,
1351
 
               opacity: 0.8
1352
 
            },
1353
 
            fill: {
1354
 
               type: &quot;radial&quot;,
1355
 
               stops: [
1356
 
               {color: &quot;#808080&quot;, opacity: 1, offset: 0},
1357
 
               {color: &quot;#000&quot;, opacity: 1, offset: 0.3},
1358
 
               {color: &quot;#000&quot;, opacity: 1, offset: 1}
1359
 
               ],
1360
 
                cx: 0.5,
1361
 
                cy: 0.5,
1362
 
                fx: 0.3,
1363
 
                fy: 0.2,
1364
 
                r: 0.5
1365
 
            },
1366
 
            width: 12,
1367
 
            height: 12,
1368
 
            x: 297,
1369
 
            y: 261
1370
 
        });
1371
 
      
1372
 
        &#x2F;&#x2F;Add an ellipse for the black tip of the right tuning key
1373
 
       var nob_tip_right = mygraphic.addShape({
1374
 
            type: &quot;ellipse&quot;,
1375
 
            stroke: {
1376
 
               weight: 2,
1377
 
               color: &quot;#332017&quot;,
1378
 
               opacity: 0.8
1379
 
            },
1380
 
            fill: {
1381
 
                type: &quot;radial&quot;,
1382
 
                stops: [
1383
 
                {color: &quot;#808080&quot;, opacity: 1, offset: 0},
1384
 
                {color: &quot;#000&quot;, opacity: 1, offset: 0.5},
1385
 
                {color: &quot;#000&quot;, opacity: 1, offset: 1}
1386
 
                ],
1387
 
                cx: 0.5,
1388
 
                cy: 0.5,
1389
 
                fx: 0.3,
1390
 
                fy: 0.2,
1391
 
                r: 0.5
1392
 
            },
1393
 
            width: 12,
1394
 
            height: 12,
1395
 
            x: 450,
1396
 
            y: 238
1397
 
        });
1398
 
    });
1399
 
&lt;&#x2F;script&gt;</pre>
1400
 
 
1401
 
</div>
1402
 
            </div>
1403
 
        </div>
1404
 
 
1405
 
        <div class="yui3-u-1-4">
1406
 
            <div class="sidebar">
1407
 
                
1408
 
 
1409
 
                
1410
 
                    <div class="sidebox">
1411
 
                        <div class="hd">
1412
 
                            <h2 class="no-toc">Examples</h2>
1413
 
                        </div>
1414
 
 
1415
 
                        <div class="bd">
1416
 
                            <ul class="examples">
1417
 
                                
1418
 
                                    
1419
 
                                        <li data-description="Shows how to create a Graphic instance and add shapes.">
1420
 
                                            <a href="graphics-simple.html">Basic Graphics Implementation</a>
1421
 
                                        </li>
1422
 
                                    
1423
 
                                
1424
 
                                    
1425
 
                                        <li data-description="Shows how to draw lines and polygons.">
1426
 
                                            <a href="graphics-path.html">Basic Path</a>
1427
 
                                        </li>
1428
 
                                    
1429
 
                                
1430
 
                                    
1431
 
                                        <li data-description="Shows how to create linear and radial gradient fills.">
1432
 
                                            <a href="graphics-gradients.html">Create Gradient Fills</a>
1433
 
                                        </li>
1434
 
                                    
1435
 
                                
1436
 
                                    
1437
 
                                        <li data-description="Shows how to add drag to a shape.">
1438
 
                                            <a href="graphics-drag.html">Basic drag with graphic object</a>
1439
 
                                        </li>
1440
 
                                    
1441
 
                                
1442
 
                                    
1443
 
                                        <li data-description="Shows how to apply transforms to shape.">
1444
 
                                            <a href="graphics-transforms.html">Using Transforms</a>
1445
 
                                        </li>
1446
 
                                    
1447
 
                                
1448
 
                                    
1449
 
                                        <li data-description="Shows how to use a custom shape with the Graphics module.">
1450
 
                                            <a href="graphics-customshape.html">Custom Shape</a>
1451
 
                                        </li>
1452
 
                                    
1453
 
                                
1454
 
                                    
1455
 
                                        <li data-description="Shows to use the graphics api to draw a realistic glass.">
1456
 
                                            <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
1457
 
                                        </li>
1458
 
                                    
1459
 
                                
1460
 
                                    
1461
 
                                        <li data-description="Shows to use the graphics api to draw a violin.">
1462
 
                                            <a href="graphics-violin.html">Complex Drawing: Violin</a>
1463
 
                                        </li>
1464
 
                                    
1465
 
                                
1466
 
                                    
1467
 
                                
1468
 
                            </ul>
1469
 
                        </div>
1470
 
                    </div>
1471
 
                
1472
 
 
1473
 
                
1474
 
                    <div class="sidebox">
1475
 
                        <div class="hd">
1476
 
                            <h2 class="no-toc">Examples That Use This Component</h2>
1477
 
                        </div>
1478
 
 
1479
 
                        <div class="bd">
1480
 
                            <ul class="examples">
1481
 
                                
1482
 
                                    
1483
 
                                
1484
 
                                    
1485
 
                                
1486
 
                                    
1487
 
                                
1488
 
                                    
1489
 
                                
1490
 
                                    
1491
 
                                
1492
 
                                    
1493
 
                                
1494
 
                                    
1495
 
                                
1496
 
                                    
1497
 
                                
1498
 
                                    
1499
 
                                        <li data-description="This example demonstrates animating an element along a curved path using bezier control points.">
1500
 
                                            <a href="../anim/curve.html">Animating Along a Curved Path</a>
1501
 
                                        </li>
1502
 
                                    
1503
 
                                
1504
 
                            </ul>
1505
 
                        </div>
1506
 
                    </div>
1507
 
                
1508
 
            </div>
1509
 
        </div>
1510
 
    </div>
1511
 
</div>
1512
 
 
1513
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
1514
 
<script>prettyPrint();</script>
1515
 
 
1516
 
</body>
1517
 
</html>