Re: JSUI-MGraphics patch-a-day


Forums > Javascript > JSUI-MGraphics patch-a-day
November 4, 2011 | 2:52 pm

Here is the patch for November 4, 2011:

This shows some basic uses of the pattern generation functions within mgraphics. The creation of the pattern (pattern_create_linear and pattern_create_radial) builds a gradient for use during shape fills. In these originating calls, you define the "influence" points – the points on a plane that describe the location of gradient startup. If these points are close together, the edge between segments will be tightly defined; if the points are farther apart, the edge will be more of a gradient.

Once you define the two points, you have to give each a color (using the add_color_stop_rgba function, which needs an index – either 0 or 1 – followed by an rgba color set) and tell the next drawing routine to use this pattern for drawing. The next time you do a fill() or stroke() call, the routine will use the pattern rather than a single color.

So, in this case, I create a black background (using a rectangle), build up a color, then have a ball displayed/drawn using a background color. You’ll notice that the moving ball shows an unchanging background, since the pattern is defined by absolute location rather than relative (to the object) location. Thus, we perform the sleight-of-hand that makes it look like we have a "porthole" into the background, when in fact we are simply drawing the shape using a pattern.

Enjoy!