104 lines
10 KiB
HTML
104 lines
10 KiB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Fine tuning the color</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="ch07.html" title="Chapter 7. Color handling"></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">Fine tuning the color</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 7. Color handling</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Fine tuning the color"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2496338"></a>Fine tuning the color</h2></div></div></div>
|
||
|
||
<div class="sect2" title="Specifying the alpha channel (color transparency)"><div class="titlepage"><div><div><h3 class="title"><a name="sec2.alpha-channel"></a>Specifying the alpha channel (color transparency)</h3></div></div></div>
|
||
|
||
<p>Colors can also be made semi-transparent by specifying a transparency value
|
||
(or as it is also known an <span class="italic">alpha channel value</span>). This will instruct the
|
||
library to mix the foreground color with a certain amount of the background
|
||
colors creating a "shine-through" effect.</p>
|
||
<p>The alpha channel is specified as a real number in the range [0.0, 1.0] where
|
||
0.0 means no transparency and 1.0 means full transparency (i.e. only the
|
||
background color is shown). The transparency is added as a postfix to the color
|
||
specification separated by a '@' (at) character. It is often most used with area
|
||
fills (i.e. when using <code class="code">SetFillColor()</code>)</p>
|
||
<p>For example the following are valid alpha channel modifiers</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">SetFillColor('red@0.2')</code>, A slightly transparent red
|
||
color</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">SetFillColor('red@0.8')</code>, An almost completely
|
||
transparent color</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>The result of using different alpha modifiers are shown in <a class="xref" href="ch07s04.html#fig.alpha-channel" title="Figure 7.1. Using alpha channel modifiers">Figure 7.1. Using alpha channel modifiers</a> where the blue color is made more and more
|
||
transparent to allow the red bar in the background to become more and more
|
||
visible.</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.alpha-channel"></a><p class="title"><b>Figure 7.1. Using alpha channel modifiers</b></p><div class="figure-contents">
|
||
|
||
<div class="mediaobject"><img src="images/alpha-channel.png" alt="Using alpha channel modifiers"></div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>As a final example of how to use transparency we show a graph in <a class="xref" href="ch07s04.html#fig.barlinealphaex1" title="Figure 7.2. Making use of transparency to combine two plots (barlinealphaex1.php)">Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </a> that uses transparency to allow an area
|
||
plot to be mixed with a bar graph.</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.barlinealphaex1"></a><p class="title"><b>Figure 7.2. Making use of transparency to combine two plots <code class="uri"><a class="uri" href="example_src/barlinealphaex1.html" target="_top">(<code class="filename">barlinealphaex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/barlinealphaex1.png" alt="Making use of transparency to combine two plots (barlinealphaex1.php)"></span> </div></div><p><br class="figure-break">
|
||
</p>
|
||
<div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
|
||
<p>For all graph examples shown in this manual you can always click on the
|
||
file name in the title of the graph to view the actual source that created
|
||
the graph.</p>
|
||
</div>
|
||
</div>
|
||
<div class="sect2" title="Adjusting the brightness"><div class="titlepage"><div><div><h3 class="title"><a name="id2496356"></a>Adjusting the brightness</h3></div></div></div>
|
||
|
||
<p>Since all colors that can be displayed on a computer can be modeled with the
|
||
appropriate RGB triple the above ways will allow you to specify any colors you
|
||
might need. However, conceptually it might be easier to think of colors in terms
|
||
of "a light blue" instead of a modified RGB triple so the library allows you to
|
||
take a basic color and apply a brightness correction factor.</p>
|
||
<p>The brightness factor is a postfix to the color string separated from the core
|
||
color with a ':' (colon) character. The brightness factor is a real number in
|
||
the range of [0.0, 2.0]. Using a brightness factor of 0.0 means that the color
|
||
will be black (no brightness at all) and a factor of 2.0 means that the color is
|
||
white (maximum brightness). Using a factor of 1 will leave the original color
|
||
untouched.</p>
|
||
<p>The brightness factor can be specified for named and HTML colors, see <a class="xref" href="ch07s04.html#fig.orange-scale" title="Figure 7.3. Adjusting brightness of named color specifier">Figure 7.3. Adjusting brightness of named color specifier</a> and <a class="xref" href="ch07s04.html#fig.blueish-scale" title="Figure 7.4. Adjusting brightness of a HTML color specifier">Figure 7.4. Adjusting brightness of a HTML color specifier</a> for more examples how the factor adjusts
|
||
the color.</p>
|
||
<p>For example, the following code snippets show valid color brightness
|
||
modifiers</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">SetColor('red:0.8');</code>, A slightly darker red
|
||
color</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">SetColor('red:1.5');</code>, A brighter red color</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">SetColor('#3485a9:1.8);</code>, A bright blue-greenish
|
||
color</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<div class="figure"><a name="fig.orange-scale"></a><p class="title"><b>Figure 7.3. Adjusting brightness of named color specifier</b></p><div class="figure-contents">
|
||
|
||
<div class="mediaobject"><img src="images/orange-scale.png" alt="Adjusting brightness of named color specifier"></div>
|
||
</div></div><br class="figure-break">
|
||
<div class="figure"><a name="fig.blueish-scale"></a><p class="title"><b>Figure 7.4. Adjusting brightness of a HTML color specifier</b></p><div class="figure-contents">
|
||
|
||
<div class="mediaobject"><img src="images/blueish-scale.png" alt="Adjusting brightness of a HTML color specifier"></div>
|
||
</div></div><br class="figure-break">
|
||
<div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
||
<p>The brightness factor is a purely linear factor but due to the human eyes
|
||
non-linear sensitivity for colors the perceived difference between (for
|
||
example) "<code class="code">red:1.1</code>" and "<code class="code">red:1.2</code>" than between
|
||
"<code class="code">red:0.2</code>" and "<code class="code">red:0.3</code>" even though the
|
||
relative difference is the same.</p>
|
||
</div>
|
||
</div>
|
||
<div class="sect2" title="Combining brightness and transparency adjustment"><div class="titlepage"><div><div><h3 class="title"><a name="id2496665"></a>Combining brightness and transparency adjustment</h3></div></div></div>
|
||
|
||
<p>It is also possible to combine the two previous discussed modifiers. This is
|
||
done by first adding the transparency specifier and then the brightness
|
||
adjustment as the following examples demonstrates.</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">SetColor('red@0.7:1.2')</code>, A highly transparent
|
||
slightly bright red color</p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">SetFillColor('#4545aa@0.3:1.5')</code>, A bright blueish
|
||
semi transparent color</p>
|
||
</li></ul></div><p>
|
||
</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="ch07.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>
|