• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 171
  • Last Modified:

Image Component (or help)

Just had a few queries regarding transparency on images.

Is there a way around, or an image component that lets you click 'through' an image, so long as you are clicking on the transparent bit.

An explanation of what i mean : Lets say that you have put  showmessage('Clicked') for the onclick method of form1. Now add an image to your form, and compile the project. Obviously, whenever you click on your form, it shows this message, but it doesnt if you click on the image. So now i have an image with a large area of white. I have set the image transparency to true, and ultimately the white in the image disappears. I now see my picture on the form, but i now have a large 'hole' in my image, where the transparency has removed the white from my image. Because of this transparency, i can now see the form1 underneath the image. When i compile my program, and click on the area of my image where the hole has formed (and so i am clicking on the form beneath), delphi still reacts as though i am clicking on the image. Perhaps its unfair to say this is how delphi reacts, as i know technically i am still clicking on the image, and not the form beneath... but this leads to the problem i have.

I need some way of using images, with regions set to transparent, that can have the transparent area react as though it doesnt exist as part of the image (and ultimately mean i can click and react with ANYTHING that is placed directly under the area that is transparent).
Perhaps there is an image component which can change to be the same shape as my image. Every image component that i know of is square. Just a thought.

I don't know if this post makes much sense to people reading it, so please say so if you dont understand.

Any help is appreciated
Regards
- Green
0
Greenandroid
Asked:
Greenandroid
1 Solution
 
mokuleCommented:
If You place an image on a panel You can make some regions ofthis panal and image transparent

procedure TForm1.Button1Click(Sender: TObject);
var
  rgn1: HRGN;
begin
  rgn1 := CreateEllipticRgn(0,0,Panel1.width,Panel1.Height);
  SetWindowRgn(Panel1.Handle,rgn1,true);
end;

procedure TForm1.FormClick(Sender: TObject);
begin
  ShowMessage('Clicked');
end;
0
 
wolsenCommented:
You can put the image on a TPanel ( which is a windowed component ).  Then, you can use the setWindowRGN api function to make selected parts of the panel transparent.

The following example shows how setWindowRGN works for an application window. The same principle should also work with any control that has a window handle ( ie, TPanel ).

http://www.hwb.com/gruhn/programming/tutorial/clear.html

Hope this helps.

-Will.
0
 
GreenandroidAuthor Commented:
This method would be perfect, but is way too time consuming for what i need it for...
Added to that, the fact that most of the images i need to use this for have diagonal edges, and are not simple basic shapes. Using your method above, i'd have to churn out quite alot of code for each image....
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GreenandroidAuthor Commented:
As an added thought, perhaps its possible to modify the code used to skin forms by means of a bitmap. I have used several bits of code in the past which shape forms to the shape of a bitmap, but whether this is possible to shape a TPanel with an image on, who knows......
0
 
novicedelphidevCommented:
The was a great article in Delphi Informant covering this issue. Don't remember the issue, but I do remember the Title of the article.
It was two parts:

Hot Spots Part I
Hot Spots Part II

Sorry I couldn't help any more.

0
 
pcsentinelCommented:
Cant you just use something like this

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
var
  lControl: TControl;
begin
  if (Sender=Image1) and (Image1.picture.Bitmap.Canvas.Pixels[X,Y]=clWhite) then
  begin
    lControl:=ControlatPos(Point(x,y),false);
    if lControl is TWinControl then
       SendMessage((lControl as TWinControl).Handle,WM_LBUTTONDOWN,X,Y);
  end;
end;

regards
0
 
pcsentinelCommented:
Oops sorry, its been a long day alread, the above answer is daft because as the image control is not  a windows control it will appear behind any windows control on the form anyway.

What are you actually trying to interact with on the form because you could still use a similar method

regards
0
 
GreenandroidAuthor Commented:
Ok well i came across this problem making a little program which moves a man around the screen. The idea is that you can click somewhere on the form, and the man walks there. This works fine, but i wanted to add scenery to this.
As part of this program, i need to define areas which the user can click, and areas where they cant. As i am using images for scenery, and have set these images to transparent, i need the user to be able to click on any area of the image which is transparent, but not on the actual image.
I could do this very easily, if it wasnt for the fact that the shapes of my scenery (and the transparent areas) are not squares. Most consist of diagonal rectangles etc.
I have even tried using code to rotate images, but again, delphi rotates the image within a square shape.
0
 
pcsentinelCommented:
Ok well you can still use the outer for the code I posted i.e.

  if (Sender=Image1) and (Image1.picture.Bitmap.Canvas.Pixels[X,Y]=clWhite) then
  begin
     <add the code for moving the man here>
  end

 you just need to convert the image x & y to form X & y
 and then move the man

hope this helps

regards
0
 
GreenandroidAuthor Commented:
Thank you pcsentinel,

I have managed to use your code to make this work for me. I was unaware that i could still detect if a pixel was white or not, if it was set to transparent. I guess it was a case of 'out of site, out of mind'...

Great stuff, and thanks to everyone else who posted here!

Regards
-Green
0
 
TheRealLokiSenior DeveloperCommented:
maybe i've not understood your problem correctly, but if you have a button, a panel, and a timage on the form (the timage being the full size of the form)
all you need to do is in design mode, right click on the image and choose "send to back"
or alternatively right click on the button and panel and choose "bring to front"
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now