| 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="111Introduction.html">
|
|
|
8 |
<LINK REL="Next" HREF="113Addinglinesandrectanglestoacanvas.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="111Introduction.html">Previous</A>
|
|
|
26 |
<A HREF="113Addinglinesandrectanglestoacanvas.html">Next</A>
|
|
|
27 |
<HR NOSHADE>
|
|
|
28 |
<H2><A NAME="11_2">11.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/canvasex01.png" WIDTH="400"></A>
|
|
|
158 |
<BR><B>Figure 184:</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="111Introduction.html">Previous</A>
|
|
|
167 |
<A HREF="113Addinglinesandrectanglestoacanvas.html">Next</A>
|
|
|
168 |
</BODY>
|
|
|
169 |
</HTML>
|