0

I hope that somebody can help me with semitransparent image with text on it. Here is my problem.

I've a main form with GIF on it (for example). I need to show semi transparent background over that main form and have some dynamic text on it.

Main form is ok. I've created a second form with this options:

AlphaBlend: True AlphaBlendValue: 120 BorderStyle: bsNone Color: clYellow TransparentColor: True TransparentColorValue: clYellow

On that form I have an image component with these properties:

Align: alClient Transparent: True;

The picture that is loaded is .bmp with the top part shape of the bow (semitransparent). Other parts of the image are not transparent and have Yellow background;

On second form I have also a label with text.

Color: clYellow Transparent: True

The background looks OK on the second form. I can see GIF in the background that is moving.

But the text on the form is barely visible. I know that reason is that AlphaBlendValue is applied to the label and text in it.

enter image description here

How can I get text that is fully visible?

It doesn't have to be in this way that I'm trying to achieve.

Here is the main form.

object Form1: TForm1
Left = 0
Top = 0
Caption = 'Form1'
ClientHeight = 861
ClientWidth = 1384
Color = clBtnFace
Font.Charset = DEFAULT_CHARSET
Font.Color = clHighlightText
Font.Height = -11
Font.Name = 'Tahoma'
Font.Style = []
OldCreateOrder = False
Position = poDesktopCenter
OnCreate = FormCreate
PixelsPerInch = 96
TextHeight = 13
    object imgGif: TImage
    Left = 660
    Top = 399
    Width = 505
    Height = 273
Picture.Data = {
    0954474946496D616765474946383961F4010D01F700000704010D0E070B0A0C
    ...............}
end
object Button3: TButton
Left = 1032
Top = 776
Width = 75
Height = 25
Caption = 'Button3'
TabOrder = 5
OnClick = Button3Click
end
end

Here is the semitransparentform.

object Form3: TForm3
Left = 0
Top = 0
AlphaBlend = True
AlphaBlendValue = 120
BorderStyle = bsNone
Caption = 'Form3'
ClientHeight = 73
ClientWidth = 1531
Color = clYellow
TransparentColor = True
TransparentColorValue = clYellow
Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText
Font.Height = -11
Font.Name = 'Tahoma'
Font.Style = []
OldCreateOrder = False
Position = poOwnerFormCenter
OnCreate = FormCreate
OnShow = FormShow
PixelsPerInch = 96
TextHeight = 13
object Image1: TImage
Left = 0
Top = 0
Width = 1531
Height = 73
Align = alClient
Picture.Data = {
    07544269746D61708ED20600424D8ED20600000000004200000028000000FB05
    ..........................}
Transparent = True
end
object Label1: TLabel
Left = 632
Top = 0
Width = 204
Height = 56
Caption = 'YOU ARE WELCOME'
Font.Charset = DEFAULT_CHARSET
Font.Color = clHighlightText
Font.Height = -43
Font.Name = 'BStyle'
Font.Style = [fsBold]
ParentFont = False
end
end

enter image description here

Thanks...

brane
  • 41
  • 6
  • Please provide code to reproduce. In this case the `.dfm` is important to be sure to have the same setup us you have, as a beginning. – Tom Brunberg Sep 25 '22 at 17:20
  • When you change `AlphaBllendValue` of your second form this means that entire form is being rendered with partial Alpha Blend transparency. That is why your text is also being partially transparent. – SilverWarior Sep 25 '22 at 18:03
  • I know that that is a reason but is there any workaround or any other way to get result that I need? – brane Sep 25 '22 at 19:01
  • I'm not really happy to suggest this, but using three (!) forms you can achieve the visual effect: 1) The main form with the video as you already have. 2) a form that provides the shade effect, e.g. with AlphaBlend as you already have. 3) a third form that is transparent (`TransparentColor` and `TransparentColorValue`) with the text. The challenge is to keep these forms synchronized w.r.t. moving, size change, minimizing/restoring etc. Look at [this answer](https://stackoverflow.com/a/14464315/22927229) for inspiration. – Tom Brunberg Sep 25 '22 at 19:13
  • 1
    It's really wrong to use windows for this. Use OpenGL or DirectX. – Andreas Rejbrand Sep 25 '22 at 20:22
  • 1
    Btw, the code you show indicates VCL, but in case you could use FMX, the task would be really simple with just a panel (`Opacity` set to e.g., 0.5) and a `TLabel` (opacity set to 1), on top of a `TVideoPlayer`. The `TVideoPlayer` doesn't play GIF files though. – Tom Brunberg Sep 25 '22 at 21:16
  • 1
    It might be worth checking out [Skia4Delphi](https://github.com/skia4delphi/skia4delphi) which is available for both VCL and FMX. I think that you can do semi-transparent text, although I've never tried it. It says that it can handle animated .gif files too, which I've had in mind to try as a .gif solution in FMX. – Philip J. Rayment Sep 26 '22 at 03:36
  • Let me clarify my problem. I provided the gif only as an example. In fact, images are drawn directly on the canvas of the main form. 70+ FPS. The position of the message with semi-transparent position is always the same. This proposal with two forms is an option. This is only 1% of the application code so switching to FMX is not an option. Would try to avoid additional libraries. Not sure how you would handle this with DirectX or OpenGL. – brane Sep 27 '22 at 04:07
  • I could try to write a message on the image (each column is drawn separately) before drawing it on the main form, but due to the high FPS there is already a trace of how the columns move up. What about layered windows? In the question, I posted a new picture for example. – brane Sep 27 '22 at 04:09

1 Answers1

0

If you need to do some complex graphic rendering, than you should use some modern graphics library. One of good options will be Vcl.Direct2D.TDirect2DCanvas, but there are also third party options, like Skia4Delphi. If you want to display your graphic on top of some video, than you will have to get frames of that video as images, and then draw them using the same library, that you use for everything else.

Torbins
  • 2,111
  • 14
  • 16