picture boxes, labels, and transparency

[Chris Coho, Jr.]

Ok, I'll explain the whole problem because there may be several ways to
solve this and hopefully someone knows one. What I'm doing is creating
a specialty template editor, similar to say a corel draw (but for
specific uses). What I need to be able to do is import graphics and
text and then move them around the background until they are where I
want them and then export it out as an image file.

The problem is that I need to be able to move text over an image and
vice versa. Labels always go behind a picture box when you move them
regardless of Zorder so I tried putting each label in its own equally
sized picture box. That solve that problem, now the text can go over
the other images where necessary. But this causes a new problem.
Picture boxes don't have transparent backgrounds so if I move text over
an image, you can't see behind the text to the image, you see a big
white (or whatever background color is) block. I tried putting an all
transparent gif in the picture box then putting the label over top that
but it didn't seem to work.

I've seen these issues in the newsgroups before but none of the answers
really matched what i'm trying to do.

Thanks in advance!

Chris

[Mike Williams]

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:MJ******************@nwrdny02.gnilink.net...

. . . . . The problem is that I need to be able to move text over
an image and vice versa . . . . .

Jeff Bennet obviously isn't awake yet or he'd be trying to sell you his
Metadraw control by now! Actually, the Metadraw control would probably suit
you down to the ground, but you certainly don't need to buy a third party
control to solve your problem. If you've got the cash though, and you are
likely to have other graphic related problems in the future then you could
certainly do a lot worse than Metadraw. (Bloody hell, I've said "Metadraw"
three times already in this message - four if you count this one!).
Actually, I've never tried Jeff's control, but from his various descriptions
on this group it sounds quite useful.

In your particular case there are many ways to solve your problem that
require nothing more than a little bit of more or less standard VB code,
sprinkled with perhaps a few API routines. For example, have you tried using
Image controls instead of Picture Box controls? Both the Image control and
the Label control are "lightweight" controls (by that I mean that they are
drawn onto the Form by VB itself) and they both therefore live at the very
bottom level. If you set the Label's BackStyle property to Transparent you
will be able to place it either on top of or behind an Image using the
ZOrder method and when it is on top of an Image all you will see is the text
(and not the rectangular shape of the Label).

There are other ways of dragging pictures or pieces of text or whatever
around a Form in such a way that you can set each of them to have a specific
"Zorder" relationship (a nice little "Sprite Drag" routine would do it for
you), but perhaps you should first try the simpler method that I have
already described to see if it suits your purposes. Or maybe you could throw
a little money Jeff's way and he will send you a Control that will allow you
to do this sort of stuff very easily (at least I imagine it would be easy).
He's sure to pop up on this thread sooner or later :-)

Mike

[Chris Coho, Jr.]

Mike Williams wrote:

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:MJ******************@nwrdny02.gnilink.net...

. . . . . The problem is that I need to be able to move text over
an image and vice versa . . . . .

Jeff Bennet obviously isn't awake yet or he'd be trying to sell you
his Metadraw control by now! Actually, the Metadraw control would
probably suit you down to the ground, but you certainly don't need to
buy a third party control to solve your problem. If you've got the
cash though, and you are likely to have other graphic related
problems in the future then you could certainly do a lot worse than
Metadraw. (Bloody hell, I've said "Metadraw" three times already in
this message - four if you count this one!). Actually, I've never
tried Jeff's control, but from his various descriptions on this group
it sounds quite useful.

In your particular case there are many ways to solve your problem that
require nothing more than a little bit of more or less standard VB
code, sprinkled with perhaps a few API routines. For example, have
you tried using Image controls instead of Picture Box controls? Both
the Image control and the Label control are "lightweight" controls
(by that I mean that they are drawn onto the Form by VB itself) and
they both therefore live at the very bottom level. If you set the
Label's BackStyle property to Transparent you will be able to place
it either on top of or behind an Image using the ZOrder method and
when it is on top of an Image all you will see is the text (and not
the rectangular shape of the Label).

There are other ways of dragging pictures or pieces of text or
whatever around a Form in such a way that you can set each of them to
have a specific "Zorder" relationship (a nice little "Sprite Drag"
routine would do it for you), but perhaps you should first try the
simpler method that I have already described to see if it suits your
purposes. Or maybe you could throw a little money Jeff's way and he
will send you a Control that will allow you to do this sort of stuff
very easily (at least I imagine it would be easy). He's sure to pop
up on this thread sooner or later :-)

Mike

Thank you for the recommendation, I will try using an image box instead
of a picture box and see if it will work. Off the top of my head I am
not sure if I'm doing anything that would keep me from using an image
box so I will give it a try and report back, Thanks!!

[Chris Coho, Jr.]

Mike Williams wrote:

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:MJ******************@nwrdny02.gnilink.net...

. . . . . The problem is that I need to be able to move text over
an image and vice versa . . . . .

Jeff Bennet obviously isn't awake yet or he'd be trying to sell you
his Metadraw control by now! Actually, the Metadraw control would
probably suit you down to the ground, but you certainly don't need to
buy a third party control to solve your problem. If you've got the
cash though, and you are likely to have other graphic related
problems in the future then you could certainly do a lot worse than
Metadraw. (Bloody hell, I've said "Metadraw" three times already in
this message - four if you count this one!). Actually, I've never
tried Jeff's control, but from his various descriptions on this group
it sounds quite useful.

In your particular case there are many ways to solve your problem that
require nothing more than a little bit of more or less standard VB
code, sprinkled with perhaps a few API routines. For example, have
you tried using Image controls instead of Picture Box controls? Both
the Image control and the Label control are "lightweight" controls
(by that I mean that they are drawn onto the Form by VB itself) and
they both therefore live at the very bottom level. If you set the
Label's BackStyle property to Transparent you will be able to place
it either on top of or behind an Image using the ZOrder method and
when it is on top of an Image all you will see is the text (and not
the rectangular shape of the Label).

There are other ways of dragging pictures or pieces of text or
whatever around a Form in such a way that you can set each of them to
have a specific "Zorder" relationship (a nice little "Sprite Drag"
routine would do it for you), but perhaps you should first try the
simpler method that I have already described to see if it suits your
purposes. Or maybe you could throw a little money Jeff's way and he
will send you a Control that will allow you to do this sort of stuff
very easily (at least I imagine it would be easy). He's sure to pop
up on this thread sooner or later :-)

Mike

Ok, I gave that a try, and more or less it works for what I want except
for one small problem (one that I could probably live with if there are
no other solutions that aren't insanely difficult), the reason I was
using picture boxes was because I'm using the free image library that
will open a ton of different file types and has a method to load one of
these images to a handle and then render that image to the handle of a
picture box, image boxes only support jpg, gif, and bitmap. the only
other file type that i was hoping to use was tiff so its not the end of
the world if this is what I end up doing, but if you do have other
suggestions, i'm all ears!

thanks again!

Chris

[Mike Williams]

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:Ua************@nwrdny02.gnilink.net...

Ok, I gave that a try, and more or less it works for what I
want except for one small problem (one that I could probably
live with if there are no other solutions that aren't insanely difficult)
the reason I was using picture boxes was because I'm using the
free image library that will open a ton of different file types and
has a method to load one of these images to a handle and then
render that image to the handle of a picture box . . . . .

I'm not sure what image library you are referring to, but if it is capable
of transfering image data to the hDC of a Picture Box as you say then it is
probably creating a bitmap of the image. If so then you should be able to
set the Picture Box Autoredraw property to True before you perform the
transfer to its hDC. You should then be able to transfer that image to a VB
Image Control, something like Image1.Picture = Picture1.Image. If this free
Image Library is really free then maybe you woulod like to post a link to it
and I will download it and give it a whirl.

By the way, in your original posting you said that you were doing a sort of
"Corel Draw" thing in which you allow the user to move graphics and text
around to suit their own needs and then export the result out as an image
file. I don't want to attempt to teach you things that you probably already
know, but exactly how are you converting the overall result to an image
file? I presume that you know you will lose a lose a lot of quality if you
simply create a "dump" of the currently displayed total composite image
(pictures, lables containing text etc). If the resultant overall image is
for printing purposes then you would be well advised to create your own
little image format, in which you save the entire "full resolution" version
of each picture and also its intended position and size as set by the user.
Do the same with the Labels, simply recording the size and position and font
etc of the text. Then when you want to print it out you use PaintPicture on
the full picture data, specifying the desired output size and position.
Also, for each item of text you would output it at the desired size and
position as a standard True Type font using the VB Printer.Print method.
This will give you the best possible overall output resolution.

Don't forget to post a link to the Image Control you are using.

Mike

[Jeff Bennett]

"Mike Williams" <Mi**@WhiskyAndCoke.com> wrote in message news:<c8**********@news7.svr.pol.co.uk>...

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:MJ******************@nwrdny02.gnilink.net...

. . . . . The problem is that I need to be able to move text over
an image and vice versa . . . . .

Jeff Bennet obviously isn't awake yet or he'd be trying to sell you his
Metadraw control by now! Actually, the Metadraw control would probably suit
you down to the ground, but you certainly don't need to buy a third party
control to solve your problem. If you've got the cash though, and you are
likely to have other graphic related problems in the future then you could
certainly do a lot worse than Metadraw. (Bloody hell, I've said "Metadraw"
three times already in this message - four if you count this one!).
Actually, I've never tried Jeff's control, but from his various descriptions
on this group it sounds quite useful.

In your particular case there are many ways to solve your problem that
require nothing more than a little bit of more or less standard VB code,
sprinkled with perhaps a few API routines. For example, have you tried using
Image controls instead of Picture Box controls? Both the Image control and
the Label control are "lightweight" controls (by that I mean that they are
drawn onto the Form by VB itself) and they both therefore live at the very
bottom level. If you set the Label's BackStyle property to Transparent you
will be able to place it either on top of or behind an Image using the
ZOrder method and when it is on top of an Image all you will see is the text
(and not the rectangular shape of the Label).

There are other ways of dragging pictures or pieces of text or whatever
around a Form in such a way that you can set each of them to have a specific
"Zorder" relationship (a nice little "Sprite Drag" routine would do it for
you), but perhaps you should first try the simpler method that I have
already described to see if it suits your purposes. Or maybe you could throw
a little money Jeff's way and he will send you a Control that will allow you
to do this sort of stuff very easily (at least I imagine it would be easy).
He's sure to pop up on this thread sooner or later :-)

Mike

Mike - Thanks for the plug

Chris - sounds from the various notes in the thread,
like you've got most of your issues resolved,
( Mike's made some good suggestions )
but if you do have any interest in MetaDraw,
let me know and I'll be happy to answer any questions,
help go over pros and cons of MetaDraw vs other approaches
and get you started with evaluation.
Jeff Bennett
Je**@Bennet-Tec.Com

* Bennet-Tec Information Systems, Inc
* 50 Jericho Tpk, Jericho, NY 11753
* Phone [phone], Fax - 5597
* RELIABLE Components Make You Look Sharp!
* TList/Pro * ALLText HT/Pro * MetaDraw *
* Custom Software Development Services Too.
* WWW.Bennet-Tec.Com

=================== ===================

[Chris Coho, Jr.]

Mike Williams wrote:

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:Ua************@nwrdny02.gnilink.net...

Ok, I gave that a try, and more or less it works for what I
want except for one small problem (one that I could probably
live with if there are no other solutions that aren't insanely
difficult) the reason I was using picture boxes was because I'm
using the free image library that will open a ton of different file
types and has a method to load one of these images to a handle and
then render that image to the handle of a picture box . . . . .

I'm not sure what image library you are referring to, but if it is
capable of transfering image data to the hDC of a Picture Box as you
say then it is probably creating a bitmap of the image. If so then
you should be able to set the Picture Box Autoredraw property to True
before you perform the transfer to its hDC. You should then be able
to transfer that image to a VB Image Control, something like
Image1.Picture = Picture1.Image. If this free Image Library is really
free then maybe you woulod like to post a link to it and I will
download it and give it a whirl.

By the way, in your original posting you said that you were doing a
sort of "Corel Draw" thing in which you allow the user to move
graphics and text around to suit their own needs and then export the
result out as an image file. I don't want to attempt to teach you
things that you probably already know, but exactly how are you
converting the overall result to an image file? I presume that you
know you will lose a lose a lot of quality if you simply create a
"dump" of the currently displayed total composite image (pictures,
lables containing text etc). If the resultant overall image is for
printing purposes then you would be well advised to create your own
little image format, in which you save the entire "full resolution"
version of each picture and also its intended position and size as
set by the user. Do the same with the Labels, simply recording the
size and position and font etc of the text. Then when you want to
print it out you use PaintPicture on the full picture data,
specifying the desired output size and position. Also, for each item
of text you would output it at the desired size and position as a
standard True Type font using the VB Printer.Print method. This will
give you the best possible overall output resolution.

Don't forget to post a link to the Image Control you are using.

Mike

Ok, yes after some playing around I was able to transfer the image from
the picture box to the image control so that is no longer an issue,
everything is working very well now. As far as quality goes, the image
library i'm using has IO functions built in that retain the original
quality very well. It actually creates the final image from compiling
all the original images that were imported rather than just the final
on the screen, I just need those image boxes on screen to get the
top/left coordinates to know where to merge the images. If you still
want the links, the free image library is available at:

http://sourceforge.net/projects/freeimage

and I actually plunked down the $25 for the following which adds some
functionality to it and makes the functions a little easier to call for
the most needed functions:

http://www.thevbzone.com/ab.htm

Thanks again for all your help

[Lindsay]

Why not try this: Based on the position of the picturebox with the text in,
cut out a peice of the picture and put in the picturebox and put the text on
top. You will need to keep doing this as the picturebox text moves across
the main picture. You may need an API like BitBlt to transfer the section of
picture from one picturebox to another.

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:MJ******************@nwrdny02.gnilink.net...

Ok, I'll explain the whole problem because there may be several ways to
solve this and hopefully someone knows one. What I'm doing is creating
a specialty template editor, similar to say a corel draw (but for
specific uses). What I need to be able to do is import graphics and
text and then move them around the background until they are where I
want them and then export it out as an image file.

The problem is that I need to be able to move text over an image and
vice versa. Labels always go behind a picture box when you move them
regardless of Zorder so I tried putting each label in its own equally
sized picture box. That solve that problem, now the text can go over
the other images where necessary. But this causes a new problem.
Picture boxes don't have transparent backgrounds so if I move text over
an image, you can't see behind the text to the image, you see a big
white (or whatever background color is) block. I tried putting an all
transparent gif in the picture box then putting the label over top that
but it didn't seem to work.

I've seen these issues in the newsgroups before but none of the answers
really matched what i'm trying to do.

Thanks in advance!

Chris

[Chris Coho, Jr.]

Mike Williams wrote:

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:Ua************@nwrdny02.gnilink.net...

Ok, I gave that a try, and more or less it works for what I
want except for one small problem (one that I could probably
live with if there are no other solutions that aren't insanely
difficult) the reason I was using picture boxes was because I'm
using the free image library that will open a ton of different file
types and has a method to load one of these images to a handle and
then render that image to the handle of a picture box . . . . .

I'm not sure what image library you are referring to, but if it is
capable of transfering image data to the hDC of a Picture Box as you
say then it is probably creating a bitmap of the image. If so then
you should be able to set the Picture Box Autoredraw property to True
before you perform the transfer to its hDC. You should then be able
to transfer that image to a VB Image Control, something like
Image1.Picture = Picture1.Image. If this free Image Library is really
free then maybe you woulod like to post a link to it and I will
download it and give it a whirl.

By the way, in your original posting you said that you were doing a
sort of "Corel Draw" thing in which you allow the user to move
graphics and text around to suit their own needs and then export the
result out as an image file. I don't want to attempt to teach you
things that you probably already know, but exactly how are you
converting the overall result to an image file? I presume that you
know you will lose a lose a lot of quality if you simply create a
"dump" of the currently displayed total composite image (pictures,
lables containing text etc). If the resultant overall image is for
printing purposes then you would be well advised to create your own
little image format, in which you save the entire "full resolution"
version of each picture and also its intended position and size as
set by the user. Do the same with the Labels, simply recording the
size and position and font etc of the text. Then when you want to
print it out you use PaintPicture on the full picture data,
specifying the desired output size and position. Also, for each item
of text you would output it at the desired size and position as a
standard True Type font using the VB Printer.Print method. This will
give you the best possible overall output resolution.

Don't forget to post a link to the Image Control you are using.

Mike

Everything is working great now, thanks again for the help but I have
one last question for you. Now when moving the image around and
resizing it, etc, the image flickers a lot while its in motion. Is
this just a problem inherint to image boxes or is there something I can
do to fix this? Its a very minor problem and one i'm not really
worried about, but if there is an easy way to fix it, it would look a
bit nicer.

Thanks again!

[Mike Williams]

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:va***************@nwrdny02.gnilink.net...

Everything is working great now, thanks again for the help but
I have one last question for you. Now when moving the image
around and resizing it, etc, the image flickers a lot while its in
motion. Is this just a problem inherint to image boxes or is there
something I can do to fix this? Its a very minor problem and one
i'm not really worried about, but if there is an easy way to fix it

Image controls always flicker when you move them around, because of the way
VB updates it's display of "VB drawn" controls. One simple way to overcome
the problem is to use a Picture Box instead while the "Image" is being
dragged and then replace the Picture Box with an Image Control when the user
stops dragging and releases the mouse button. The problem with this method
is that the Picture Box will appear on top of all other Image Controls while
it is being dragged and will only revert to its correct Z Order when the
user releases the mouse button, whereas your existing Image Control would
drag itself in the correct Z Order at all times. Personally, if you want
full control over everything I would suggest that you don't actually display
any controls at all on the screen (Picture Boxes or Labels or Image
Controls) and instead "draw" each desired item directly onto the Form (with
Autoredraw being set to True). This method is fairly simple to program if
all you want is "rectangular" images (with no transparent sections), but
will require a bit more programming if you want to have irregularly shaped
images. Either way, of course, it would probably be a bit of a major rewrite
of your existing display code, but I think you would find it worth it in the
end.

There are various methods of writing stuff such as this so that you only
ever draw stuff to the sections of the Form that have actually changed, but
on today's machines you will find that it is perfectly feasible to instead
draw the entire Form, including every single image and piece of text, every
time the display changes (for example, when the user drags an object). For
example, for every image and piece of text you could create a borderless
Picture Box of exactly the desired display size and paint or print the image
or text into it (preferably using the API StretchBlt and Text APIs). This
stuff will be very much easier to program if you use a ScaleMode of
vbPixels. These Picture Boxes would all be part of an array of Picture
Boxes, with the Index property value specifying the desired Z Order. You
would also have separate arrays of Longs containing the same number of
elements to specify the initial x and y cordinates (and size if desired) of
each element. You should set the Form's Autoredraw property to True. You
would then call a routine to initialise the display. This routine would
first of all clear the screen or alternatively paint the desired overall
background picture using BitBlt (if you want one) and would then run through
each element of the Picture Box array in turn, using BitBlt to transfer its
contents to the desired area of the Form (as indicated by the positional
arrays). In the MouseClick of the Form you would look at each element of the
"position" and "size" arrays in turn to determine if the Mouseclick x and y
coordinates both lie within the rectangle that it currently occupies on the
Form. The first element that fits the bill is the one that you need to move,
so you set a "Form level" variable accordinbgly to specify its number. Then,
in the MouseMove event you update the appropriate element of the "position"
array according to the x and y values picked up by the MouseMove event.
(This Mousedown and Mousemove code is similar to the code that you already
probably have). The (still in the MouseMove event) you call the "Initialise"
routine again, which will of course clear the display (or renew the
background picture) and then draw each element into position. Because you
have set the Form's Autoredraw property to True all of this stuff will be
drawn into the "unseen" Image property of the Form, and if you are using the
API for all your drawings and text (which I would recommend) then you would
need at this time to use a Form Refresh statement to transfer the entire
drawn composite image into the display. A bit more work is required for
irregularly shaped elements with transparent sections and areas, but it is
certainly possible.

Mike

[Chris Coho, Jr.]

Mike Williams wrote:

"Chris Coho, Jr." <ne*******@mattbooty.com> wrote in message
news:va***************@nwrdny02.gnilink.net...

Everything is working great now, thanks again for the help but
I have one last question for you. Now when moving the image
around and resizing it, etc, the image flickers a lot while its in
motion. Is this just a problem inherint to image boxes or is there
something I can do to fix this? Its a very minor problem and one
i'm not really worried about, but if there is an easy way to fix it

Image controls always flicker when you move them around, because of
the way VB updates it's display of "VB drawn" controls. One simple
way to overcome the problem is to use a Picture Box instead while the
"Image" is being dragged and then replace the Picture Box with an
Image Control when the user stops dragging and releases the mouse
button. The problem with this method is that the Picture Box will
appear on top of all other Image Controls while it is being dragged
and will only revert to its correct Z Order when the user releases
the mouse button, whereas your existing Image Control would drag
itself in the correct Z Order at all times. Personally, if you want
full control over everything I would suggest that you don't actually
display any controls at all on the screen (Picture Boxes or Labels or
Image Controls) and instead "draw" each desired item directly onto
the Form (with Autoredraw being set to True). This method is fairly
simple to program if all you want is "rectangular" images (with no
transparent sections), but will require a bit more programming if you
want to have irregularly shaped images. Either way, of course, it
would probably be a bit of a major rewrite of your existing display
code, but I think you would find it worth it in the end.

There are various methods of writing stuff such as this so that you
only ever draw stuff to the sections of the Form that have actually
changed, but on today's machines you will find that it is perfectly
feasible to instead draw the entire Form, including every single
image and piece of text, every time the display changes (for example,
when the user drags an object). For example, for every image and
piece of text you could create a borderless Picture Box of exactly
the desired display size and paint or print the image or text into it
(preferably using the API StretchBlt and Text APIs). This stuff will
be very much easier to program if you use a ScaleMode of vbPixels.
These Picture Boxes would all be part of an array of Picture Boxes,
with the Index property value specifying the desired Z Order. You
would also have separate arrays of Longs containing the same number
of elements to specify the initial x and y cordinates (and size if
desired) of each element. You should set the Form's Autoredraw
property to True. You would then call a routine to initialise the
display. This routine would first of all clear the screen or
alternatively paint the desired overall background picture using
BitBlt (if you want one) and would then run through each element of
the Picture Box array in turn, using BitBlt to transfer its contents
to the desired area of the Form (as indicated by the positional
arrays). In the MouseClick of the Form you would look at each element
of the "position" and "size" arrays in turn to determine if the
Mouseclick x and y coordinates both lie within the rectangle that it
currently occupies on the Form. The first element that fits the bill
is the one that you need to move, so you set a "Form level" variable
accordinbgly to specify its number. Then, in the MouseMove event you
update the appropriate element of the "position" array according to
the x and y values picked up by the MouseMove event. (This Mousedown
and Mousemove code is similar to the code that you already probably
have). The (still in the MouseMove event) you call the "Initialise"
routine again, which will of course clear the display (or renew the
background picture) and then draw each element into position. Because
you have set the Form's Autoredraw property to True all of this stuff
will be drawn into the "unseen" Image property of the Form, and if
you are using the API for all your drawings and text (which I would
recommend) then you would need at this time to use a Form Refresh
statement to transfer the entire drawn composite image into the
display. A bit more work is required for irregularly shaped elements
with transparent sections and areas, but it is certainly possible.

Mike

Thanks again, I will keep this in mind as a possible "upgrade" for
future versions once I have the needed functionality in place.