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