| [ 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="113Addinglinesandrectanglestoacanvas.html"> 8 <LINK REL="Next" HREF="115SampleapplicationDrawingDBschema.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="113Addinglinesandrectanglestoacanvas.html">Previous</A> 26 <A HREF="115SampleapplicationDrawingDBschema.html">Next</A> 27 <HR NOSHADE> 28 <H2><A NAME="11_4">11.4 Using a canvas scale</A></H2> 29 <P> The previous method using absolute coordinates works. But nothing 30 more. It doesn't give you any chance to easily scale the image (unless 31 you manually recalculate all used coordinates) , it gets tedious to 32 work with pixel level resolution. Especially if you just like to draw a 33 few basic shapes.</P> 34 <P> To help with this you can use a scale for the canvas. This lets you 35 define a "work-space" of your choice. You can for example set the 36 coordinates to be between X:0-10, Y:0-10. This makes it easier to 37 position objects on the canvas. This also has two additional 38 advantages:</P> 39 <UL> 40 <LI> If you increase the size of the canvas all objects will be 41 automatically scale to keep their proportions without any changes.</LI> 42 <LI> You can shrink/enlarge your drawing (not the image) by just using 43 another scale. For example if you originally draw the image using a 44 (0:10, 0:10) scale and then change the scale to (0:20, 0:20) then the 45 effect will be that you drawings will "shrink" to half their size.</LI> 46 </UL> 47 <P></P> 48 <P> To use this type of scaling you must make sure you include the file 49 "jpgraph_canvtools.php" . In addition to the scaling class their are 50 also a couple of other utility classes that may come in handy, 51 especially the <A href="../ref/Shape.html#_C_SHAPE"> Shape</A> class.</P> 52 <P> Using the scale is quite simple. You first instantiate a scale 53 object passing the graph as a parameter and then specify the scale you 54 want to use. This means you need to add the lines<DIV class="phpscript"> 55 <CODE><FONT color="#000000"> <FONT color="#0000BB"> $scale </FONT><FONT color="#007700"> 56 = new </FONT><FONT color="#0000BB">CanvasScale</FONT><FONT color="#007700"> 57 (</FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">); 58 <BR></FONT><FONT color="#0000BB">$scale</FONT><FONT color="#007700">-></FONT><FONT 59 color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 60 0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$xmax</FONT><FONT 61 color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700"> 62 ,</FONT><FONT color="#0000BB">$ymax</FONT><FONT color="#007700">);</FONT><FONT 63 color="#0000BB"></FONT></FONT></CODE></DIV></P> 64 <P></P> 65 <P> to your code. You can then use one of the translation methods (for 66 example <A href="../ref/CanvasScale.html#_CANVASSCALE_TRANSLATE"> 67 CanvasScale::Translate()</A>) in the canvas scale class to translate 68 between your world coordinates and the absolute screen coordinates. 69 This means you could take the code in the example above and just add 70 the lines, for example,<DIV class="phpscript"><CODE><FONT color="#000000"> 71 <FONT color="#0000BB"> </FONT><FONT color="#007700">list(</FONT><FONT color="#0000BB"> 72 $x1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$y1</FONT><FONT 73 color="#007700">) = </FONT><FONT color="#0000BB">$this</FONT><FONT color="#007700"> 74 -></FONT><FONT color="#0000BB">scale</FONT><FONT color="#007700">-></FONT><FONT 75 color="#0000BB">Translate</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 76 $x1</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$y1</FONT><FONT 77 color="#007700">); 78 <BR>list(</FONT><FONT color="#0000BB">$x2</FONT><FONT color="#007700">,</FONT><FONT 79 color="#0000BB">$y2</FONT><FONT color="#007700">) = </FONT><FONT color="#0000BB"> 80 $this</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">scale</FONT><FONT 81 color="#007700">-></FONT><FONT color="#0000BB">Translate</FONT><FONT color="#007700"> 82 (</FONT><FONT color="#0000BB">$x2</FONT><FONT color="#007700">,</FONT><FONT 83 color="#0000BB">$y2</FONT><FONT color="#007700">); 84 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 85 color="#0000BB">img</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB"> 86 Line</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">$x1</FONT><FONT 87 color="#007700">,</FONT><FONT color="#0000BB">$y1</FONT><FONT color="#007700"> 88 ,</FONT><FONT color="#0000BB">$x2</FONT><FONT color="#007700">,</FONT><FONT 89 color="#0000BB">$y2</FONT><FONT color="#007700">);</FONT><FONT color="#0000BB"> 90 </FONT></FONT></CODE></DIV></P> 91 <P> Since this pattern has to be repeated for every object that has to 92 be drawn it makes good sense to encapsulate this in a separate class. 93 This is exactly why the canvas tools file also have a utility class 94 called <A href="../ref/Shape.html#_C_SHAPE"> Shape</A> This class is 95 mainly a wrapper around the most commonly used methods in the basic 96 Image class (with one important exception) and does all these the 97 translation for you. Please see the class reference for a complete list 98 of the available methods To set up the Shape class you instantiate it 99 with the graphic context and the scale you want to use as argument as 100 in</P> 101 <P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB"> 102 $shape </FONT><FONT color="#007700">= new </FONT><FONT color="#0000BB"> 103 Shape</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">$g</FONT><FONT 104 color="#007700">,</FONT><FONT color="#0000BB">$scale</FONT><FONT color="#007700"> 105 );</FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P> 106 <P></P> 107 <P> You are then ready to use all the methods in the shape class. Using 108 a scale and imitating the previous example we would get the source 109 shown below.<DIV class="phpscript">(File: canvasex03.php) 110 <BR><CODE><FONT color="#000000"> <FONT color="#0000BB"><?php 111 <BR></FONT><FONT color="#FF8000"> 112 // $Id: canvasex03.php,v 1.1 2002/08/27 20:08:57 aditus Exp $ 113 <BR></FONT><FONT color="#007700">include </FONT><FONT color="#DD0000"> 114 "../jpgraph.php"</FONT><FONT color="#007700">; 115 <BR>include </FONT><FONT color="#DD0000">"../jpgraph_canvas.php"</FONT><FONT 116 color="#007700">; 117 <BR>include </FONT><FONT color="#DD0000">"../jpgraph_canvtools.php"</FONT><FONT 118 color="#007700">; 119 <BR> 120 <BR></FONT><FONT color="#FF8000">// Define work space 121 <BR></FONT><FONT color="#0000BB">$xmax</FONT><FONT color="#007700">=</FONT><FONT 122 color="#0000BB">20</FONT><FONT color="#007700">; 123 <BR></FONT><FONT color="#0000BB">$ymax</FONT><FONT color="#007700">=</FONT><FONT 124 color="#0000BB">20</FONT><FONT color="#007700">; 125 <BR> 126 <BR></FONT><FONT color="#FF8000">// Setup a basic canvas we can work 127 <BR></FONT><FONT color="#0000BB">$g </FONT><FONT color="#007700">= new </FONT><FONT 128 color="#0000BB">CanvasGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 129 400</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">200</FONT><FONT 130 color="#007700">,</FONT><FONT color="#DD0000">'auto'</FONT><FONT color="#007700"> 131 ); 132 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 133 color="#0000BB">SetMargin</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 134 5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">11</FONT><FONT 135 color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700"> 136 ,</FONT><FONT color="#0000BB">11</FONT><FONT color="#007700">); 137 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 138 color="#0000BB">SetShadow</FONT><FONT color="#007700">(); 139 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 140 color="#0000BB">SetMarginColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 141 "teal"</FONT><FONT color="#007700">); 142 <BR> 143 <BR></FONT><FONT color="#FF8000"> 144 // We need to stroke the plotarea and margin before we add the 145 <BR>// text since we otherwise would overwrite the text. 146 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 147 color="#0000BB">InitFrame</FONT><FONT color="#007700">(); 148 <BR> 149 <BR></FONT><FONT color="#FF8000">// Create a new scale 150 <BR></FONT><FONT color="#0000BB">$scale </FONT><FONT color="#007700"> 151 = new </FONT><FONT color="#0000BB">CanvasScale</FONT><FONT color="#007700"> 152 (</FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">); 153 <BR></FONT><FONT color="#0000BB">$scale</FONT><FONT color="#007700">-></FONT><FONT 154 color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 155 0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">$xmax</FONT><FONT 156 color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT color="#007700"> 157 ,</FONT><FONT color="#0000BB">$ymax</FONT><FONT color="#007700">); 158 <BR> 159 <BR></FONT><FONT color="#FF8000"> 160 // The shape class is wrapper around the Imgae class which translates 161 <BR>// the coordinates for us 162 <BR></FONT><FONT color="#0000BB">$shape </FONT><FONT color="#007700"> 163 = new </FONT><FONT color="#0000BB">Shape</FONT><FONT color="#007700">(</FONT><FONT 164 color="#0000BB">$g</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 165 $scale</FONT><FONT color="#007700">); 166 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 167 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 168 'black'</FONT><FONT color="#007700">); 169 <BR> 170 <BR> 171 <BR></FONT><FONT color="#FF8000">// Add a black line 172 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 173 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 174 'black'</FONT><FONT color="#007700">); 175 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 176 color="#0000BB">Line</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 177 0</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">0</FONT><FONT 178 color="#007700">,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700"> 179 ,</FONT><FONT color="#0000BB">20</FONT><FONT color="#007700">); 180 <BR> 181 <BR></FONT><FONT color="#FF8000">// .. and a circle (x,y,diameter) 182 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 183 color="#0000BB">Circle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 184 5</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">14</FONT><FONT 185 color="#007700">,</FONT><FONT color="#0000BB">2</FONT><FONT color="#007700"> 186 ); 187 <BR> 188 <BR></FONT><FONT color="#FF8000"> 189 // .. and a filled circle (x,y,diameter) 190 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 191 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 192 'red'</FONT><FONT color="#007700">); 193 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 194 color="#0000BB">FilledCircle</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB"> 195 11</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">8</FONT><FONT 196 color="#007700">,</FONT><FONT color="#0000BB">3</FONT><FONT color="#007700"> 197 ); 198 <BR> 199 <BR></FONT><FONT color="#FF8000">// .. add a rectangle 200 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 201 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 202 'green'</FONT><FONT color="#007700">); 203 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 204 color="#0000BB">FilledRectangle</FONT><FONT color="#007700">(</FONT><FONT 205 color="#0000BB">15</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 206 8</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">19</FONT><FONT 207 color="#007700">,</FONT><FONT color="#0000BB">14</FONT><FONT color="#007700"> 208 ); 209 <BR> 210 <BR></FONT><FONT color="#FF8000">// .. add a filled rounded rectangle 211 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 212 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 213 'green'</FONT><FONT color="#007700">); 214 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 215 color="#0000BB">FilledRoundedRectangle</FONT><FONT color="#007700">(</FONT><FONT 216 color="#0000BB">2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 217 3</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">8</FONT><FONT 218 color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700"> 219 ); 220 <BR></FONT><FONT color="#FF8000">// .. with a darker border 221 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 222 color="#0000BB">SetColor</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000"> 223 'darkgreen'</FONT><FONT color="#007700">); 224 <BR></FONT><FONT color="#0000BB">$shape</FONT><FONT color="#007700">-></FONT><FONT 225 color="#0000BB">RoundedRectangle</FONT><FONT color="#007700">(</FONT><FONT 226 color="#0000BB">2</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB"> 227 3</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">8</FONT><FONT 228 color="#007700">,</FONT><FONT color="#0000BB">6</FONT><FONT color="#007700"> 229 ); 230 <BR> 231 <BR> 232 <BR></FONT><FONT color="#FF8000">// Stroke the graph 233 <BR></FONT><FONT color="#0000BB">$g</FONT><FONT color="#007700">-></FONT><FONT 234 color="#0000BB">Stroke</FONT><FONT color="#007700">(); 235 <BR> 236 <BR></FONT><FONT color="#0000BB">?> 237 <BR></FONT> 238 <BR></FONT></CODE></DIV> The source above gives the following result<DIV class="example"> 239 <BR> <A href="exframes/frame_canvasex03.html" target="blank"><IMG border="0" 240 HEIGHT="200" src="img/canvasex03.png" WIDTH="400"></A> 241 <BR><B>Figure 186:</B> Drawing shapes on a canvas using a scale. <A href="exframes/frame_canvasex03.html" 242 target="blank">[src]</A> 243 <P></P> 244 </DIV></P> 245 <P> If we like to make a smaller image we could just change the image 246 size and everything will be rescaled without any further code changes. 247 SO for example making the image half the size would give the result<DIV class="example"> 248 <BR> <A href="exframes/frame_canvasex04.html" target="blank"><IMG border="0" 249 HEIGHT="100" src="img/canvasex04.png" WIDTH="200"></A> 250 <BR><B>Figure 187:</B> Shrinking the image to half the size is easy 251 since the scaling will maintain the relative position of the objects <A href="exframes/frame_canvasex04.html" 252 target="blank">[src]</A> 253 <P></P> 254 </DIV></P> 255 <P> If we instead wanted to keep the image size but shrink the shapes we 256 could just make the scale twice as large which would result in<DIV class="example"> 257 <BR> <A href="exframes/frame_canvasex05.html" target="blank"><IMG border="0" 258 HEIGHT="200" src="img/canvasex05.png" WIDTH="400"></A> 259 <BR><B>Figure 188:</B> Shrinking hte graphic object by making the scale 260 twice as large <A href="exframes/frame_canvasex05.html" target="blank"> 261 [src]</A> 262 <P></P> 263 </DIV></P> 264 <P></P> 265 <P> We previously mentioned that the Shape class was a wrapper around 266 the image class with one exception. So what is the exception? Well, 267 glad you asked. The exception is that it contain an additional method 268 which draws an "indented rectangle". An indented rectangle is a 269 rectangle where one of it's four corners have been moved into the 270 rectangle. You create an indented rectangle by calling either <A href="../ref/Shape.html#_SHAPE_INDENTEDRECTANGLE"> 271 Shape::IndentedRectangle()</A> or A few examples illustrates what this 272 shape looks like.<DIV class="example"> 273 <BR> <A href="exframes/frame_canvasex06.html" target="blank"><IMG border="0" 274 HEIGHT="200" src="img/canvasex06.png" WIDTH="400"></A> 275 <BR><B>Figure 189:</B> Examples of filled indented rectangles <A href="exframes/frame_canvasex06.html" 276 target="blank">[src]</A> 277 <P></P> 278 </DIV></P> 279 <P></P> 280 <P> As a final note we mention the class <A href="../ref/CanvasRectangleText.html#_C_CANVASRECTANGLETEXT"> 281 CanvasRectangleText</A> Which can be used to add a text with a rounded 282 rectangle (possibly filled) onto the canvas. The previous example where 283 all the available fonts were drawn were using this class. We don't 284 describe it further but refer the interested reader to the class 285 reference and the 'listfontsex1.php' example file.</P> 286 <HR NOSHADE> 287 <A HREF="toc.html">Contents</A> 288 <A HREF="113Addinglinesandrectanglestoacanvas.html">Previous</A> 289 <A HREF="115SampleapplicationDrawingDBschema.html">Next</A> 290 </BODY> 291 </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 |
|
|