📄 ch13_04.htm
字号:
<?label 13.4. Additional GD Modules?><html><head><title>Additional GD Modules (CGI Programming with Perl)</title><link href="../style/style1.css" type="text/css" rel="stylesheet" /><meta name="DC.Creator" content="Scott Guelich, Gunther Birznieks and Shishir Gundavaram" /><meta scheme="MIME" content="text/xml" name="DC.Format" /><meta content="en-US" name="DC.Language" /><meta content="O'Reilly & Associates, Inc." name="DC.Publisher" /><meta scheme="ISBN" name="DC.Source" content="1565924193L" /><meta name="DC.Subject.Keyword" content="stuff" /><meta name="DC.Title" content="CGI Programming with Perl" /><meta content="Text.Monograph" name="DC.Type" /></head><body bgcolor="#ffffff"><img src="gifs/smbanner.gif" alt="Book Home" usemap="#banner-map" border="0" /><map name="banner-map"><area alt="CGI Programming with Perl" href="index.htm" coords="0,0,466,65" shape="rect" /><area alt="Search this book" href="jobjects/fsearch.htm" coords="467,0,514,18" shape="rect" /></map><div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch13_03.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm">CGI Programming with Perl</a></td><td width="172" valign="top" align="right"><a href="ch13_05.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr></table></div><hr align="left" width="515" /><h2 class="sect1">13.4. Additional GD Modules</h2><p><a name="INDEX-2589" />Several modules are available on CPAN thatwork with GD. Some provide convenience methods that make it easier tointeract with GD. Others use GD to create graphs easily. In thissection, we will look at GD::Text, which helps place text in GDimages, and GD::Graph, the most popular graphing module, along withextensions provided by GD::Graph3D.</p><a name="ch13-13-fm2xml" /><div class="sect2"><h3 class="sect2">13.4.1. GD::Text</h3><p><a name="INDEX-2590" /><a name="INDEX-2591" />GD::Text is collection ofmodules for managing text, written by Martin Verbruggen. GD::Textprovides three modules for working with text in GD images: GD::Textprovides information about the size of text in GD,<a name="INDEX-2592" />GD::Text::Alignallows us to place text in GD with greater control, and<a name="INDEX-2593" /><a name="INDEX-2594" />GD::Text::Wrap allows us to place textboxes containing wrapped text. We don't have the space to coverall three of these modules in detail, but let's take a look atwhat is probably the most useful of these modules, GD::Text::Align.</p><a name="ch13-14-fm2xml" /><div class="sect3"><h3 class="sect3">13.4.1.1. GD::Text::Align</h3><p>In <a name="INDEX-2595" /><a name="INDEX-2596" />our previousexample, <em class="filename">loads.cgi</em>, we used preset constants todetermine the starting position of our centered title, "SystemLoad Average." These values are derived from trial and error,and although not elegant, this approach works for images when thetitle is fixed. However, if someone decides to change the title ofthis image, the <a name="INDEX-2597" /><a name="INDEX-2598" />coordinates also need to beadjusted to keep the new title centered horizontally. And for imageswith dynamic titles, this approach will simply not work. A muchbetter solution would be to calculate the title's placementdynamically.</p><p>GD::Text::Align allows us to do this easily. In the above example,the <tt class="literal">TITLE_Y_COORD</tt> constant is really the topmargin, and <tt class="literal">TITLE_X_COORD</tt> is the left margin(remember coordinates start at the top left corner of the image inGD). There is nothing wrong with a constant for the top margin, butif we want to have a centered title, then we should calculate<tt class="literal">TITLE_X_COORD</tt> dynamically.</p><p>Thus, let's look at how we could modify<em class="filename">loads.cgi</em> to do this with GD::Text::Align.First, let's include the GD::Text::Align module at the start ofthe script:</p><blockquote><pre class="code">use GD::Text::Align;</pre></blockquote><p>Next, we can replace the line that places the title string (in the<tt class="function">area_graph</tt> subroutine) with the following:</p><blockquote><pre class="code"># Add Centered Titlemy $title = GD::Text::Align->new( $image, font => gdLargeFont, text => TITLE_TEXT, color => $text_color, valign => "top", halign => "center",);$title->draw( IMAGE_SIZE / 2, TITLE_Y_COORD );</pre></blockquote><p>We create a GD::Text::Align object by passing our GD object,<tt class="literal">$image</tt>, and a number of parameters describing ourtext, and the <tt class="function">draw</tt> method adds our title to theimage. We should then remove the <tt class="literal">TITLE_X_COORD</tt>constant, which we know longer use; you may also want to rename<tt class="literal">TITLE_Y_COORD</tt> to something more meaningful in thiscontext, such as <tt class="literal">TITLE_TOP_MARGIN</tt>.</p><p>Besides allowing you to place aligned text, GD::Text::Align also letsyou obtain coordinates for the bounding box for a text string beforeyou place it so you can make adjustments if necessary (such asreducing the size of the font). It also supports True Type fonts andplacing text at angles. Refer to the GD::Text::Align onlinedocumentation for more information.</p></div></div><a name="ch13-15-fm2xml" /><div class="sect2"><h3 class="sect2">13.4.2. GD::Graph</h3><p><a name="INDEX-2599" /><a name="INDEX-2600" />GD::Graph, also by Martin Verbruggen, isa collection of modules that produce graphs using GD. GD::Graph hashad a few different names within the last year. It was originallycalled <a name="INDEX-2601" />GIFgraph.However, after GD removed support for GIF, it no longer producedGIFs; in fact, it broke. Steve Bonds updated it to use PNG andrenamed it as <a name="INDEX-2602" /> <a name="INDEX-2,603" />Chart::PNGgraph.Later, Martin Verbruggen gave it the more general name, GD::Graph,and removed specific image format support. Previously, you called the<tt class="function">plot</tt> method to retrieve the graph in either GIF(for GIFgraph) or PNG (for PNGgraph) formats. Now,<tt class="function">plot</tt> returns a GD::Image object so theuser can choose the format desired. We'll see how this works ina moment.</p><p>To install <a name="INDEX-2604" /> <a name="INDEX-2,605" /> <a name="INDEX-2,606" />GD::Graph, you mustfirst have GD and GD::Text installed. GD::Graph provides thefollowing modules for creating graphs:</p><ul><li><p><a name="INDEX-2607" />GD::Graph::area creates area charts, asshown in <a href="ch13_04.htm#ch13-23932">Figure 13-2</a>.</p></li></ul><a name="ch13-23932" /><div class="figure"><img width="323" src="figs/cgi2.1302.gif" height="242" alt="Figure 13-2" /></div><h4 class="objtitle">Figure 13-2. An area chart created with GD::Graph::area</h4><ul><li><p><a name="INDEX-2608" />GD::Graph::barscreates bar charts, as shown in <a href="ch13_04.htm#ch13-64621">Figure 13-3</a>.</p></li></ul><a name="ch13-64621" /><div class="figure"><img width="323" src="figs/cgi2.1303.gif" height="242" alt="Figure 13-3" /></div><h4 class="objtitle">Figure 13-3. A bar chart created with GD::Graph::bars</h4><ul><li><p><a name="INDEX-2609" />GD::Graph::linescreates line charts, as shown in <a href="ch13_04.htm#ch13-69374">Figure 13-4</a>.</p></li></ul><a name="ch13-69374" /><div class="figure"><img width="323" src="figs/cgi2.1304.gif" height="242" alt="Figure 13-4" /></div><h4 class="objtitle">Figure 13-4. A line chart created with GD::Graph::lines</h4><ul><li><p><a name="INDEX-2610" /> <a name="INDEX-2,611" /> <a name="INDEX-2,612" />GD::Graph::points creates point charts(also sometimes called XY or scatter charts), as shown in <a href="ch13_04.htm#ch13-43460">Figure 13-5</a>.</p></li></ul><a name="ch13-43460" /><div class="figure"><img width="323" src="figs/cgi2.1305.gif" height="242" alt="Figure 13-5" /></div><h4 class="objtitle">Figure 13-5. A point chart created with GD::Graph::points</h4><ul><li><p><a name="INDEX-2613" /><a name="INDEX-2614" />GD::Graph::linespoints creates acombination of line and point charts, as shown in <a href="ch13_04.htm#ch13-19192">Figure 13-6</a>.</p></li></ul><a name="ch13-19192" /><div class="figure"><img width="323" src="figs/cgi2.1306.gif" height="242" alt="Figure 13-6" /></div><h4 class="objtitle">Figure 13-6. A combination lines and points chart created with GD::Graph::linespoints</h4><ul><li><p><a name="INDEX-2615" />GD::Graph::piecreates pie charts, as shown in <a href="ch13_04.htm#ch13-21659">Figure 13-7</a>.</p></li></ul><a name="ch13-21659" /><div class="figure"><img width="242" src="figs/cgi2.1307.gif" height="242" alt="Figure 13-7" /></div><h4 class="objtitle">Figure 13-7. A pie chart created with GD::Graph::pie</h4><ul><li><p><a name="INDEX-2616" />GD::Graph::mixed allowsyou to create a combination of any of the previous types except piecharts, as shown in <a href="ch13_04.htm#ch13-58821">Figure 13-8</a>.</p></li></ul><p>Each of the previous examples uses the data shown in <a href="ch13_04.htm#ch13-33858">Table 13-1</a>.</p><a name="ch13-33858" /><h4 class="objtitle">Table 13-1. Sample Daily Commute Time in Minutes </h4><table border="1"><tr><th><p>Weekday</p></th><th><p>Monday</p></th><th><p>Tuesday</p></th><th><p>Wednesday</p></th><th><p>Thursday</p></th><th><p>Friday</p></th></tr><tr><td><p>Morning</p></td><td><p>33</p></td><td><p>24</p></td><td><p>23</p></td><td><p>19</p></td><td><p>21</p></td></tr>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -