| [ Index ] |
|
Code source de jpGraph 2.2 |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> 2 <HTML> 3 <HEAD> 4 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1"> 5 <LINK REL="Start" HREF="index.html"> 6 <LINK REL="Contents" HREF="toc.html"> 7 <LINK REL="Prev" HREF="101Introduction.html"> 8 <LINK REL="Next" HREF="103Addinglinesandrectanglestoacanvas.html"> 9 <STYLE TYPE="text/css"><!-- 10 BODY { font-family: serif } 11 H1 { font-family: sans-serif } 12 H2 { font-family: sans-serif } 13 H3 { font-family: sans-serif } 14 H4 { font-family: sans-serif } 15 H5 { font-family: sans-serif } 16 H6 { font-family: sans-serif } 17 SUB { font-size: smaller } 18 SUP { font-size: smaller } 19 PRE { font-family: monospace } 20 A { text-decoration: none } 21 --></STYLE> 22 </HEAD> 23 <BODY> 24 <A HREF="toc.html">Contents</A> 25 <A HREF="101Introduction.html">Previous</A> 26 <A HREF="103Addinglinesandrectanglestoacanvas.html">Next</A> 27 <HR NOSHADE> 28 <H2><A NAME="10_2">10.2 Creating a simple canvas</A></H2> 29 <P> In order to create a canvas graph you need to include the file 30 "jpgraph_canvas.php" in addition to the standard "jpgraph.php" file. 31 You might also want to include the "jpgraph_canvtools.php" to get 32 access to some supporting classes that may (or not) come in handy.</P> 33 <P> Creating a canvas gives you the opportunity draw arbitrary shapes on 34 a "white" piece of paper. Let's first show a simple example were we 35 just draw a text box. We first show you the code which we will walk 36 through<DIV class="phpscript">(File: canvasex01.php) 37 <BR><CODE><FONT color="#000000"> <FONT color="#0000BB"><?php 38 <BR></FONT><FONT color="#FF8000"> 39 // $Id: canvasex01.php,v 1.3 2002/10/23 08:17:23 aditus Exp $ 40 <BR></FONT><FONT color="#007700">include </FONT><FONT color="#DD0000"> 41 "../jpgraph.php"</FONT><FONT color="#007700">; 42 <BR>include </FONT><FONT color="#DD0000">"../jpgraph_canvas.php"</FONT><FONT 43 color="#007700">; 44 <BR> 45 <BR></FONT><FONT color="#FF8000">// Setup a basic canvas we can work 46 <BR></FONT><FONT color="#0000BB">$g </FONT><FONT color="#007700">= new </FONT><FONT 47 color="#0000BB">CanvasGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 48 400</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">300</FONT><FONT 49 color="#007700">,</FONT><FONT color="#DD0000">'auto'</FONT><FONT color="#007700"> 50 ); 51 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 52 color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 53 5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">11</FONT><FONT 54 color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700"> 55 ,</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">); 56 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 57 color="#0000BB">SetShadow</FONT><FONT color="#007700">(); 58 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 59 color="#0000BB">SetMarginColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 60 "teal"</FONT><FONT color="#007700">); 61 <BR> 62 <BR></FONT><FONT color="#FF8000"> 63 // We need to stroke the plotarea and margin before we add the 64 <BR>// text since we otherwise would overwrite the text. 65 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 66 color="#0000BB">InitFrame</FONT><FONT color="#007700">(); 67 <BR> 68 <BR></FONT><FONT color="#FF8000">// Draw a text box in the middle 69 <BR></FONT><FONT color="#0000BB">$txt</FONT><FONT color="#007700">=</FONT><FONT 70 color="#DD0000">"This\nis\na TEXT!!!"</FONT><FONT color="#007700">; 71 <BR></FONT><FONT color="#0000BB">$t </FONT><FONT color="#007700">= new </FONT><FONT 72 color="#0000BB">Text</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 73 $txt</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT 74 color="#007700">,</FONT><FONT color="#0000BB">10</FONT><FONT color="#007700"> 75 ); 76 <BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-></FONT><FONT 77 color="#0000BB">SetFont</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 78 FF_ARIAL</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 79 FS_BOLD</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">40</FONT><FONT 80 color="#007700">); 81 <BR> 82 <BR></FONT><FONT color="#FF8000"> 83 // How should the text box interpret the coordinates? 84 <BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-></FONT><FONT 85 color="#0000BB">Align</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 86 'center'</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">'top'</FONT><FONT 87 color="#007700">); 88 <BR> 89 <BR></FONT><FONT color="#FF8000">// How should the paragraph be aligned? 90 <BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-></FONT><FONT 91 color="#0000BB">ParagraphAlign</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 92 'center'</FONT><FONT color="#007700">); 93 <BR> 94 <BR></FONT><FONT color="#FF8000"> 95 // Add a box around the text, white fill, black border and gray shadow 96 <BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-></FONT><FONT 97 color="#0000BB">SetBox</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 98 "white"</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000"> 99 "black"</FONT><FONT color="#007700">,</FONT><FONT color="#DD0000">"gray"</FONT><FONT 100 color="#007700">); 101 <BR> 102 <BR></FONT><FONT color="#FF8000">// Stroke the text 103 <BR></FONT><FONT color="#0000BB">$t</FONT><FONT color="#007700">-></FONT><FONT 104 color="#0000BB">Stroke</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 105 $g</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">img</FONT><FONT 106 color="#007700">); 107 <BR> 108 <BR></FONT><FONT color="#FF8000">// Stroke the graph 109 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 110 color="#0000BB">Stroke</FONT><FONT color="#007700">(); 111 <BR> 112 <BR></FONT><FONT color="#0000BB">?> 113 <BR></FONT> 114 <BR></FONT></CODE></DIV></P> 115 <P> The example above starts by creating a (400x200) sized image. We set 116 the margins to get a nice frame around the image. For canvases the 117 margins has no effect in the way you enter coordinates. Top left is 118 (0,0) and bottom right (including any potential margin and shadow) is 119 the maximum. In this case the coordinates are X:0-399, and Y:0-199</P> 120 <P> We then call the <A href="../ref/CanvasGraph.html#_CANVASGRAPH_INITFRAME"> 121 InitFrame()</A> method which actually strokes the margin and plotarea 122 to the graph. Since everything is stroked in the order you issue the 123 commands you must make sure that the graphical objects you want on top 124 is stroked last. This is different from the way you normally work with 125 JpGraph since it queues up all you addition and then makes sure they 126 are stroked in the correct order.</P> 127 <P> We then create a <A href="../ref/Text.html#_C_TEXT">Text</A> object, 128 setup it's properties, including the absolute screen position where we 129 want the text, and then stroke it. Her it might be a need for a closer 130 explanation of the, perhaps misnamed, method <A href="../ref/Text.html#_TEXT_ALIGN"> 131 Text::Align()</A> This method states<STRONG> how the text coordinates 132 should be interpreted</STRONG> , i.e when we specify (200,10) as the 133 coordinates for the text paragraph should that be interpreted as the 134 top left corner, bottom-left corner or something else (of the bounding 135 box)? In the code above we have chosen to interpret the X-coordinate as 136 being the center of the bounding box and the Y-coordinate as the top. 137 Hence the text will be aligned so that the (200,100) point in the graph 138 is aligned with the middle of the top line of the paragraphs bounding 139 box.</P> 140 <P> We also specify that the lines within the paragraph should be 141 centered with a call to <A href="../ref/Text.html#_TEXT_PARAGRAPHALIGN"> 142 Text::ParagraphAlign()</A> Since we also choose to have a box around 143 the text we have to make use of the method <A href="../ref/Text.html#_TEXT_SETBOX"> 144 Text::SetBox()</A> which is used to specify the fill color, the border 145 color and the shadow color (if you leave out shadow color or set it to 146 '', no shadow will be used).</P> 147 <P> Now we are ready to stroke the text onto the canvas. In order to do 148 so we must specify the basic Image drawing class we want to use. 149 Without discussing this further we just state that a suitable image 150 class can always be found as the<STRONG> img</STRONG> property of the 151 Graph class.</P> 152 <P> Finally we are ready to stroke the entire graph, which in effect 153 sends the canvas back to the browser. Below you can see the effect of 154 all this code</P> 155 <P><DIV class="example"> 156 <BR> <A href="exframes/frame_canvasex01.html" target="blank"><IMG border="0" 157 HEIGHT="300" src="img/img/img/img/img/img/canvasex01.png" WIDTH="400"></A> 158 <BR><B>Figure 188:</B> A simple canvas drawing with a text box in the 159 middle <A href="exframes/frame_canvasex01.html" target="blank">[src]</A> 160 161 <P></P> 162 </DIV></P> 163 <P></P> 164 <HR NOSHADE> 165 <A HREF="toc.html">Contents</A> 166 <A HREF="101Introduction.html">Previous</A> 167 <A HREF="103Addinglinesandrectanglestoacanvas.html">Next</A> 168 </BODY> 169 </HTML>
titre
Description
Corps
titre
Description
Corps
titre
Description
Corps
titre
Corps
| Généré le : Sat Nov 24 09:27:55 2007 | par Balluche grâce à PHPXref 0.7 |
|
|