Transparent linear gradient for image?

Just starting out? Need help? Post your questions and find answers here.
damn
New User
New User
Posts: 4
Joined: Wed Mar 07, 2018 11:12 am

Transparent linear gradient for image?

Post by damn »

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?
User avatar
STARGÅTE
Addict
Addict
Posts: 1748
Joined: Thu Jan 10, 2008 1:30 pm
Location: Germany, Glienicke
Contact:

Re: Transparent linear gradient for image?

Post by STARGÅTE »

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
PB 5.73 ― Win 10, 20H2 ― Ryzen 9 3900X ― Radeon RX 5600 XT ITX ― Vivaldi 5.0 ― www.unionbytes.de
Lizard - Script language for symbolic calculations and moreTypeface - Sprite-based font include/module
damn
New User
New User
Posts: 4
Joined: Wed Mar 07, 2018 11:12 am

Re: Transparent linear gradient for image?

Post by damn »

Great! Some little revision and it is what it need. Thx!
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4227
Joined: Sun Apr 12, 2009 6:27 am

Re: Transparent linear gradient for image?

Post by RASHAD »

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
Egypt my love
Post Reply