Abgerundete Ecken (Images)

[Delle]

Hallo,

hat jemand eine Idee wie man die Ecken von Images "abgerundet" darstellen kann?

Möglichst mit Antialiasing und nicht mit pixeligen Ecken?

Eventuell auf das Image 4 "fertige" Ecken mit Alpha legen und das abspeichern?

Danke,
Delle

[STARGÅTE]

Eventuell auf das Image 4 "fertige" Ecken mit Alpha legen und das abspeichern?

Jo, so, oder selber, den Alpha-Kanel an den Ecken auf 0 setzen.

Damit es noch etwas geglättet wird, wäre dann ein CustomFilterCallback nötig:
RoundImage(#Image, Radius)

Code: Alles auswählen

Enumeration
	#Window
	#Gadget
	#Image
EndEnumeration


Structure RoundImageFilterCallback
	X.i
	Y.i
	Radius.i
EndStructure
Global RoundImageFilterCallback.RoundImageFilterCallback

Procedure RoundImageFilterCallback(X.i, Y.i, Source.i, Destination.i)
	With RoundImageFilterCallback
		Protected Factor.f = \Radius-Sqr((X-\X)*(X-\X)+(Y-\Y)*(Y-\Y))
		If Factor > 1 : Factor = 1.0 : ElseIf Factor < 0 : Factor = 0 : EndIf
		ProcedureReturn Destination&$FFFFFF | Int(Alpha(Destination)*Factor)<<24
	EndWith
EndProcedure

Procedure RoundImage(Image.i, Radius.i)
	With RoundImageFilterCallback
		If StartDrawing(ImageOutput(Image))
			DrawingMode(#PB_2DDrawing_CustomFilter)
			CustomFilterCallback(@RoundImageFilterCallback())
			\Radius = Radius
			\X = Radius-1 : \Y = Radius-1
			Box(0, 0, Radius, Radius)
			\X = OutputWidth()-Radius : \Y = Radius-1
			Box(\X, 0, Radius, Radius)
			\X = OutputWidth()-Radius : \Y = OutputHeight()-Radius
			Box(\X, \Y, Radius, Radius)
			\X = Radius-1 : \Y = OutputHeight()-Radius
			Box(0, \Y, Radius, Radius)
			StopDrawing()
		EndIf
	EndWith
EndProcedure


CreateImage(#Image, 256, 128, 32|#PB_Image_Transparent)
StartDrawing(ImageOutput(#Image))
	DrawingMode(#PB_2DDrawing_AlphaBlend)
	Box(0,0,256,128,$FFFF0000)
StopDrawing()

RoundImage(#Image, 32)

OpenWindow(#Window, 0, 0, 400, 300, "Image", #PB_Window_MinimizeGadget|#PB_Window_ScreenCentered)
ImageGadget(#Gadget, 100, 100, ImageWidth(#Image), ImageHeight(#Image), ImageID(#Image))

Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow

[Delle]

Klasse, funktioniert mit der Box super!

Wenn ich aber jetzt anstatt Deinem CreateImage() ein fertiges Bild reinladen will, dann rundet er gar nichts ab:

Code: Alles auswählen

UseJPEGImageDecoder()
LoadImage(#Image,"test.jpg",32|#PB_Image_Transparent)

[STARGÅTE]

Weil bei LoadImage() der letzte Parameter nicht die Tiefe darstellt!

Dein jpg hat keinen Alphakanal, deswegen wird auch keiner erstellt.
Also entweder gleich ein 32-Bit image laden (PNG) oder das JPG in ein 32-Bit image einfügen.

[Delle]

... oder das JPG in ein 32-Bit image einfügen.

[Delle]

So trotzdem noch eine Frage:

Kann man die Farbe der Ecken irgendwie beeinflussen? Aktuell sind sie ja transparent auf dem Screen, als Image abgespeichert weiß.

Statt der Box aktuell:

Code: Alles auswählen

DrawImage(ImageID(#ImageOriginal),0, 0,399,600)

Eine Hintergrundfarbe hat ja jetzt #Image nicht mehr wirklich sondern nur das reingeladene Bild.

Hab schon probiert bei RoundImage() einfach den Boxen eine Farbe zu geben:

Code: Alles auswählen

Box(0, 0, Radius, Radius,RGB(255,0,0))

Wird aber ignoriert... denk mal das liegt eben am transparenten Image.

Lässt sich das überhaupt jetzt einfach anpassen oder muss man das Pferd komplett "verkehrtrum" aufziehen?

[STARGÅTE]

Wenn die Ecken transparent sind, was interessiert dann die Farbe?

Die Farbe ist die vom Bild von dem ich die Ecken transparent gemacht habe.

Hätte die Ecke eine andere Frabe als das Bild, dann würde jda die Kantenglättung nicht funktionieren, sondern dann auch die Farben mischen, was dann zu Rändern führt.

als Image abgespeichert weiß

Wieso abgespeichert? in welchem Format? Welche Tiefe ?

[Delle]

Mir gehts weniger um die (transparente) Darstellung auf dem PB-Schirm sondern abgespeichert als JPEG.

Da werden die transparenten Ecken eben weiß, mal als Beispiel:



Ich dachte eben man kann irgendwie noch festlegen welche Farbe die runden Ecken bekommen (z.B. rot).



Aber dazu muss man anscheinend wirklich anders vorgehen..

[Delle]

Nachtrag:

Stelle mich heute wirklich etwas dämlich an: Einfach ein rotes Image erstellen und Dein transparentes draufzukopieren fertig!