epubjs

Version:

Render ePub documents in the browser, across many devices

92 lines (91 loc) • 10.1 kB

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>The Rendering Pipeline</title><link rel="stylesheet" href="core.css" type="text/css"/><meta name="generator" content="DocBook XSL Stylesheets V1.74.0"/></head><body><div class="sect1" title="The Rendering Pipeline"><div class="titlepage"><div><div><h1 class="title"><a id="learnjava3-CHP-20-SECT-2"/>The Rendering Pipeline</h1></div></div></div><a id="idx11094" class="indexterm"/>One of the strengths of the 2D API is that shapes, text, and images are manipulated in many of the same ways. In this section, we’ll describe what happens to shapes, text, and images after you give them to a <code class="literal">Graphics2D </code>object. Rendering is the process of taking some collection of shapes, text, and images and figuring out how to represent them by coloring pixels on a screen or printer. <code class="literal">Graphics2D</code> supports four rendering operations:<div class="itemizedlist"><ul class="itemizedlist"><li class="listitem">Draw a shape’s outline with the <code class="literal">draw()</code> method.</li><li class="listitem">Fill a shape’s interior with the <a id="I_indexterm20_id809499" class="indexterm"/><code class="literal">fill()</code> method.</li><li class="listitem">Draw some text with the <a id="I_indexterm20_id809513" class="indexterm"/><code class="literal">drawString()</code> method.</li><li class="listitem">Draw an image with any of the many forms of the <a id="I_indexterm20_id809527" class="indexterm"/><code class="literal">drawImage()</code> method.</li></ul></div>The graphics context represented by a <code class="literal">Graphics2D</code> object holds the following properties, whose values are controlled by corresponding accessor methods—for example, <code class="literal">getFont()</code> and <code class="literal">setFont()</code>:<div class="variablelist"><dl><dt>Paint</dt><dd>The current paint (an object of type <code class="literal">java.awt.Paint</code>) determines what color or pattern will be used to fill a shape. This affects the drawing of shape outlines and text as well. You can change the current paint using <code class="literal">Graphics2D</code>’s <a id="I_indexterm20_id809583" class="indexterm"/><code class="literal">setPaint()</code> method. Note that the <a id="I_indexterm20_id809594" class="indexterm"/><code class="literal">Color</code> class implements the <code class="literal">Paint</code> interface, so you can pass <code class="literal">Color</code>s to <code class="literal">setPaint()</code> if you want to use solid colors.</dd><dt>Stroke</dt><dd><code class="literal">Graphics2D</code> uses the stroke to determine how to draw the outline of shapes that are passed to its <a id="I_indexterm20_id809637" class="indexterm"/><code class="literal">draw()</code> method. In graphics terminology, to “stroke” a shape means to take a path defined by the shape and effectively trace it with a pen or brush of a certain size and characteristics. For example, drawing the shape of a circle using a stroke that acts like a solid line would yield a washer or ring shape. The <code class="literal">stroke</code> object in the <code class="literal">Graphics2D</code> API is a little more abstract than that. It accepts the input shape to be stroked and returns an enclosed shape representing the outline, which <code class="literal">Graphics2D</code> then fills. You can set the current stroke by using <a id="I_indexterm20_id809672" class="indexterm"/><code class="literal">setStroke()</code>. The 2D API comes with a handy class, <a id="I_indexterm20_id809683" class="indexterm"/><code class="literal">java.awt.BasicStroke</code>, that implements different line widths, end styles, join styles, and dashing.</dd><dt>Font</dt><dd>Text is rendered by creating a shape that represents the characters to be drawn. The current font determines the shapes that are created for a given set of characters. The resulting text shape is then filled. The current font is set using <a id="I_indexterm20_id809708" class="indexterm"/><code class="literal">setFont()</code>. The 2D API gives applications access to all the TrueType and PostScript Type 1 fonts that are installed. As of Java 7, OpenType/CFF fonts are also supported.</dd><dt>Transformation</dt><dd>Shapes, text, and images can be geometrically transformed before they are rendered. This means that they may be moved, rotated, and stretched. <code class="literal">Graphics2D</code>’s transformation converts coordinates from “user space” to “device space.” By default, <code class="literal">Graphics2D</code> uses a transformation that maps 72 units in user space to one inch on the output device. If you draw a line from point (0, 0) to point (72, 0) using the default transformation, it will be one inch long, regardless of whether it is drawn on your monitor or your printer. The current transformation can be modified using the <a id="I_indexterm20_id809747" class="indexterm"/><code class="literal">translate()</code>, <a id="I_indexterm20_id809758" class="indexterm"/><code class="literal">rotate()</code>, <a id="I_indexterm20_id809768" class="indexterm"/><code class="literal">scale()</code>, and <a id="I_indexterm20_id809779" class="indexterm"/><code class="literal">shear()</code> methods.</dd><dt>Compositing rule</dt><dd>A compositing rule determines how the colors of a new drawing operation are combined with existing colors on the <code class="literal">Graphics2D</code>’s drawing surface. This attribute is set using <a id="I_indexterm20_id809808" class="indexterm"/><code class="literal">setComposite()</code>, which accepts an instance of <a id="I_indexterm20_id809819" class="indexterm"/><code class="literal">java.awt.AlphaComposite</code>. Compositing allows you to make parts of a drawing or image completely or partially transparent, or to combine them in other interesting ways.</dd><dt>Clipping shape</dt><dd>All rendering operations are limited to the interior of the clipping shape. No pixels outside this shape are modified. By default, the clipping shape allows rendering on the entire drawing surface (usually, the rectangular area of a <code class="literal">Component</code>). However, you can further limit this using any simple or complex shape (for example, text shapes).</dd><dt>Rendering hints</dt><dd>There are different techniques that can be used to render graphics primitives. Usually these represent a tradeoff between rendering speed and visual quality or vice versa. Rendering hints (constants defined in the <code class="literal">RenderingHints</code> class) specify which techniques to use.</dd></dl></div>Graphics primitives (shapes, text, and images) pass through the rendering engine in a series of operations called the rendering pipeline. Let’s walk through the pipeline. It can be reduced to four steps; the first step depends on the rendering operation:<div class="orderedlist"><ol class="orderedlist"><li class="listitem">Transform the shape. For shapes that will be filled, the shape is simply transformed using the <code class="literal">Graphics2D</code>’s current transformation. For shapes whose outlines are drawn using <code class="literal">draw()</code>, the current stroke is used to stroke the shape’s outline. Then the stroked outline is transformed like any other filled shape. Text is displayed by mapping characters to shapes using the current font. The resulting text shapes are transformed like any other filled shape. Images are also transformed using the current transformation.</li><li class="listitem">Determine the colors to be used. For a filled shape, the current paint object determines the colors that should be used to fill the shape. For drawing an image, the colors are taken from the image itself.</li><li class="listitem">Combine the colors with the existing drawing surface using the current compositing rule.</li><li class="listitem">Clip the results using the current clipping shape.</li></ol></div>The rendering hints are used throughout to control the rendering quality.<a id="I_indexterm20_id809933" class="indexterm"/></div></body></html>