89 lines
9.2 KiB
HTML
89 lines
9.2 KiB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Adding shearing image transformation to the graph</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">Adding shearing image transformation to the graph</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="Adding shearing image transformation to the graph"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2550758"></a>Adding shearing image transformation to the graph</h2></div></div></div>
|
||
|
||
<p>As a final "touch" on the image it is possible to apply a shearing transformation
|
||
to the generated image. This can be used to give the image a "3D" perspective. The
|
||
transformation is done by the method <code class="code">Graph::Set3DPerspective()</code> It
|
||
should be noted that since these transformations are all done in PHP they are (as
|
||
all image processing) quite processor intensive.</p>
|
||
<p>In order to get access to the transformation functionality the module
|
||
"<code class="filename">jpgraph_imgtrans.php</code>" must first be included in the
|
||
script. </p>
|
||
<p>In <a class="xref" href="ch14s11.html#fig.shearing-types" title="Figure 14.72. Different types of shearing transformation">Figure 14.72. Different types of shearing transformation</a> the original image is shown in the
|
||
middle and the four types of shearing is shown around in positions indicating the
|
||
type of shearing. The symbolic name for the type of shearing is shown below each
|
||
image.</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.shearing-types"></a><p class="title"><b>Figure 14.72. Different types of shearing transformation</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 colspan="3" align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/shear0.png" alt="Different types of shearing transformation"></span></p>
|
||
<p><code class="code">SKEW3D_UP</code></p>
|
||
</td></tr><tr><td align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/shear2.png" alt="Different types of shearing transformation"></span></p>
|
||
<p><code class="code">SKEW3D_LEFT</code></p>
|
||
</td><td align="center" valign="middle">
|
||
<p><span class="inlinemediaobject"><img src="images/shear-original.png" alt="Different types of shearing transformation"></span></p>
|
||
<p>[Original graph]</p>
|
||
</td><td align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/shear3.png" alt="Different types of shearing transformation"></span></p>
|
||
<p><code class="code">SKEW3D_RIGHT</code></p>
|
||
</td></tr><tr><td colspan="3" align="center">
|
||
<p><span class="inlinemediaobject"><img src="images/shear1.png" alt="Different types of shearing transformation"></span></p>
|
||
<p><code class="code">SKEW3D_DOWN</code></p>
|
||
</td></tr></tbody></table>
|
||
</div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>The transformation is specified with the method</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Graph::Set3DPerspective($aDir,$aAlpha=100,$aShear=120,$aQuality=false,$aFillColor='#FFFFFF',$aBorder=false,$aMinSize=true,$aHorizonPos=0.5)</code></p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.shearing-parameters"></a><p class="title"><b>Figure 14.73. Explaining the shearing parameters</b></p><div class="figure-contents">
|
||
|
||
<div class="mediaobject"><img src="images/shearing-params.png" alt="Explaining the shearing parameters"></div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>The different parameters that effect the transformation can now be explained with
|
||
the help of <a class="xref" href="ch14s11.html#fig.shearing-parameters" title="Figure 14.73. Explaining the shearing parameters">Figure 14.73. Explaining the shearing parameters</a>
|
||
</p>
|
||
<p>
|
||
</p><div class="variablelist"><dl><dt><span class="term"><span class="bold"><strong><code class="code">$aDir</code></strong></span></span></dt><dd>
|
||
<p>This is the symbolic constant to define which of the four basic
|
||
types of transformation as shown in <a class="xref" href="ch14s11.html#fig.shearing-types" title="Figure 14.72. Different types of shearing transformation">Figure 14.72. Different types of shearing transformation</a>
|
||
</p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aAlpha</code></strong></span></span></dt><dd>
|
||
<p>This defines the distance from the bottom of the image to the
|
||
artificial horizon </p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aShear</code></strong></span></span></dt><dd>
|
||
<p>This defines from the perspective vanish point on the artificial
|
||
horizon to the crossing of the "shearing line" on the artificial
|
||
horizon..</p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aHorizPos</code></strong></span></span></dt><dd>
|
||
<p>This specifies the distance from the left edge of the image to the
|
||
perspective vanish point</p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aQuality</code></strong></span></span></dt><dd>
|
||
<p>With this parameter set to <span class="bold"><strong>true</strong></span>
|
||
the algorithm will do additional image interpolation to increase the
|
||
quality of the resulting transformation on the expense of further
|
||
processing time.</p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aFillColor</code></strong></span></span></dt><dd>
|
||
<p>Specifies the background fill color to be used. A value of false
|
||
(the default) indicates no fill</p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aBorder</code></strong></span></span></dt><dd>
|
||
<p>Add a border around the transformed image</p>
|
||
</dd><dt><span class="term"><span class="bold"><strong><code class="code">$aMinSize</code></strong></span></span></dt><dd>
|
||
<p>The transformed image is usually smaller than the original image
|
||
and if this parameter is set to true then the resulting image will
|
||
be as small as it can be. If it is false then the original image
|
||
size will be kept.</p>
|
||
</dd></dl></div><p>
|
||
</p>
|
||
<p>This might be regarded as "gimmick" factor but has proven useful in batch
|
||
(off-line) processing to produce a sequence of images that gives the appearance of a
|
||
graph that rotates into place. </p>
|
||
</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>
|