| <html> |
| |
| <head> |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> |
| <title>Polygon and polyline</title> |
| <link href="../book.css" rel="Stylesheet" type="text/css"> |
| <link href="../code.css" rel="Stylesheet" type="text/css"> |
| </head> |
| |
| <body> |
| |
| <h1>Polygon and Polyline</h1> |
| <p>One of the most flexible graphics algorithms are polygon and polyline. Both are |
| defined by a list of points, through which the a line is drawn. The differences |
| between polygon and polyline are:</p> |
| <ul> |
| <li>A polygon is always closed, meaning that there is a line from the last point |
| of the first point. A polyline can be open.</li> |
| <li>A polygon is filled by default, but can also be not filled. A polyline can |
| never be filled.</li> |
| </ul> |
| <p>Use one of the methods in |
| <a href="../../../javadoc/org/eclipse/graphiti/services/IGaService.html">IGaService</a> |
| to create a polygon or polyline.</p> |
| <p>Please avoid using polygon and polyline if you can use simple shapes like rectangle |
| or rounded-rectangle. The reason is that simple shapes can be optimized regarding |
| memory consumption and performance.</p> |
| <p>You can see an example implementation of creating a triangle polygon here:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code"><span class="comment">// triangle through points: top-middle, |
| bottom-right, bottom-left</span><br><span class="keyword">int</span> xy[] |
| = new int[] { 50, 0, 100, 100, 0, 100 };<br>IGaService gaService = Graphiti.getGaService();<br> |
| Polygon p = gaService.createPolygon(container, xy);<br></p> |
| </div> |
| </div> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <p>The result will look like this:</p> |
| <p> </p> |
| <p><img alt="" border="0" height="126" src="visio/polygon.gif" width="126"></p> |
| <p><strong>Figure: Example screenshot of a triangle polygon</strong></p> |
| <h2>Rounded Edges</h2> |
| <p>The edges of a polygon and polyline can be rounded. For each edge a different |
| rounding can be defined.</p> |
| <p>Let us first have a look at the result, before going into the details. You can |
| see an example implementation of creating a partly rounded triangle polygon here:</p> |
| <!-- Begin code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <div class="literallayout"> |
| <div class="incode"> |
| <p class="code"><span class="comment">// triangle through points: top-middle, |
| bottom-right, bottom-left</span><br>i<span class="keyword">nt</span> xy[] |
| = <span class="keyword">new int</span>[] { 50, 0, 100, 100, 0, 100 };<br> |
| int beforeAfter[] = new int[] { 0, 0, 40, 20, 20, 40 };<br>IGaService gaService |
| = Graphiti.getGaService();<br>Polygon p = gaService.createPolygon(container, |
| xy, beforeAfter); </p> |
| </div> |
| </div> |
| <p> </p> |
| <!-- End code ------------------------------------------------------------------------------- --> |
| <p> </p> |
| <p><img alt="" border="0" height="126" src="visio/polygon-rounded.gif" width="127"></p> |
| <p><strong>Figure: Example screenshot of a partly rounded triangle polygon</strong></p> |
| <p> </p> |
| <p>The idea for defining the rounding is, that for each point you define the distance |
| on the line before the point where the rounding begins and the distance on the line |
| after the point where the rounding ends. In our example we defined, that 40 pixels |
| before the bottom-right point the rounding starts and 20 pixels after the bottom-right |
| point the rounding ends. You can see this best by comparing the results you get |
| with and without rounding:</p> |
| <p> </p> |
| <p><img alt="" border="0" height="264" src="visio/polygon-rounded-explained.gif" width="278"></p> |
| <p><strong>Figure: Explanation of the rounding parameters for polygon and polyline</strong></p> |
| <p>When you use rounded polygons or polylines you have to keep the following issues |
| in mind:</p> |
| <ul> |
| <li>The attributes before/after are actually part of the class |
| <a href="../../../javadoc/org/eclipse/graphiti/mm/algorithms/styles/Point.html"> |
| Point</a> and not of polygon or polyline. However, if a |
| <a href="../../../javadoc/org/eclipse/graphiti/mm/algorithms/styles/Point.html"> |
| Point</a> is used outside polygon or polyline those attributes are ignored.</li> |
| <li>The rounding can only be specified for shapes (polygon or polyline). For |
| connections the rounding can not be specified, because connections are always |
| rounded using standard values.</li> |
| </ul> |
| |
| </body> |
| |
| </html> |