AlphaBlend

[aeff]

saludos, como indica el título de este post mi duda es relacionada con esta API, lo que quiero lograr es opacidad entre dos Bitmaps, tengo una referencia implementada para C++ y cuando intento llevarla a Pascal usando Delphi no me funciona absolutamente nada, en realidad no tengo ni idea de que hace realmente con los objetos en juego, si alguien ya tiene alguna experiencia con esta API les pido que me den una mano, aquí les va la referencia quie tengo pero para C++,

void DrawAlphaBlend (HWND hWnd, HDC hdcwnd)
{
    HDC hdc;                          // handle of the DC we will create 
    BLENDFUNCTION bf;         // structure for alpha blending
    HBITMAP hbitmap;           // bitmap handle
    BITMAPINFO bmi;           // bitmap header
    VOID *pvBits;                // pointer to DIB section
    ULONG   ulWindowWidth, ulWindowHeight;      // window width/height
    ULONG   ulBitmapWidth, ulBitmapHeight;      // bitmap width/height
    RECT    rt;                   // used for getting window dimensions
    UINT32   x,y;              // stepping variables
    UCHAR ubAlpha;         // used for doing transparent gradient
UCHAR ubRed;        
    UCHAR ubGreen;
    UCHAR ubBlue;
    float fAlphaFactor;       // used to do premultiply

    // get window dimensions
    GetClientRect(hWnd, &rt);

    // calculate window width/height
    ulWindowWidth = rt.right - rt.left;  
    ulWindowHeight = rt.bottom - rt.top;  

    // make sure we have at least some window size
    if ((!ulWindowWidth) || (!ulWindowHeight))
        return;

    // divide the window into 3 horizontal areas
    ulWindowHeight = ulWindowHeight / 3;

    // create a DC for our bitmap -- the source DC for AlphaBlend 
    hdc = CreateCompatibleDC(hdcwnd);

    // zero the memory for the bitmap info
    ZeroMemory(&bmi, sizeof(BITMAPINFO));

    // setup bitmap info 
    // set the bitmap width and height to 60% of the width and height of each of the three horizontal areas. Later on, the blending will occur in the center of each of the three areas.
    bmi.bmiHeader.biSize = sizeof(BITMAPINFOHEADER);
    bmi.bmiHeader.biWidth = ulBitmapWidth = ulWindowWidth - (ulWindowWidth/5)*2;
    bmi.bmiHeader.biHeight = ulBitmapHeight = ulWindowHeight - (ulWindowHeight/5)*2;
    bmi.bmiHeader.biPlanes = 1;
    bmi.bmiHeader.biBitCount = 32;         // four 8-bit components
    bmi.bmiHeader.biCompression = BI_RGB;
    bmi.bmiHeader.biSizeImage = ulBitmapWidth * ulBitmapHeight * 4;

    // create our DIB section and select the bitmap into the dc
    hbitmap = CreateDIBSection(hdc, &bmi, DIB_RGB_COLORS, &pvBits, NULL, 0x0);
    SelectObject(hdc, hbitmap);

    // in top window area, constant alpha = 50%, but no source alpha
    // the color format for each pixel is 0xaarrggbb 
    // set all pixels to blue and set source alpha to zero
for (y = 0; y < ulBitmapHeight; y++)
for (x = 0; x < ulBitmapWidth; x++)
            ((UINT32 *)pvBits)[x + y * ulBitmapWidth] = 0x000000ff; 

    bf.BlendOp = AC_SRC_OVER;
    bf.BlendFlags = 0;
    bf.SourceConstantAlpha = 0x7f;  // half of 0xff = 50% transparency
    bf.AlphaFormat = 0;             // ignore source alpha channel

    if (!AlphaBlend(hdcwnd, ulWindowWidth/5, ulWindowHeight/5, 
                    ulBitmapWidth, ulBitmapHeight, 
                    hdc, 0, 0, ulBitmapWidth, ulBitmapHeight, bf))
        return;                     // alpha blend failed

    // in middle window area, constant alpha = 100% (disabled), source 
    // alpha is 0 in middle of bitmap and opaque in rest of bitmap 
for (y = 0; y < ulBitmapHeight; y++)
for (x = 0; x < ulBitmapWidth; x++)
            if ((x > (int)(ulBitmapWidth/5)) && (x < (ulBitmapWidth-ulBitmapWidth/5)) &&
                (y > (int)(ulBitmapHeight/5)) && (y < (ulBitmapHeight-ulBitmapHeight/5)))
                //in middle of bitmap: source alpha = 0 (transparent).
                // This means multiply each color component by 0x00.
                // Thus, after AlphaBlend, we have a, 0x00 * r, 
                // 0x00 * g,and 0x00 * b (which is 0x00000000)
                // for now, set all pixels to red
                ((UINT32 *)pvBits)[x + y * ulBitmapWidth] = 0x00ff0000; 
            else
                // in the rest of bitmap, source alpha = 0xff (opaque) 
                // and set all pixels to blue 
                ((UINT32 *)pvBits)[x + y * ulBitmapWidth] = 0xff0000ff; 
            endif;

    bf.BlendOp = AC_SRC_OVER;
    bf.BlendFlags = 0;
    bf.AlphaFormat = AC_SRC_ALPHA;  // use source alpha 
    bf.SourceConstantAlpha = 0xff;  // opaque (disable constant alpha)

    if (!AlphaBlend(hdcwnd, ulWindowWidth/5, ulWindowHeight/5+ulWindowHeight, ulBitmapWidth, ulBitmapHeight, hdc, 0, 0, ulBitmapWidth, ulBitmapHeight, bf))
        return;

    // bottom window area, use constant alpha = 75% and a changing
    // source alpha. Create a gradient effect using source alpha, and 
    // then fade it even more with constant alpha
    ubRed = 0x00;
    ubGreen = 0x00;
    ubBlue = 0xff;

for (y = 0; y < ulBitmapHeight; y++)
for (x = 0; x < ulBitmapWidth; x++)
        {
            // for a simple gradient, base the alpha value on the x 
            // value of the pixel 
            ubAlpha = (UCHAR)((float)x / (float)ulBitmapWidth * 255);
            //calculate the factor by which we multiply each component
            fAlphaFactor = (float)ubAlpha / (float)0xff; 
            // multiply each pixel by fAlphaFactor, so each component 
            // is less than or equal to the alpha value.
            ((UINT32 *)pvBits)[x + y * ulBitmapWidth] 
= (ubAlpha << 24) |                       //0xaa000000
                 ((UCHAR)(ubRed * fAlphaFactor) << 16) |  //0x00rr0000
((UCHAR)(ubGreen * fAlphaFactor) << 8) | //0x0000gg00
                 ((UCHAR)(ubBlue   * fAlphaFactor));      //0x000000bb
        }

    bf.BlendOp = AC_SRC_OVER;
    bf.BlendFlags = 0;
    bf.AlphaFormat = AC_SRC_ALPHA;   // use source alpha 
    bf.SourceConstantAlpha = 0xbf;   // use constant alpha, with 
                                     // 75% opaqueness

    AlphaBlend(hdcwnd, ulWindowWidth/5, 
               ulWindowHeight/5+2*ulWindowHeight, ulBitmapWidth, 
               ulBitmapHeight, hdc, 0, 0, ulBitmapWidth, 
               ulBitmapHeight, bf);

    // do cleanup
    DeleteObject(hbitmap);
    DeleteDC(hdc);

}

no tengo idea de como hacer funcionar esta API,

mil gracias de antemano colega,
espero que me puedan ayudar.

saludos!
aeff!

[[cHackAll]]

SemiPanel.pas

Empezado por cHackAll

Código Delphi [-]
//...
 
 Times := 255 - FAlphaBlendValue;
 if Times <> 0 then
  begin
   y := Height;
   repeat Dec(y);
    lpByte := Pointer(Cardinal(FBitmap.ScanLine[Top + y]) + (Left * 3));
    lpImage := nil;
    if y < FImage.Height then
     begin
      lpImage := FImage.ScanLine[y];
      Max := FImage.Width * 3;
     end;
    x := Width * 3;
    repeat Dec(x);
     if not Assigned(lpImage) then
      begin
       Value := lpByte^ + Times;
       if Value > 255 then
        Value := 255;
       lpByte^ := Value;
      end
     else
      begin
       Value := Abs(lpByte^ - lpImage^);
       if Value <> 0 then
        begin
         if Value > Times then
          Value := Times;
         if lpByte^ < lpImage^ then
          Inc(lpByte^, Value)
         else
          Dec(lpByte^, Value);
        end;
       Inc(lpImage);
       Dec(Max);
       if Max = 0 then
        lpImage := nil;
      end;
     Inc(lpByte);
    until x = 0;
   until (y = 0) or ((Top + y) = 0);
  end;
 
//...

[aeff]

saludos, colega, el código que me planteas realmente no lo entiendo, mira, yo soy un novat en este mundo de la programación con gráficos y Dispositivos de Contextos (DC), no se que me quieres dar a entender, mira, esta cita creo que fue sacada de un foro para los miembros millenium ¿verdad?, y yo no pertenezco a esta categoría por razones ajenas a este foro, mira, si pudieras darme una explicación más detallada realmente estaría muy agradecido, mi objetivo es lograr opacidad entre dos Bitmaps o al menos entender esta API y lograrla hacerla funcionar.

me puedes ayudar??
mil gracias de antemano!
saludos!
aeff!

[aeff]

bueno, existe una implementación de un componente en ese foro, el [TSemiPanel], ¿no?, funciona perfectamente, ahora, me puedes explicar el funcionamiento básico de esta función que logra la opacidad, es decir, en parte ando buscando una explicación en pseudocódigo, porque realmente no entiendo nada de nada de estas operaciones.

mil gracias de antemano!
saludos!
aeff!

[[Lepe]]

Conociendo el código que postea cHackAll, la explicación puede durar años

Si te consuela, yo tampoco entiendo el código, tendría que estudiarlo durante días

Saludos

[[cHackAll]]

Empezado por aeff

...esta cita creo que fue sacada de un foro para los miembros millenium ¿verdad?...

Empezado por aeff

...me puedes explicar el funcionamiento básico de esta función que logra la opacidad...

Claro, es bien sabido que por cada pixel existe un R (rojo), G (verde) y B (azul)... estos valores los obtienes con GetRValue(Canvas.Pixels[0, 0]) (por ejemplo).

Ahora, cada imagen estaría compuesta (en el mejor de los casos) por una matriz de pixeles X * Y, cada una de 24 bits (8 del R, 8 del G y 8 del B ).

Para "mezclar" dos pixeles debes promediar cada R, G y B

Sí;
 
R1 = 10, G1 = 10, B1 = 10
R2 = 250, G2 = 250, B2 = 0
 
entonces;
 
R =  (10 + 250) / 2 = 130
G =  (10 + 250) / 2 = 130
B =  (10 + 0) / 2 = 5

Puedes variar el método de promediado para obtener el resultado tal como con TSemiPanel mostrado anteriormente.

Lee tambien.

Saludos

[aeff]

saludos, cHackAll, me alegra me hallas respondido colega, hasta el momento se me van aclarando las dudas, pero a la vez se me van ocurriendo más, en una de las explicaciones que planteas dentro del enlace que me recomendaste publicas lo siguiente:

 x = ((x1 / MAX(x)) * ((Alpha / MAX(Alpha)) * MAX(x)) + x2) / 2


Donde:
 x = Resultado
 x1 = R, G o B del pixel de la imagen
 x2 = R, G o B del pixel de fondo
 Alpha = valor "Alpha channel"
 MAX(x) = valor maximo de x
 MAX(Alpha) = valor máximo de Alpha

entonces, ¿está es la ecuación que determina la mezcla entre los canales de un pixel para provocar lo que llamamos AlphaBlend?, bueno de todas formas, quisiera que me explicaras los parámetros MAX(x) y MAX(Alpha),

mil gracias de antemano colega.

saludos!
aeff!

[[cHackAll]]

Empezado por aeff

...¿está es la ecuación que determina la mezcla entre los canales de un pixel para provocar lo que llamamos AlphaBlend?...

Es la ecuación a la que yo llegue en aquel entonces (del post), es basicamente una regla de 3 simple

Empezado por aeff

...quisiera que me explicaras los parámetros MAX(x) y MAX(Alpha)...

Empezado por cHackAll

 MAX(x) = valor maximo de x
 MAX(Alpha) = valor máximo de Alpha

MAX(x) segun dicha ecuacion sería 255 (máximo de R, G & B) y
MAX(Alpha) podría ser 100 siempre y cuando Alpha sea el porcentaje.

PD; La ecuacion esta pensada para un proceso generico, sin embargo el #2 y el #6 son mas concretos al caso.

Saludos

[aeff]

saludos!

mira colega, anteriormente mencionas:

...Para "mezclar" dos pixeles debes promediar cada R, G y B...

y se me ha ocurrido una idea matemáticamente para promediar los canales R, G y B entonces, la idea consiste en lo siguiente, por cada canal, R y R', G y G', B y B', suponiendo que:

R = Red fuente;
G = Green fuente;
B = Blue fuente
y
R' = Red destino;
G' = Green destino;
B' = Blue destino;

calculamos la diferencia entre el canal destino y el original (ya que necesito saber cuanto le falta a uno para llegar a otro), por ejemplo: R' - R; a esta diferencia le hallamos el X% que representaría el valor del Alpha de 0 a 100, y le adicionamos al valor R este X%:

programáticamente sería asi, una función:

Código Delphi [-]
function GetNewChanel(X1, X2, Alpha: Byte): Byte;
var
  Diff: Integer;
  Percent: Real;
  nX: Byte;
begin
  Diff := X2 - X1;
  Percent := (Diff * Alpha) / 100;
  nX := X1;
  nX := nX + Trunc(Percent);
  Result := nX;
end;

ahora, esta implementación da como resultado el promedio dado por Alpha entre dos canales, y esta otra función para mezclar todos los canales de un área:

Código Delphi [-]
type TPercent = 0..100;
type TArea = record
  Left, Top, Width, Height: Integer;
end;

function  Area(aLeft, aTop, aWidth, aHeight: Integer): TArea;
begin
  Result.Left := aLeft;     Result.Top := aTop;
  Result.Width := aWidth;   Result.Height := aHeight;
end;

procedure ABlendArea(pCanvas1, pCanvas2: TCanvas; pArea: TArea; pAlpha: TPercent; var pCanvasDest: TCanvas);
var
  X, Y: Integer;
  R, G, B, _R, _G, _B, newR, newG, newB: Byte;
begin
  Y := pArea.Top;
  while Y <= pArea.Height do
    begin
      for X := pArea.Left to pArea.Width do
        begin
          R := GetRValue(pCanvas1.Pixels[X, Y]);
          G := GetGValue(pCanvas1.Pixels[X, Y]);
          B := GetBValue(pCanvas1.Pixels[X, Y]);

          _R := GetRValue(pCanvas2.Pixels[X, Y]);
          _G := GetGValue(pCanvas2.Pixels[X, Y]);
          _B := GetBValue(pCanvas2.Pixels[X, Y]);

          newR := GetNewChanel(R, _R, pAlpha);
          newG := GetNewChanel(G, _G, pAlpha);
          newB := GetNewChanel(B, _B, pAlpha);

          pCanvasDest.Pixels[X, Y] := RGB(newR, newG, newB);
        end;
      Inc(Y);
    end;
end;

sin embargo, necesito la ayuda de ustedes para que me ayuden a optimizar el código, ¿de que forma puedo hacer que funcione más rápido?

mil gracias de antemano!
saludos!
aeff!

[aeff]

es decir, algún método para que el Canvas deje de pintar mientras cambio el valor de sus pixeles y luego que aplique los cambios????

saludos!

[[escafandra]]

Claro, estas trabajando con Canvas.Pixels[X, Y] para acceder a cada pixel, eso es muy lento cuando trabajas con toda la imagen. cHackAll en su ejemplo te muestra como acceder a un puntero que apunta a los pixels de una línea

Código Delphi [-]
lpByte := Pointer(Cardinal(FBitmap.ScanLine[Top + y]) + (Left * 3));

Así sólo tabajas en memoria y ganas tiempo.

En este hilo, encontrarás cómo llegar a la imagen en memoria de un bitmap, concretamente aquí.

Saludos.