Jump to content
Webarion

Blur with clean color in transparent control (GDI +)

Recommended Posts

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.
 

#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()

 

W9ofbPOmY8.png

Share this post


Link to post
Share on other sites

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.


Please don't send me any personal message and ask for support! I will not reply!

Selection of finest graphical examples at Codepen.io

The own fart smells best!
Her 'sikim hıyar' diyene bir avuç tuz alıp koşma!
¯\_(ツ)_/¯  ٩(●̮̮̃•̃)۶ ٩(-̮̮̃-̃)۶ૐ

Share this post


Link to post
Share on other sites
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.

1a7kuNMYKP.png

Share this post


Link to post
Share on other sites
Posted (edited)

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:

#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:

Test.jpg

Edited by UEZ

Please don't send me any personal message and ask for support! I will not reply!

Selection of finest graphical examples at Codepen.io

The own fart smells best!
Her 'sikim hıyar' diyene bir avuç tuz alıp koşma!
¯\_(ツ)_/¯  ٩(●̮̮̃•̃)۶ ٩(-̮̮̃-̃)۶ૐ

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...