PureBasic Forums - English

Posted: **Wed May 25, 2022 10:36 am**

Hi all!

I have a some problem.

I need to set transparent linear gradient on image, from solid to transparent. This is possible? And if it, how I can do this?

Posted: **Wed May 25, 2022 12:23 pm**

You can use a CustomFilterCallback.
Here, you can draw the image with a specified gradient in the alpha channel.

Code: Select all

Enumeration
	#Window
	#Image1
	#Image2
EndEnumeration

Procedure.l TransparentLinearGradient(X.i, Y.i, SourceColor.l, TargetColor.l)
	
	Protected Alpha.a = 255.0 * X / OutputWidth()  ; Gradient along X from 0 to 255
	
	ProcedureReturn SourceColor & $FFFFFF | Alpha << 24
	
EndProcedure


InitNetwork()
UseJPEGImageDecoder()

CatchImage(#Image1, ReceiveHTTPMemory("http://data.unionbytes.de/convergence_by_rahll.jpg")) ; Load an Image

CreateImage(#Image2, ImageWidth(#Image1), ImageHeight(#Image1), 32, #PB_Image_Transparent) ; Same image with a Gradient
If StartDrawing(ImageOutput(#Image2))
	DrawingMode(#PB_2DDrawing_CustomFilter)
	CustomFilterCallback(@TransparentLinearGradient())
	DrawImage(ImageID(#Image1), 0, 0)
	StopDrawing()
EndIf


OpenWindow(#Window, 0, 0, ImageWidth(#Image1)+ImageWidth(#Image2), ImageHeight(#Image1), "Linear Gradient", #PB_Window_ScreenCentered|#PB_Window_MinimizeGadget)
ImageGadget(#PB_Any, 0, 0, ImageWidth(#Image1), ImageHeight(#Image1), ImageID(#Image1))
ImageGadget(#PB_Any, ImageWidth(#Image1), 0, ImageWidth(#Image2), ImageHeight(#Image2), ImageID(#Image2))

Repeat
	
	Select WindowEvent()
		Case #PB_Event_CloseWindow
			Break
	EndSelect
	
ForEver

End

Posted: **Wed May 25, 2022 5:01 pm**

Great! Some little revision and it is what it need. Thx!

Posted: **Wed May 25, 2022 5:24 pm**

Another approach

Code: Select all

Enumeration
	#Window
	#Image1
	#Image2
EndEnumeration

InitNetwork()
UseJPEGImageDecoder()

CatchImage(#Image1, ReceiveHTTPMemory("http://data.unionbytes.de/convergence_by_rahll.jpg")) ; Load an Image
CreateImage(#Image2, ImageWidth(#Image1), ImageHeight(#Image1), 32, #PB_Image_Transparent)
StartVectorDrawing( ImageVectorOutput(#Image2))
  VectorSourceLinearGradient(0, 0, ImageWidth(#Image1), ImageHeight(#Image1))
  VectorSourceGradientColor(RGBA(255, 0, 0, 255), 0.0)
  VectorSourceGradientColor(RGBA(0, 255, 0, 255), 0.5)
  VectorSourceGradientColor(RGBA(0, 0, 255, 255), 1.0)  
  AddPathBox(0, 0,ImageWidth(#Image1), ImageHeight(#Image1))
  FillPath()
StopVectorDrawing()

If StartVectorDrawing( ImageVectorOutput(#Image2))
	DrawVectorImage(ImageID(#Image1),128)
	BeginVectorLayer(200)
	  DrawVectorImage(ImageID(#Image2))
	EndVectorLayer()
	StopVectorDrawing()
EndIf

OpenWindow(#Window, 0, 0, ImageWidth(#Image1)+ImageWidth(#Image2), ImageHeight(#Image1), "Linear Gradient", #PB_Window_ScreenCentered|#PB_Window_MinimizeGadget)
ImageGadget(#PB_Any, 0, 0, ImageWidth(#Image1), ImageHeight(#Image1), ImageID(#Image1))
ImageGadget(#PB_Any, ImageWidth(#Image1), 0, ImageWidth(#Image2), ImageHeight(#Image2), ImageID(#Image2))

Repeat
	
	Select WindowEvent()
		Case #PB_Event_CloseWindow
			Break
	EndSelect
	
ForEver

End

PureBasic Forums - English

Transparent linear gradient for image?

Transparent linear gradient for image?

Re: Transparent linear gradient for image?

Re: Transparent linear gradient for image?

Re: Transparent linear gradient for image?