Tile and Transparent Images

Like the -background color option, most widgets support a -tile option, as shown in Figure 17-18. Figure 17-18

Figure 17-18. A 32x32 PNG file, tile.png

A tile is an image, typically small, patterned repeatedly across and down the widget. If a widget has both a -background and -tile option, the tile is applied over the background color, hence it takes precedence. Currently, the Button, Canvas, Checkbutton, Entry, Frame, Label, Listbox, MainWindow, Menu, Menubutton, Message, Radiobutton, Scale, Scrollbar, Text, and Toplevel widgets support the -tile option. Here are the common tile-related widget options:

  • -activetile => image
  • Specifies the tile image displayed when drawing an active widget.
  • -disabledtile => image
  • Specifies the tile image displayed when drawing a disabled widget.
  • -offset => offsetSpec
  • Specifies the offset of the tiles. It can have two different formats, -offset => [x, y] or -offset => side, where side can be n, ne, e, se, s, sw, w, nw, or center. In the first case, the origin is that of the Toplevel of the current window. For a Canvas and Canvas items, the origin is the Canvas origin, but putting a # character in front of the coordinate pair means use the Toplevel origin instead. For Canvas items, the -offset option is used for stippling as well. For line and polygon Canvas items, you can also specify an index as an argument, which connects the stipple or tile origin to one of the coordinate points of the line/polygon.
  • -tile => image
  • Specifies the tile displayed as a widget's background.
  • -troughtile => image
  • Specifies the tile displayed in the rectangular trough area of widgets such as Scrollbars and Scales.

We can think of the Canvas as having various layers. The lowest is the green background that is obscured by the tile layer. On top of these two layers is a single Canvas image item: a picture of the neko. 

my $icon = $mw->Photo(-file=>'images/Icon.xpm'); my $tile = $mw->Photo(-file=>'images/tile.png'); my $c1 = $mw->Canvas( -tile => $tile, -background => 'green', qw/-width 200 -height 200/, ); $c1->pack(-side => 'left'); $c1->createImage(105, 105, -image => $icon);

This code produced Figure 17-19. Figure 17-19

Figure 17-19. A Canvas with a tile

Figure 17-20 shows a GIMP[46] window where a transparent PNG picture is being edited. The picture starts out totally transparent, but we've deposited a lattice of blue dots with a feathered brush tool.

[46] GIMP stands for GNU Image Manipulation Program.

Figure 17-20

Figure 17-20. A transparent PNG lattice

Figure 17-21 shows that if we create a second Canvas similar to the first and add an image item of this transparent PNG file (rather than a tile), we can expect the green Canvas background to show through. Notice that the neko image has been lowered in the Canvas' display list so it's behind the transparent PNG. Figure 17-21

Figure 17-21. The background shows through a transparent PNG image

Here is the cod that produced Figure 17-21: 

my $c2 = $mw->Canvas( -background => 'green', qw/-width 200 -height 200/, ); $c2->pack(-side => 'left'); my $trans = $mw->Photo(-file => 'images/transparent.png'); $c2->createImage(105, 105, -image => $trans); my $neko = $c2->createImage(105, 105, -image => $icon); $c2->lower($neko);