how to create a transparent rectangle responding to click event in Tkinter

Question

I need to draw a rectangle in a tkinter.canvas to respond click event:

click_area = self.canvas.create_rectangle(0,0,pa_width,pa_height,fill=\'LightBlue\',ou         


        

Answer 1

I came across this same issue trying to use the find_closest Canvas method to modify existing rectangles, but simply binding to the canvas didn't work. The issue is that a Tkinter rectangle without a fill will only respond to clicks on its border.

Then I read about the stipple argument to create_rectangle from here:

stipple: A bitmap indicating how the interior of the rectangle will be stippled.

Default is stipple="", which means a solid color. A typical value would be stipple='gray25'. Has no effect unless the fill has been set to some color. See Section 5.7, “Bitmaps”.

And the section on bitmaps states that only a few stipple options are available by default, but none of them are completely transparent. However, you can specify your own custom bitmap as an X bitmap image (a .xbm file).

XBM files are really just text files with a C-like syntax, so I made my own 2x2 bitmap with all transparent pixels and saved it as transparent.xbm in the same directory as my Tkinter script. Here's the code for the XBM file:

#define trans_width 2
#define trans_height 2
static unsigned char trans_bits[] = {
   0x00, 0x00
};

Then, you can specify the custom stipple by prefixing the xbm file name with a @ when creating your rectangle:

self.canvas.create_rectangle(
    x1,
    y1,
    x2,
    y2,
    outline='green',
    fill='gray',  # still needed or stipple won't work
    stipple='@transparent.xbm',
    width=2
)

Note, you still need to provided some fill value or the stipple will not be applied. The actual fill value doesn't matter as the stipple will "override" it in the canvas.

Answer 2

I think I got it: Bind the canvas, not the rectangle.

replace

self.canvas.tag_bind('CLICK_AREA','<Button>',self.onClickArea)

with

self.canvas.bind('<Button>',self.onClickArea)

problem solved.