|
TinyLine 2D Programming Guide
|
|
7 Colors7.1 IntroductionIn TinyLine 2D paths, texts and basic shapes can be filled (which means painting the interior of the shape) and stoked (which means painting along the outline of the shape) using the current graphics state TinyState (including fill color, stroke color, global alpha, fill and stroke alphas, etc). TinyLine 2D supports the notion of a paint server via the TinyPaint class. With TinyColor, you can fill or stroke of shapes and text using:
The TinyColor class uses the ARGB color space (Alpha Red Green Blue). Each pixel value is stored in 0xAARRGGBB format, where the high-order byte contains the alpha channel and the remaining bytes contain color components for red, green and blue, respectively. The alpha channel specifies the opacity of the pixel, where a value of 0x00 represents a pixel that is fully transparent and a value of 0xFF represents a fully opaque pixel. 7.2 Single ColorExample: Colors.java
View the example as applet (Java-enabled browsers only) The following code shows how to create opaque and semi opaque single colors in the ARGB color space: /* The solid (full opaque) red color in the ARGB space */ TinyColor redColor = new TinyColor(0xffff0000); /* The semi-opaque green color in the ARGB space (alpha is 0x78) */ TinyColor greenColor = new TinyColor(0x7800ff00); /* The semi-opaque blue color in the ARGB space (alpha is 0x78) */ TinyColor blueColor = new TinyColor(0x780000ff); /* The semi-opaque yellow color in the ARGB space (alpha is 0x78) */ TinyColor yellowColor = new TinyColor(0x78ffff00); 7.3 GradientsGradients define continuously smooth color transitions along a vector from one color to the other. TinyLine 2D supports two types of gradients, linear gradients and radial gradients. 7.4 Stops colorsBoth linear and radial gradients have color stops. Color stops define the ramp of colors to use on a gradient. The color stop structure is quite simple. It has the stop color ARGB value that indicates what color to use at that gradient stop and the offset value. The offset value is ranging from 0 to 1 in fixed point numbers which indicates where the gradient stop is placed. For linear gradients, the offset represents a location along the gradient vector. For radial gradients, it represents a percentage distance from the center of the circle. 7.5 Spread methodThe spread method points out what happens if the gradient starts or ends inside the bounds of the target region (path, text or basic shape). Possible values are: TinyPaint.GRADIENT_PAD Use the terminal colors of the gradient to fill the remainder of the target region. TinyPaint.GRADIENT_REFLECT Reflect the gradient pattern start-to-end, end-to-start, start-to-end, etc. TinyPaint.GRADIENT_REPEAT Repeat the gradient pattern start-to-end, start-to-end, start-to-end, etc. The default value is TinyPaint.GRADIENT_PAD. 7.6 Gradient Units and Gradient transformThe TinyPaint.unit attribute defines the coordinate system for gradient vector coordinates. The gradient units are: TinyPaint.USER_SPACE_ON_USE and TinyPaint.OBJECT_BOUNDING_BOX. TinyPaint.USER_SPACE_ON_USE defines that the gradient vector coordinates are values in the coordinate system that results from taking the current user coordinate system in place and then applying the gradient transform. TinyPaint.OBJECT_BOUNDING_BOX says that the user coordinate system for the gradient vector coordinates is established using the bounding box of the shape to which the gradient is applied and then applying the gradient transform. Here the gradient transform is an additional TinyMatrix that contains the definitions of an optional additional transformation from the gradient coordinate system onto the target coordinate system. This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space. 7.7 Linear GradientThe linear gradient defines the smooth color transition along a gradient vector defined by starting [x1,y1] and ending [x2,y2] points onto which the gradient stops are mapped. The values of x1, y1, x2, y2 should be in fixed point numbers. 7.8 Radial GradientThe radial gradient specifies the smooth color transition along a gradient vector defined by the center (x1, y1) point of the largest circle and its radius r. The radial gradient will be drawn such that the gradient stop at offset 1 is mapped to the perimeter of this largest (i.e., outermost) circle. The values of x1, y1, r should be in fixed point numbers. Example: Gradients.java
View the example as applet (Java-enabled browsers only) The example shows how to create different solid and opaque gradients and use them for drawing shapes and texts:
/* Create the linear gradient color. */
TinyPaint pserver = null;
pserver = new TinyPaint( TinyPaint.FILL_LINEAR_GRADIENT,
new TinyMatrix());
/* Add the first stop color */
pserver.addStop(0xffff6600, 13);
/* Add the second stop color */
pserver.addStop(0xffffff66, 242);
/* Create the gradient color ramp */
pserver.createColorRamp();
/* The start point of the linear gradient vector */
pserver.x1 = 50<<8;
pserver.y1 = 50<<8;
/* The end point of the linear gradient vector */
pserver.x2 = 150<<8;
pserver.y2 = 125<<8;
/* The spread method */
pserver.spread = TinyPaint.GRADIENT_PAD; // default
linColor = new TinyColor( pserver);
/* Create the radial gradient color. */
pserver = new TinyPaint( TinyPaint.FILL_RADIAL_GRADIENT,
new TinyMatrix());
/* Add the first stop color */
pserver.addStop(0xffff6600, 13);
/* Add the second stop color */
pserver.addStop(0xffffff66, 128);
/* Add the third stop color */
pserver.addStop(0xffff6600, 256);
/* Create the gradient color ramp */
pserver.createColorRamp();
/* The radial gradient center point */
pserver.x1 = 90<<8;
pserver.y1 = 100<<8;
/* The radial gradient radius */
pserver.r = 50<<8;
/* The spread method */
pserver.spread = TinyPaint.GRADIENT_REPEAT;
radColor = new TinyColor(pserver);
7.9 PatternsA bitmap image (or sampled image) is an array of pixels (or samples). Each pixel represents a single point in the image. JPEG and PNG graphics files are examples of bitmap images. Because of the wide variety of image formats, different Java API and different image formats support on different Java platforms, in order to be portable across all Java flavors, TinyLine 2D does not provide image formats coding and decoding. We leave these coding and decoding functions outside of the API and operate with the image data instead as it was already decoded from the JPEG or PNG file. TinyLine 2D uses TinyBuffer class for presenting an accessible buffer of image data. In examples, you can find the corresponding helping functions that read JPG or PNG files into TinyBuffer objects. A TinyBuffer defines values for pixels occupying a particular rectangular area. The rectangle, known as the TinyBuffer's bounding rectangle, is width, and height values. Each pixel value is stored in 0xAARRGGBB format, where the high-order byte contains the alpha channel and the remaining bytes contain color components for red, green and blue, respectively. The alpha channel specifies the opacity of the pixel, where a value of 0x00 represents a pixel that is fully transparent and a value of 0xFF represents a fully opaque pixel. A pattern color is used to fill or stroke a shape or text using a pre-defined image data (pixels buffer) which can be replicated ("tiled") at fixed intervals to cover the areas to be painted. Example: Patterns.java
View the example as applet (Java-enabled browsers only) Changing the target surfaceAlso there is an interesting option to create a TinyBuffer object by drawing on it using Tiny2D functions. We are going to create a "wallpaper" bitmap with the red circle and the word "tiny" and then fill the background with this color. For that we will need to use the following Tiny2D functions:
The following code creates the "wallpaper" bitmap:
/* Create the "wallpaper" bitmap */
TinyPaint pserver = null;
bitmap1 = new TinyBuffer();
bitmap1.width = 32;
bitmap1.height = 32;
bitmap1.pixels32 = new int[bitmap1.width * bitmap1.height];
/* Saves the current state and the target */
tmptarget = t2d.getTarget();
copyState(tstate, tmpstate);
/* Set a new target - the "wallpaper" bitmap */
t2d.setTarget(bitmap1);
/* Clear the "wallpaper" bitmap with the solid white color*/
t2d.invalidate();
tstate.bg = 0xffffffff;
t2d.clearRect(tstate.devClip);
/* Set the red fill color */
tstate.fillColor = (redColor);
tstate.strokeWidth = (1 << Tiny2D.FIX_BITS);
/* Draw the oval */
t2d.drawOval(4 << Tiny2D.FIX_BITS, 4 << Tiny2D.FIX_BITS,
18 << Tiny2D.FIX_BITS, 18 << Tiny2D.FIX_BITS);
/* Set the black fill color */
tstate.fillColor = blackColor;
tstate.strokeColor = TinyColor.NONE;
/* Draw the text */
t2d.drawChars(font, fontSize, engText, 0, engText.length, X, Y,
Tiny2D.TEXT_ANCHOR_START);
/* The "wallpaper" bitmap is done */
/* Restores the current state and the target */
copyState(tmpstate, tstate);
t2d.setTarget(tmptarget);
Now we can create the corresponding "wallpaper" pattern color:
/* Creates the first pattern color - the wallpaper. */
pserver = new TinyPaint(TinyPaint.FILL_PATTERN);
pserver.bitmap = bitmap1;
color1 = new TinyColor(pserver);
The next code creates the pattern color for drawing a bird:
/* Creates the second pattern color - the bird. */
bitmap2 = canvas.createTinyBuffer(
new TinyString("/bird.png".toCharArray()));
pserver = new TinyPaint(TinyPaint.FILL_BITMAP);
pserver.bitmap = bitmap2;
color2 = new TinyColor(pserver);
The next code creates the brick wall color:
/* Creates the third pattern color - the brick wall. */
bitmap3 = canvas.createTinyBuffer(
new TinyString("/brick.png".toCharArray()));
pserver = new TinyPaint(TinyPaint.FILL_PATTERN);
pserver.bitmap = bitmap3;
color3 = new TinyColor(pserver);
Once we defined the needed pattern colors, we can stoke and fill with a pattern color just the same way we do with a single color or a gradient color.
/* Draw the wallpaper */
tstate.fillColor = color1;
t2d.drawRect((tstate.devClip.xmin<<Tiny2D.FIX_BITS),
(tstate.devClip.ymin<<Tiny2D.FIX_BITS),
(tstate.devClip.xmax<<Tiny2D.FIX_BITS),
(tstate.devClip.ymax<<Tiny2D.FIX_BITS) );
/* Draw the brick wall */
tstate.fillColor = color3;
t2d.drawRect((20<<Tiny2D.FIX_BITS),
(50<<Tiny2D.FIX_BITS),
(100<<Tiny2D.FIX_BITS),
(100<<Tiny2D.FIX_BITS) );
/* Draw the first oval with the solid pattern color2 */
tstate.fillColor = color2;
tstate.strokeColor = TinyColor.NONE;
t2d.drawOval(10<<Tiny2D.FIX_BITS,
10<<Tiny2D.FIX_BITS,
80<<Tiny2D.FIX_BITS,
80<<Tiny2D.FIX_BITS);
/* Overwrites the Tiny2D state */
tstate.devMat = matrix2;
/* Draw the second oval with the semi opaque pattern color2 */
tstate.fillColor = color2;
tstate.fillAlpha = 127;
tstate.strokeColor = TinyColor.NONE;
t2d.drawOval(10<<Tiny2D.FIX_BITS,
10<<Tiny2D.FIX_BITS,
80<<Tiny2D.FIX_BITS,
80<<Tiny2D.FIX_BITS);
t2d.sendPixels();
|
|
|
© 2008 TinyLine. All rights reserved.
|