| 1 |
lars |
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>
|