96 lines
9.7 KiB
HTML
96 lines
9.7 KiB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using background gradients</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch14.html" title="Chapter 14. Common features for all Cartesian (x,y) graph types"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Using background gradients</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 14. Common features for all Cartesian (x,y) graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Using background gradients"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2552733"></a>Using background gradients</h2></div></div></div>
|
||
|
||
<p>A color gradient background will change the color from a start color to a finish
|
||
color in even steps (the number of steps depends on the size of the graph). The
|
||
direction of the gradient is controlled by specifying a style parameter for the
|
||
gradient. The signature for the gradient background method is</p>
|
||
<p>
|
||
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
|
||
<p><code class="code">Graph::SetBackgroundGradient($aFrom='navy',$aTo='silver',$aGradType=2,$aStyle=BGRAD_FRAME)</code></p>
|
||
</li></ol></div><p>
|
||
</p>
|
||
<p>The last style par mater specified where in the graph the gradient style should be
|
||
applied and the different options are</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">BGRAD_FRAME</code>, The entire graph frame will be filled
|
||
</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">BGRAD_MARGIN</code>, Only the margin area (the graph area
|
||
outside the plot area) will be filled</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">GRAD_PLOT</code>, Only the plot area will be filled</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>This is illustrated in <a class="xref" href="ch14s16.html#fig.different-gradient-fill-types" title="Figure 14.93. What area of the graph the gradient should affect">Figure 14.93. What area of the graph the gradient should affect</a></p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.different-gradient-fill-types"></a><p class="title"><b>Figure 14.93. What area of the graph the gradient should affect</b></p><div class="figure-contents">
|
||
|
||
<div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/grad_bgrad_frame.png" alt="What area of the graph the gradient should affect"></span></p>
|
||
<p><code class="code">BGRAD_FRAME</code></p>
|
||
</td><td align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/grad_bgrad_margin.png" alt="What area of the graph the gradient should affect"></span></p>
|
||
<p><code class="code">BGRAD_MARGIN</code></p>
|
||
</td><td align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/grad_bgrad_plot.png" alt="What area of the graph the gradient should affect"></span></p>
|
||
<p><code class="code">BGRAD_PLOT</code></p>
|
||
</td></tr></tbody></table>
|
||
</div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>The different types of gradient fills are shown in <a class="xref" href="ch14s16.html#fig.different-gradient-types" title="Figure 14.94. Different types of gradient fills">Figure 14.94. Different types of gradient fills</a> where the gradient from color is
|
||
"<code class="code">white</code>" and the to color is "<code class="code">orange</code>"</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.different-gradient-types"></a><p class="title"><b>Figure 14.94. Different types of gradient fills</b></p><div class="figure-contents">
|
||
|
||
<div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"><col class="c2"></colgroup><tbody><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_vert.png" alt="Different types of gradient fills"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_hor.png" alt="Different types of gradient fills"></span></p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_midhor.png" alt="Different types of gradient fills"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_midver.png" alt="Different types of gradient fills"></span></p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_wide_midhor.png" alt="Different types of gradient fills"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_wide_midver.png" alt="Different types of gradient fills"></span></p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_left_reflection.png" alt="Different types of gradient fills"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_right_reflection.png" alt="Different types of gradient fills"></span></p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_center.png" alt="Different types of gradient fills"></span></p>
|
||
</td><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_raised_panel.png" alt="Different types of gradient fills"></span></p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/grad_diagonal.png" alt="Different types of gradient fills"></span></p>
|
||
</td><td> </td></tr></tbody></table>
|
||
</div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<div class="sect2" title="Generating gradient background off-line"><div class="titlepage"><div><div><h3 class="title"><a name="id2553714"></a>Generating gradient background off-line</h3></div></div></div>
|
||
|
||
<p>A drawback of using gradient backgrounds is that they are processing intensive
|
||
and since they are generated each time the graph is generated it can take
|
||
substantive amount of time for large graphs. To help with this the library
|
||
offers a small (very simple) utility that can be tun to create gradient images
|
||
off line. These images can later on be used as (static) background images. In
|
||
the distribution there is a small utility in the
|
||
"<code class="filename">Examples/</code>" directory called
|
||
"<code class="filename">mkgrad.php</code>". Pointing the browser to this script will
|
||
show a basic form as shown in <a class="xref" href="ch14s16.html#fig.mkgrad" title='Figure 14.95. The "mkgrad" utiliy to create gradient images'>Figure 14.95. The "mkgrad" utiliy to create gradient images</a>. The script will
|
||
allow the creation of a gradient images using any of the predefined colors and
|
||
gradient types.</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.mkgrad"></a><p class="title"><b>Figure 14.95. The "mkgrad" utiliy to create gradient images</b></p><div class="figure-contents">
|
||
|
||
<div class="mediaobject"><img src="images/mkgrad.png" alt='The "mkgrad" utiliy to create gradient images'></div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
</div>
|
||
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch14.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
|