Seite 1 von 1
Abgerundete Ecken (Images)
Verfasst: 21.01.2012 17:37
von 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
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 18:53
von 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
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 19:28
von 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)
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 19:42
von 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.
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 20:00
von Delle
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 20:17
von 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:
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:
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?
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 20:35
von 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 ?
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 20:57
von 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..
Re: Abgerundete Ecken (Images)
Verfasst: 21.01.2012 21:10
von Delle
Nachtrag:
Stelle mich heute wirklich etwas dämlich an: Einfach ein rotes Image erstellen und Dein transparentes draufzukopieren fertig!
