Document

Download Report

Transcript Document 

Chapter 30 - Dynamic HTML:
Structured Graphics ActiveX Control
Outline
30.1
30.2
30.3
30.4
30.5
30.6
30.7
Introduction
Shape Primitives
Moving Shapes with Translate
Rotation
Mouse Events and External Source Files
Scaling
Web Resources
 2004 Prentice Hall, Inc. All rights reserved.
1
2
Objectives
• In this chapter, you will learn:
– To be able to use the Structured Graphics Control to create
various shapes.
– To understand the Structured Graphics Control methods for
modifying lines and borders.
– To understand the Structured Graphics Control methods for
modifying colors and fill styles.
– To be able to enable event capturing for the Structured
Graphics Control.
– To be able to import external lists of methods into the
Structured Graphics Control.
– To be able to scale, rotate and translate shapes in the
Structured Graphics Control.
 2004 Prentice Hall, Inc. All rights reserved.
3
30.1 Introduction
• Structured Graphics ActiveX Control
– object element
– Visual presentation via DirectAnimation
• Subset of DirectX software
 2004 Prentice Hall, Inc. All rights reserved.
4
30.2 Shape Primitives
• Commands passed through param tags
– Assign each param a line number
• "Line001"
– SetLineColor
• RGB triplet
• Sets color of lines and borders of shapes
– SetLineStyle
• Line style and width
– Solid, invisible or dashed
– SetFillColor
• RGB triplet
• Foreground color to fill shapes
 2004 Prentice Hall, Inc. All rights reserved.
5
30.2 Shape Primitives
• Commands passed through param tags, cont.
– SetFillStyle
Number
Fill Style
None
Solid fill
None
Horizontal lines
Vertical lines
Diagonal lines
Diagonal lines
Cross-hatch
Diagonal cross-hatch
Horizontal Gradient
Vertical Gradient
Circular Gradient
Line Gradient
Rectangular Gradient
Shaped Gradient
Fig. 30.2 Fill styles available for the SetFillStyle method.
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 2004 Prentice Hall, Inc. All rights reserved.
6
30.2 Shape Primitives
• Commands passed through param tags, cont.
– Oval
• x- and y-coordinates of bounding box
• Coordinates measured from center of control
• Height, width, rotation
– Arc
• x- and y-coordinates of bounding box
• Height, width of box it encloses
• Starting angle (degrees)
• Size of arc
• Rotation
– Pie
• Similar to Arc, but filled
 2004 Prentice Hall, Inc. All rights reserved.
7
30.2 Shape Primitives
• Commands passed through param tags, cont.
– Polygon
• Number of vertices
• x- and y-coordinates of each vertex
– Rect
• x- and y-coordinates of bounding box
• Height, width, rotation
– RoundRect
•
•
•
•
x- and y-coordinates of bounding box
Height, width of box
Height, width of arc
Rotation
 2004 Prentice Hall, Inc. All rights reserved.
8
30.2 Shape Primitives
• Commands passed through param tags, cont.
– SetFont
• Font
• Height
• Boldness
• Italic, underline, strikethrough
– Text
• Text
• x- and y-coordinates
• Rotation
– PolyLine
• Number of vertices
• x- and y-coordinates of each vertex
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
9
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig 30.1: shapes.html
6
<!-- Creating simple shapes -->
shapes.html
(1 of 3)
-->
7
8
9
10
11
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Structured Graphics -
Inserting the Structured
Graphics Control
Shapes</title>
</head>
12
13
<body>
14
15
<object id = "shapes" style = "background-color:
Setting the line color to 0, 0, 0
(black)
#CCCCFF;
16
width: 500; height: 400"
17
classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
18
19
20
21
22
23
24
<param name = "Line0001"
value = "SetLineColor( 0, 0, 0 )" />
<param name = "Line0002"
value = "SetLineStyle( 1, 1 )" />
Creating a thin, solid line
<param name = "Line0003"
value = "SetFillColor( 0, 255, 255 )" />
Setting the fill color to cyan
 2004 Prentice Hall, Inc.
All rights reserved.
25
26
<param name = "Line0004"
value = "SetFillStyle( 1 )" />
27
28
10
Outline
<param name = "Line0005"
36
Setting the fill
style toan
a solid
colorthe
Drawing
oval with
shapes.html
previously
specified
settings
<param name = "Line0006"
(2 of
3)
Drawing an arc with
value = "Arc( -200, -125, 100, 100, 45, 135, 0 )" />
the same settings
<param name = "Line0007"
Drawing a pie
value = "Pie( 100, -100, 150, 150, 90, 120, 0 )" />
(filled arc)
<param name = "Line0008"
Drawing a polygon with 5
value = "Polygon(5, 0, 0, 10, 20, 0, -30,
vertices
-10, -10, -10, 25)" />
37
<param name = "Line0009"
29
30
31
32
33
34
35
38
39
40
value = "Oval( 0, -175, 25, 50, 45 )" />
value = "Rect( -185, 0, 60, 30, 25 )" />
Drawing a filled rectangle
<param name = "Line0010"
value = "RoundRect( 200, 100, 35, 60, 10, 10, 25 )" />
Drawing a filled
rectangle with
rounded corners
 2004 Prentice Hall, Inc.
All rights reserved.
41
11
<param name = "Line0011"
42
value = "SetFont( 'Arial', 65, 400, 0, 0, 0 )" />
43
<param name = "Line0012"
44
shapes.html
Printing the
text “Shapes”
(3 of 3)
value = "Text( 'Shapes', -200, 200 , -35 )" />
45
46
<param name = "Line0013"
47
value = "SetLineStyle( 2,1 )" />
48
<param name = "Line0014"
49
Drawing a line with 5 vertices
-75, -75, 75, -75)" />
51
52
Setting the line style to
dashed
value = "PolyLine( 5, 100, 0, 120, 175, -150, -50,
50
Setting the font toOutline
Arial, bold, size 65
</object>
53
54
</body>
55 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
12
30.2 Shape Primitives
Fig. 30.1 Structured Graphics ActiveX Control creates shapes.
 2004 Prentice Hall, Inc. All rights reserved.
13
30.3 Moving Shapes With Translate
• Translate
– Move and transform shapes
• New params
– SetTextureFill
• x- and y-coordinates inside shape
• Location of texture file
• Stretch or repeat
– Translate
• Relative distance to move shape along x-, y- and z-axes
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
14
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 30.3: bounce.html
-->
6
<!-- Textures and the Translate method -->
bounce.html
(1 of 3)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Structured Graphics - Translate</title>
11
12
<script type = "text/javascript">
13
<!--
14
var x = 15;
15
var y = 15;
16
var upDown = -1;
17
var leftRight = 1;
Variables to track ball’s
position and movement
18
19
function start()
20
{
window.setInterval( "run()", 50 );
21
22
}
23
 2004 Prentice Hall, Inc.
All rights reserved.
24
function run()
25
{
15
26
// if the ball hits the top or bottom side...
27
if ( y == -100 || y == 50 )
upDown *= -1;
28
Outline
Change direction when
the ball hits a wall
29
30
// if the ball hits the left or right side...
31
if ( x == -150 || x == 100 )
bounce.html
(2 of 3)
leftRight *= -1;
32
33
34
// Move the ball and increment our counters
35
ball.Translate( leftRight * 5, upDown * 5, 0 );
36
y += upDown * 5;
37
x += leftRight * 5;
38
}
39
// -->
40
</script>
41
Move the ball 5 units in the
proper direction
</head>
42
43
<body onload = "start()">
44
 2004 Prentice Hall, Inc.
All rights reserved.
45
<object id = "ball" style = "background-color: ffffff;
46
width: 300; height: 200; border-style: groove;
47
position: absolute;"
48
classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
49
50
<param name = "Line0001" value = "SetLineStyle( 0 )" />
51
<param name = "Line0002"
value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />
52
<param name = "Line0003"
53
Outline
bounce.html
(3 of 3)
Fill the ball with texture from
file ball.gif
value = "Oval( 15, 15, 50, 50 )" />
54
55
16
</object>
56
57
</body>
58 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
17
30.3 Moving Shapes With Translate
Fig. 30.3 Methods SetTextureFill and Translate.
 2004 Prentice Hall, Inc. All rights reserved.
18
30.4 Rotation
• Rotate
– Rotate shapes in three-dimensional space
• New params
– Rotate
• How far to rotate around x-, y- and z-axes
– SetFillColor
• Optional second parameter is background color
• Use fill styles 9, 11, 13 for gradients
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
19
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 30.4: gradient.html -->
6
<!-- Gradients and rotation
-->
gradient.html
(1 of 3)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Structured Graphics - Gradients</title>
11
12
<script type = "text/javascript">
13
<!--
14
var speed = 5;
15
var counter = 180;
16
17
function start()
18
{
window.setInterval( "run()", 100 );
19
20
}
21
 2004 Prentice Hall, Inc.
All rights reserved.
22
function run()
23
{
20
Outline
counter += speed;
24
25
26
// accelerate half the time...
27
if ( ( counter % 360 ) > 180 )
Vary the speed of rotation
gradient.html
(2 of 3)
speed *= ( 5 / 4 );
28
29
30
// decelerate the other half.
31
if ( ( counter % 360 ) < 180 )
speed /= ( 5 / 4 );
32
33
pies.Rotate( 0, 0, speed );
34
35
}
36
// -->
37
</script>
Rotate the pies
38
39
</head>
40
41
<body onload = "start()">
42
43
<object id = "pies" style = "background-color:blue;
44
width: 300; height: 200;"
45
classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
Declaring the pies
46
 2004 Prentice Hall, Inc.
All rights reserved.
<param name = "Line0001"
47
21
value = "SetFillColor( 255, 0, 0, 0, 0, 0 )" />
48
Set the fill color toOutline
red
<param name = "Line0002"
49
value = "SetFillStyle( 13 )" />
50
<param name = "Line0003"
51
value = "Pie( -75, -75, 150, 150, 90, 120, 300 )" />
52
gradient.html
(3 of 3)
53
<param name = "Line0004"
54
value = "SetFillStyle( 9 )" />
55
<param name = "Line0005"
56
Set the fill style to 3 different
gradient types
value = "Pie( -75, -75, 150, 150, 90, 120, 180 )" />
57
58
<param name = "Line0006"
59
value = "SetFillStyle( 11 )" />
60
<param name = "Line0007"
61
value = "Pie( -75, -75, 150, 150, 90, 120, 60 )" />
62
63
</object>
64
65
</body>
66 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
22
30.4 Rotation
Fig. 30.4 Using gradients and Rotate.
 2004 Prentice Hall, Inc. All rights reserved.
23
30.5 Mouse Events and External Source
Files
• Mouse events
– Set MouseEventsEnabled property to 1
• External source files
– Set SourceURL property to location of file
– Make HTML easier to read/maintain
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
24
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 30.5: bounce2.html
-->
6
<!-- SourceURL and MouseEventsEnabled -->
bounce2.html
(1 of 3)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Structured Graphics - Shapes</title>
11
12
13
<script for = "ball" event = "onclick" type =
"text/javascript">
14
<!--
15
ball.SourceURL = "newoval.txt";
16
// -->
17
Import code from newoval.txt
</script>
18
19
<script type = "text/javascript">
20
<!--
21
var x = 20;
22
var y = 20;
23
var upDown = -1;
24
var leftRight = 1;
25
 2004 Prentice Hall, Inc.
All rights reserved.
26
function start()
27
{
Outline
window.setInterval( "run()", 50 );
28
29
25
}
30
31
function run()
32
{
bounce2.html
(2 of 3)
if ( y == -100 || y == 50 )
33
upDown *= -1;
34
35
if ( x == -150 || x == 100 )
36
leftRight *= -1;
37
38
39
ball.Translate( leftRight * 5, upDown * 5, 0 );
40
y += upDown * 5;
41
x += leftRight *5;
42
}
43
// -->
44
</script>
45
</head>
46
 2004 Prentice Hall, Inc.
All rights reserved.
47
<body onload = "start()">
49
26
Outline
48
<object id = "ball"
50
style = "width: 300; height: 200; border-style: groove;
51
position: absolute; top: 10; left: 10;"
52
classid = "clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6">
bounce2.html
(3 of 3)
53
54
<param name = "Line0001" value = "SetLineStyle(0)" />
55
<param name = "Line0002"
value = "SetTextureFill( 0, 0, 'ball.gif', 0 )" />
56
<param name = "Line0003"
57
value = "Oval( 20, 20, 50, 50 )" />
58
<param name = "MouseEventsEnabled" value = "1" />
59
60
Enabling mouse events
</object>
61
62
</body>
63 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
1
SetLineStyle( 1, 3 )
2
SetFillStyle( 1 )
3
Oval( 20, 20, 50, 50, 0 )
27
Outline
4
5
SetLineStyle( 1, 1 )
6
PolyLine( 2, 45, 20, 45, 70, 0 )
7
PolyLine( 2, 45, 20, 45, 70, 90 )
8
PolyLine( 2, 45, 20, 45, 70, 45 )
9
PolyLine( 2, 45, 20, 45, 70, 135 )
newoval.txt
(1 of 1)
Code moved to a separate text file
10
11 SetFillColor( 0, 255, 0 )
12 Oval( 30, 30, 30, 30, 0 )
13 SetFillColor( 255 ,0, 0 )
14 Oval( 35, 35, 20, 20, 0 )
 2004 Prentice Hall, Inc.
All rights reserved.
28
30.5 Mouse Events and External Source
Files
Fig. 30.5 Using SourceURL and MouseEventsEnabled.
 2004 Prentice Hall, Inc. All rights reserved.
29
30.6 Scaling
• Scale
– Modifies size
– Retains shape and position
– params are percentage to scale each dimension
• Greater than 1 grows, less than 1 shrinks
• position and z-index to place objects on page
 2004 Prentice Hall, Inc. All rights reserved.
1
<?xml version = "1.0"?>
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3
30
Outline
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
<!-- Fig. 30.7: scaling.html -->
6
<!-- Scaling a shape
-->
scaling.html
(1 of 4)
7
8
9
10
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Structured Graphics - Scaling</title>
11
12
<script type = "text/javascript">
13
<!--
14
var speedX = 0;
15
var speedY = 0;
16
var speedZ = 0;
17
var scale = 1;
18
19
function start()
20
{
window.setInterval( "run()", 100 );
21
22
}
23
 2004 Prentice Hall, Inc.
All rights reserved.
24
function run()
25
{
26
drawing.Rotate( speedX, speedY, speedZ );
27
drawing.Scale( scale, scale, scale );
28
}
29
// -->
30
</script>
31
Rotate and scale the
drawing
Outline
scaling.html
(2 of 4)
31
32
</head>
33
34
<body onload = "start()">
35
36
<div style = "position: absolute; top: 25; left: 220">
37
<input type = "button" value = "Rotate-X"
38
39
40
41
42
onclick = "speedX = ( speedX ? 0 : 5 )" /><br />
<input type = "button" value = "Rotate-Y"
onclick = "speedY = ( speedY ? 0 : 5 )" /><br />
<input type = "button" value = "Rotate-Z"
onclick = "speedZ = ( speedZ ? 0 : 5 )" /><br />
43
<br />
44
<input type = "button" value = "Scale Up"
45
46
47
48
Defining buttons to control scaling,
speed and rotation of the foreground
onclick = "scale = ( scale * 10 / 9 )" /><br />
<input type = "button" value = "Scale Down"
onclick = "scale = ( scale * 9 / 10 )" />
</div>
 2004 Prentice Hall, Inc.
All rights reserved.
49
50
32
<object id = "drawing" style = " position: absolute;
51
z-index: 2; width: 200; height:
300;"
Stack objects
52
classid = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
Outline
using z-index property
53
54
<param name = "Line0001" value = "SetFillColor( 0,0,0 )" />
55
<param name = "Line0002" value = "SetFillStyle( 0 )" />
56
<param name = "Line0003" value = "SetLineStyle( 1, 3 )" />
scaling.html
Defining
(3 ofthe
4)
background shapes
57
58
59
<param name = "Line0004"
value = "Oval( -25, -100, 50, 50, 0 )" />
60
61
62
<param name = "Line0005"
value = "PolyLine(2, 0, -50, 0, 50 )" />
63
64
65
<param name = "Line0006"
value = "PolyLine( 3, -30, -25, 0, -15, 30, -25 )" />
66
67
68
<param name = "Line0007"
value = "PolyLine( 3, -15, 90, 0, 50, 15, 90 )" />
69
70
71
72
73
<param name = "Line0008"
value = "SetFillColor ( 255, 0, 0 )" />
<param name = "Line0009"
value = "Oval( -15, -85, 7, 7, 0 )" />
 2004 Prentice Hall, Inc.
All rights reserved.
<param name = "Line0010"
74
value = "Oval( 5, -85, 7, 7, 0 )" />
75
76
Outline
<param name = "Line0011"
77
value = "SetLineStyle( 1, 2 )" />
78
<param name = "Line0012"
79
scaling.html
(4 of 4)
value = "SetLineColor( 255, 0, 0 )" />
80
<param name = "Line0013"
81
value = "SetFont( 'Courier', 25, 200, 0, 0, 0 )" />
82
<param name = "Line0014"
83
value = "Text( 'Hello', -35, -115 , 0 )" />
84
85
33
</object>
86
87
<object id = "background" style = " position:absolute;
88
z-index: 1; width: 200; height: 300;
89
background-color: none" classid =
90
"CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">
91
<param name = "Line0001"
92
value = "SetFillColor( 38, 250, 38 )" />
93
<param name = "Line0002"
94
value = "Oval( -75, -125, 150, 250, 0 )" />
95
96
97
</object>
</body>
98 </html>
 2004 Prentice Hall, Inc.
All rights reserved.
34
30.6 Scaling
Fig. 30.7 Rotating a shape in three dimensions and scaling up and down.
 2004 Prentice Hall, Inc. All rights reserved.