Blur with clean color in transparent control (GDI +)

[Webarion]

Friends hello! Help me please! I have a control with a transparent background, in which a red rectangle is drawn. How to blur this rectangle, so that the edges are not gray.
Below example. The left rectangle is blurred over the transparent background, the right rectangle, blurred over the white background. It is necessary that in the left, the result was similar to the right. But in the left, the edges should remain transparent. Under control can be any picture and it will move.
 

expandcollapse popup

#include <GUIConstantsEx.au3>
#include <GDIPlus.au3>

#include <WinApi.au3>

Local $hForm = GUICreate('', 300, 160)
Local $iPic1 = GUICtrlCreatePic('', 20, 20, 140, 140)
Local $iPic2 = GUICtrlCreatePic('', 160, 20, 140, 140)
GUICtrlSetResizing($iPic1, $GUI_DOCKALL)
GUICtrlSetResizing($iPic2, $GUI_DOCKALL)

_GDIPlus_Startup()

; Left rectangle. Pouring on transparency
Local $hImage1 = _GDIPlus_BitmapCreateFromScan0(120, 120, $GDIP_PXF32ARGB)
Local $hGraphic = _GDIPlus_ImageGetGraphicsContext($hImage1)
Local $hBrush = _GDIPlus_BrushCreateSolid(0xFFFF0000)
_GDIPlus_GraphicsFillRect($hGraphic, 20, 20, 80, 80, $hBrush)
_GDIPlus_BrushDispose($hBrush)
_GDIPlus_GraphicsDispose($hGraphic)
Local $hEffect = _GDIPlus_EffectCreateBlur(10)
_GDIPlus_BitmapApplyEffect($hImage1, $hEffect)
_GDIPlus_EffectDispose($hEffect)

;Right rectangle. Filling in color
Local $hImage2 = _GDIPlus_BitmapCreateFromScan0(120, 120, $GDIP_PXF32ARGB)
Local $hGraphic = _GDIPlus_ImageGetGraphicsContext($hImage2)
_GDIPlus_GraphicsClear($hGraphic, 0xFFFFFFFF)
Local $hBrush = _GDIPlus_BrushCreateSolid(0xFFFF0000)
_GDIPlus_GraphicsFillRect($hGraphic, 20, 20, 80, 80, $hBrush)
_GDIPlus_BrushDispose($hBrush)
_GDIPlus_GraphicsDispose($hGraphic)
Local $hEffect = _GDIPlus_EffectCreateBlur(10)
_GDIPlus_BitmapApplyEffect($hImage2, $hEffect)
_GDIPlus_EffectDispose($hEffect)


Local $hBitmap1 = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage1)
Local $hBitmap2 = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage2)
GUICtrlSendMsg($iPic1, 0x0172, 0, $hBitmap1)
GUICtrlSendMsg($iPic2, 0x0172, 0, $hBitmap2)
_WinAPI_DeleteObject($hBitmap1)
_WinAPI_DeleteObject($hBitmap2)
_GDIPlus_ImageDispose($hImage1)
_GDIPlus_ImageDispose($hImage2)

GUISetState()

Do
Until GUIGetMsg() = $GUI_EVENT_CLOSE

_GDIPlus_Shutdown()

 

[UEZ]

That not possible the way you are trying because the edges of the red rectangle will become semi transparent and mixed with the background image which is black. Thus you will see the black border around the red rectangle.

You have to clear the background of the left graphic handle with the background color of the GUI - in this case &hFFF0F0F0 - before you draw the red rectangle.

[Webarion]

1 hour ago, UEZ said:

That not possible the way you are trying because the edges of the red rectangle will become semi transparent and mixed with the background image which is black. Thus you will see the black border around the red rectangle.

You have to clear the background of the left graphic handle with the background color of the GUI - in this case &hFFF0F0F0 - before you draw the red rectangle.

I wonder how then a browser makes it. Is it really copied by the background located under the block. I want to make a similarity of Box-Shadow, like a browser.

[UEZ]

In this case you have to use two separate bitmaps. 1st one is the background, 2nd one the blurred rectangle. Then copy 2nd bitmap over 1st bitmap.

Something like this here:

expandcollapse popup

#include <GUIConstantsEx.au3>
#include <GDIPlus.au3>
#include <InetConstants.au3>
#include <WinApi.au3>

Local $hForm = GUICreate('', 300, 160)
Local $iPic1 = GUICtrlCreatePic('', 20, 20, 140, 140)
Local $iPic2 = GUICtrlCreatePic('', 160, 20, 140, 140)
GUICtrlSetResizing($iPic1, $GUI_DOCKALL)
GUICtrlSetResizing($iPic2, $GUI_DOCKALL)

_GDIPlus_Startup()

Local $hImage_net = _GDIPlus_BitmapCreateFromMemory(InetRead("https://www.webfx.com/blog/images/cdn.designinstruct.com/files/235-stars_pattern_textures/stars_pattern_texture_12_orange_orange_duo_preview.jpg"))
Local $hImage_resized = _GDIPlus_ImageResize($hImage_net, 120, 120)
_GDIPlus_ImageDispose($hImage_net)

; Left rectangle. Pouring on transparency
Local $hImage1 = _GDIPlus_BitmapCreateFromScan0(120, 120, $GDIP_PXF32ARGB)
Local $hGraphic = _GDIPlus_ImageGetGraphicsContext($hImage1)
Local $hBrush = _GDIPlus_BrushCreateSolid(0xFFFF0000)
_GDIPlus_GraphicsFillRect($hGraphic, 20, 20, 80, 80, $hBrush)
_GDIPlus_GraphicsDispose($hGraphic)

Local $hImage1_blurred = Blur_Simple($hImage1)

;~ Local $hEffect = _GDIPlus_EffectCreateBlur(10)
;~ _GDIPlus_BitmapApplyEffect($hImage1, $hEffect)
;~ _GDIPlus_EffectDispose($hEffect)

$hGraphic = _GDIPlus_ImageGetGraphicsContext($hImage_resized)
_GDIPlus_GraphicsDrawImageRect($hGraphic, $hImage1_blurred, 0, 0, 120, 120)
_GDIPlus_GraphicsDispose($hGraphic)

;Right rectangle. Filling in color
Local $hImage2 = _GDIPlus_BitmapCreateFromScan0(120, 120, $GDIP_PXF32ARGB)
$hGraphic = _GDIPlus_ImageGetGraphicsContext($hImage2)
_GDIPlus_GraphicsClear($hGraphic, 0xFFF0F0F0)
_GDIPlus_GraphicsFillRect($hGraphic, 20, 20, 80, 80, $hBrush)
_GDIPlus_GraphicsDispose($hGraphic)

Local $hEffect = _GDIPlus_EffectCreateBlur(10)
_GDIPlus_BitmapApplyEffect($hImage2, $hEffect)
_GDIPlus_EffectDispose($hEffect)


Local $hBitmap1 = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage_resized)
Local $hBitmap2 = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage2)
GUICtrlSendMsg($iPic1, 0x0172, 0, $hBitmap1)
GUICtrlSendMsg($iPic2, 0x0172, 0, $hBitmap2)
_WinAPI_DeleteObject($hBitmap1)
_WinAPI_DeleteObject($hBitmap2)
_GDIPlus_ImageDispose($hImage1_blurred)
_GDIPlus_ImageDispose($hImage2)
_GDIPlus_ImageDispose($hImage2)

GUISetState()

Do
Until GUIGetMsg() = $GUI_EVENT_CLOSE

_GDIPlus_Shutdown()

Func Blur_Simple($hBitmap, $iBlur = 0.09, $iInterpolationMode = 0)
    Local Const $iSW = _GDIPlus_ImageGetWidth($hBitmap), $iSH = _GDIPlus_ImageGetHeight($hBitmap)
    Local Const $fDW = $iSW / $iBlur, $fDH = $iSH / $iBlur

    Local Const $hBmp1 = _GDIPlus_BitmapCreateFromScan0($fDW, $fDH)
    Local $hCtx = _GDIPlus_ImageGetGraphicsContext($hBmp1)
    _GDIPlus_GraphicsSetInterpolationMode($hCtx, $iInterpolationMode)
    _GDIPlus_GraphicsDrawImageRectRect($hCtx, $hBitmap, 0, 0, $fDW, $fDH, 0, 0, $iSW, $iSH)
    _GDIPlus_GraphicsDispose($hCtx)

    Local Const $hBmp2 = _GDIPlus_BitmapCreateFromScan0($iSW, $iSH)
    _GDIPlus_GraphicsSetInterpolationMode($hCtx, $iInterpolationMode)
    $hCtx = _GDIPlus_ImageGetGraphicsContext($hBmp2)

    _GDIPlus_GraphicsDrawImageRectRect($hCtx, $hBmp1, 0, 0, $iSW, $iSH, 0, 0, $fDW, $fDH)
    _GDIPlus_GraphicsDispose($hCtx)
    _GDIPlus_BitmapDispose($hBmp1)
    Return $hBmp2
EndFunc

 

Result:

Edited April 27, 2021 by UEZ