'Round' the corners of an image (draw black elements over it)

Just starting out? Need help? Post your questions and find answers here.
User avatar
blueznl
PureBasic Expert
PureBasic Expert
Posts: 6161
Joined: Sat May 17, 2003 11:31 am
Contact:

'Round' the corners of an image (draw black elements over it)

Post by blueznl »

Hey people.

I've not been very active in PureBasic for quite some time (work and other things took over) but I still dabble a bit, mostly fooling around with my own day to day tools, using the motto 'if it ain't there I'll write it myself' :-)

I'm using a little self-written wallpaper manager (wallx, here: https://ninelizardsblog.blogspot.com/20 ... paper.html ) and was adding a few effects, just for fun.

This brought me to the following question: how do I best add 'rounded corners' to an image? Ie. take an image, any image, and 'round the corners' by adding 4 black elements to all the corners.

Seems so simple, but I'm not sure what's the best way to do it. Any suggestions?
( PB6.00 LTS Win11 x64 Asrock AB350 Pro4 Ryzen 5 3600 32GB GTX1060 6GB)
( The path to enlightenment and the PureBasic Survival Guide right here... )
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: 'Round' the corners of an image (draw black elements over it)

Post by firace »

One possible way:

Code: Select all

UseJPEGImageDecoder()

LoadImage(0,"C:/yourimage.jpg")
ResizeImage(0,1000,1000)

OpenWindow(0, 0, 0, 400,400, "Rounded corners demo", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
;
CreateImage(1, 1000,1000, 32)
StartDrawing(ImageOutput(1))
Box(0,0,1000,1000,$FFFFFFFF)      

DrawingMode(#PB_2DDrawing_AlphaBlend)      
DrawAlphaImage(ImageID(0),25,25,200)
DrawingMode(#PB_2DDrawing_Outlined)

RoundBox( 200,200,500, 500, 30, 30, RGBA(0,0,0, 255))
FillArea(0,0,0,0)
StopDrawing()
ResizeImage(1,400,400)

ImageGadget(0, 0, 0,400,400, ImageID(1))

Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow

infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: 'Round' the corners of an image (draw black elements over it)

Post by infratec »

Not the fastest, but the simplest:

Code: Select all

Procedure.i FilterCallback(x, y, Source, Target)
  
  Protected Result.i
  
  If Source & $FFFFFF = #Black
    Result = #Black
  Else
    Result = Target
  EndIf
  ProcedureReturn Result
EndProcedure


UseJPEGImageDecoder()

Filename$ = OpenFileRequester("Choose an image", "", "JPG|*.jpg", 0)
If Filename$ <> ""
  
  Img = LoadImage(#PB_Any, Filename$)
  If Img
    FilterImg = CreateImage(#PB_Any, ImageWidth(Img), ImageHeight(Img))
    If StartDrawing(ImageOutput(FilterImg))
      RoundBox(0, 0, ImageWidth(Img), ImageHeight(Img), 50, 50, #White)
      StopDrawing()
      
      If StartDrawing(ImageOutput(Img))
        DrawingMode(#PB_2DDrawing_CustomFilter)
        CustomFilterCallback(@FilterCallback())
        DrawImage(ImageID(FilterImg), 0, 0)
        StopDrawing()
        
        OpenWindow(0, 0, 0, ImageWidth(Img), ImageHeight(Img), "Round corners", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
        ImageGadget(0, 0, 0, 0, 0, ImageID(Img))
        
        Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
        
      EndIf
    EndIf
  EndIf  
    
EndIf
User avatar
blueznl
PureBasic Expert
PureBasic Expert
Posts: 6161
Joined: Sat May 17, 2003 11:31 am
Contact:

Re: 'Round' the corners of an image (draw black elements over it)

Post by blueznl »

Ah! Using the alphachannel, yeah, that makes sense... Thx!
( PB6.00 LTS Win11 x64 Asrock AB350 Pro4 Ryzen 5 3600 32GB GTX1060 6GB)
( The path to enlightenment and the PureBasic Survival Guide right here... )
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: 'Round' the corners of an image (draw black elements over it)

Post by RASHAD »

Hi blueznl
Hi Berned
I liked what you did much
Just to complete the pak

Using 2D Drawing :

Code: Select all


LoadImage(0, #PB_Compiler_Home + "examples/Sources/Data/Geebee2.bmp")
ResizeImage(0,290,190)

OpenWindow(0, 0, 0, 400,400, "Rounded corners demo", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
;
CreateImage(1, 300,200, 24 ,$0)
StartDrawing(ImageOutput(1))
DrawingMode(#PB_2DDrawing_AlphaBlend)      
DrawAlphaImage(ImageID(0),5,5,250)
DrawingMode(#PB_2DDrawing_Outlined)
RoundBox( 10,10,280, 180, 30, 30, $0)
FillArea(5,5,-1,0)
StopDrawing()
ImageGadget(0, 0, 0,400,400, ImageID(1))

Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow

Using Vector lib. :

Code: Select all

Procedure AddPathRoundBox(x.d,y.d,w.d,h.d,radius.d,flags=#PB_Path_Default)
   MovePathCursor(x+radius,y,flags)
   AddPathArc(w-radius,0,w-radius,radius,radius,#PB_Path_Relative)
   AddPathArc(0,h-radius,-radius,h-radius,radius,#PB_Path_Relative)
   AddPathArc(-w+radius,0,-w+radius,-radius,radius,#PB_Path_Relative)
   AddPathArc(0,-h+radius,radius,-h+radius,radius,#PB_Path_Relative)
   ClosePath()
EndProcedure


If OpenWindow(0, 0, 0, 400, 300, "Round Rectangle", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 300)
  LoadImage(1, #PB_Compiler_Home + "examples/Sources/Data/Geebee2.bmp") 
  radius = 20
   If StartVectorDrawing(CanvasVectorOutput(0))
      VectorSourceLinearGradient(0, 0, 400, 0)
      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, 400, 300)
      FillPath()

      AddPathRoundBox(50,50,300,200,radius,#PB_Path_Relative)
      ClipPath()
      MovePathCursor(50, 50)
      DrawVectorImage(ImageID(1),255,300,200)
    StopVectorDrawing()
   EndIf

Repeat
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
EndIf
Using Windows API :

Code: Select all


If OpenWindow(0, 0, 0, 400,300, "Round Rectangle",#PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  LoadImage(1, #PB_Compiler_Home + "examples/Sources/Data/Geebee2.bmp")
  ResizeImage(1,300,200)
  SetWindowColor(0,$C2FEE9 )
  OpenWindow(1, 0, 0, 300,200, "", #PB_Window_BorderLess|#PB_Window_ScreenCentered,WindowID(0))
  ImageGadget(0,0,0,300,200,ImageID(1))
  Rgn = CreateRoundRectRgn_(0,0, 300,200,50,50)
  SetWindowRgn_(WindowID(1), Rgn,1)
  SetActiveWindow(0)
Repeat
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow
EndIf
Egypt my love
User avatar
blueznl
PureBasic Expert
PureBasic Expert
Posts: 6161
Joined: Sat May 17, 2003 11:31 am
Contact:

Re: 'Round' the corners of an image (draw black elements over it)

Post by blueznl »

... and I implemented it. It's completely useless, but looks fancy :-)

Image
( PB6.00 LTS Win11 x64 Asrock AB350 Pro4 Ryzen 5 3600 32GB GTX1060 6GB)
( The path to enlightenment and the PureBasic Survival Guide right here... )
User avatar
Kiffi
Addict
Addict
Posts: 1353
Joined: Tue Mar 02, 2004 1:20 pm
Location: Amphibios 9

Re: 'Round' the corners of an image (draw black elements over it)

Post by Kiffi »

blueznl wrote: Fri Sep 17, 2021 2:13 pmIt's completely useless, but looks fancy :-)
uselessness in a nutshell :wink:
Hygge
Post Reply