Director Article

Draw and Fill

You can now edit any image on every pixel, but honestly, that would be very slow and processor intensive. If you wanted to draw a line, fill an entire image with a single color, or add a circle in the center of our image you would spend a lot of unnecessary CPU time copying each pixel one-by-one. Computers are faster than the average pen and paper, but the same rules apply as if you were trying to draw or color a shape by hand. That's where you can use functions to write to larger areas of an image at once.

The draw command does just what is sounds like. It draws a shape on the image at the defined location and the color you specify. Here is a base example…

i.draw(rect(10,10,20,20), rgb(0,0,0))

This would draw a 1 pixel thick black square from 10, 10 to point 20, 20. Simple enough, but what if you want more control? The color parameter can actually be a list of parameters you can define, including shapeType, color, and lineSize. So try drawing a 2-pixel thick red circle in the same location.

i.draw(rect(10,10,20,20), [#color : rgb(255,0,0), #lineSize : 2, #shapeType : #oval])

The shapeType parameter can be #line, #oval, #rect, or #roundRect. Line sizes can be one or larger and color can be any valid color object. Note that you can also use four parameters instead of a rect object to define the area to write to:

i.draw(10,10,20,20, [#color : rgb(255,0,0), #lineSize : 2, #shapeType : #oval])

What about solid areas? Sometimes you may want to fill the entire area with a color. For this you can use the fill command. Fill works exactly like draw except that the result is a solid shape, not an outline. Additionally you have a new property you can use called #bgColor. For filled areas, this defines the color of the outline, so that you can fill the area with one solid color and add a different color border around it. This example creates a 10 X 10 rounded rectangle, filled with black, and a red 2-pixel outline:

i.fill(10,10,20,20, [#color : rgb(0,0,0), #bgColor : rgb(255,0,0), #lineSize : 2, #shapeType : #roundRect])

Note the format of the parameter list, as it will come up again in other imaging functions. With these parameter lists, you can add parameters to define specific elements of the imaging command, but they are entirely optional; you only need to define ones you need to use.

FloodFill – Undocumented

If you have ever used any paint program (including the Director paint window), you know about the bucket tool and flood fill. While you won't find it in any manual, there is a flood fill command in Director that you can use to change the color of large areas with a single command. FloodFill accepts a point as reference and a color object, then goes out from that point evaluating each pixel. If the neighboring pixel matches, it too change. This is very exact though, so even the slightest difference in color will not change. Here is the basic syntax:

i.floodFill(10, 10, rgb(255,0,0))

This will flood fill all of the matching color area from point 10, 10 to red. There are a few behaviors that use other methods, like getPixel and setPixel, such as this one, but the built-in one is very fast. You might want to look at the other examples though, since with getPixel and setPixel you can program in tolerance so that it fills similar colors as well.

Page 6 of 12