Window with rounded corners

Mac OSX specific forum
User avatar
deseven
Enthusiast
Enthusiast
Posts: 362
Joined: Wed Jan 12, 2011 3:48 pm
Location: Serbia
Contact:

Window with rounded corners

Post by deseven »

Hello.

What is the correct way to do that?
I tried to implement it with this method:

Code: Select all

CocoaMessage(0,WindowID(0),"setBackgroundColor:",CocoaMessage(0,0,"NSColor colorWithPatternImage:",ImageID(0)))
I've generated the background image with two different approaches i found on this forum.
First one uses NSBezierPath bezierPathWithRoundedRect:

Code: Select all

CreateImage(0,300,200,32,#PB_Image_Transparent)

StartDrawing(ImageOutput(0))
ColorWhite = CocoaMessage(0,0,"NSColor whiteColor")
CocoaMessage(0,ColorWhite,"setFill")

Rect.NSRect
Rect\origin\x = 5
Rect\origin\y = 5
Rect\size\width = 290
Rect\size\height = 190
RadiusX.CGFloat = 20
RadiusY.CGFloat = 20

Path = CocoaMessage(0,0,"NSBezierPath bezierPathWithRoundedRect:@",@Rect,"xRadius:@",@RadiusX,"yRadius:@",@RadiusY)
CocoaMessage(0,Path,"fill")
StopDrawing()

If OpenWindow(0,0,0,300,200,"Drawing",#PB_Window_BorderLess|#PB_Window_ScreenCentered)
  
  CocoaMessage(0,WindowID(0),"setOpaque:",#NO)
  CocoaMessage(0,WindowID(0),"setBackgroundColor:",CocoaMessage(0,0,"NSColor colorWithPatternImage:",ImageID(0)))
  CocoaMessage(0,WindowID(0),"setMovableByWindowBackground:",#NO)
  CocoaMessage(0,WindowID(0),"setHasShadow:",#YES)
  
  Repeat
    ev = WaitWindowEvent()
  Until ev = #PB_Event_CloseWindow
  
EndIf
Second one uses the internal vector drawing library. However, in both cases the result looks like that:
Image

I've also found this example, but don't know how to port it to PB.

Can anyone help?
User avatar
Danilo
Addict
Addict
Posts: 3037
Joined: Sat Apr 26, 2003 8:26 am
Location: Planet Earth

Re: Window with rounded corners

Post by Danilo »

deseven wrote:I've also found this example, but don't know how to port it to PB.
The following produces a white window with rounded corners (thanks to your link!). You can also control the AntiAliasing of the corners, and add a border.
But if you enable shadow, you get something like a "shadow frame" around the window. Try it.

Code: Select all

If OpenWindow(0,0,0,300,200,"Drawing",#PB_Window_BorderLess|#PB_Window_ScreenCentered)
  
  CocoaMessage(0,WindowID(0),"setOpaque:",#NO)
  CocoaMessage(0,WindowID(0),"setBackgroundColor:",CocoaMessage(0,0,"NSColor clearColor")) ; clearColor = transparent
  CocoaMessage(0,WindowID(0),"setMovableByWindowBackground:",#YES)
  CocoaMessage(0,WindowID(0),"setHasShadow:",#NO)
  
  view = CocoaMessage(0,WindowID(0),"contentView")
  If view
      CocoaMessage(0,view,"setWantsLayer:",#True)
      layer = CocoaMessage(0,view,"layer")
      If layer
          radius.d = 30
          CocoaMessage(0,layer,"setCornerRadius:@",@radius)
          CocoaMessage(0,layer,"setMasksToBounds:",#True)
          CocoaMessage(0,layer,"setBackgroundColor:",CocoaMessage(0,CocoaMessage(0,0,"NSColor whiteColor"),"CGColor")) ; background color
          
          ; Draw Border
          ;CocoaMessage(0,layer,"setBorderColor:",CocoaMessage(0,CocoaMessage(0,0,"NSColor orangeColor"),"CGColor"))    ; border color
          ;borderWidth.d = 5
          ;CocoaMessage(0,layer,"setBorderWidth:@",@borderWidth)
          
          ; Set Antialiasing for Window edges
          ;CocoaMessage(0,layer,"setEdgeAntialiasingMask:",0)     ; Disable AntiAliasing for all edges
          CocoaMessage(0,layer,"setEdgeAntialiasingMask:",%1111) ; Enable  AntiAliasing for all edges
      EndIf
      ;CocoaMessage(0,view,"updateLayer")
  EndIf
  CocoaMessage(0,WindowID(0),"invalidateShadow")
  ;CocoaMessage(0,WindowID(0),"update")
  
  Repeat
    ev = WaitWindowEvent()
  Until ev = #PB_Event_CloseWindow
  
EndIf
User avatar
deseven
Enthusiast
Enthusiast
Posts: 362
Joined: Wed Jan 12, 2011 3:48 pm
Location: Serbia
Contact:

Re: Window with rounded corners

Post by deseven »

Thank you very much Danilo, you saved me once again :)
As for the "shadow frame" - i think that's okay, it seems that every rounded window in OS X have it (Finder, for example).
Wolfram
Enthusiast
Enthusiast
Posts: 567
Joined: Thu May 30, 2013 4:39 pm

Re: Window with rounded corners

Post by Wolfram »

Hi,

I found this example which has a perfect shadow.
Maybe someone can translate it.
http://www.cocoawithlove.com/2008/12/dr ... -os-x.html
macOS Catalina 10.15.7
User avatar
deseven
Enthusiast
Enthusiast
Posts: 362
Joined: Wed Jan 12, 2011 3:48 pm
Location: Serbia
Contact:

Re: Window with rounded corners

Post by deseven »

Check this.

Also, it seems that using NSImage directly solves the drawing problems.
So here is a correct way to create rounded corners with NSBezierPath based on wilbert example:

Code: Select all

Rect.NSRect
Rect\origin\x = 0
Rect\origin\y = 0
Rect\size\width = 300
Rect\size\height = 200
RadiusX.CGFloat = 20
RadiusY.CGFloat = 20

ImageID = CocoaMessage(0,CocoaMessage(0,0,"NSImage alloc"),"initWithSize:@",@Rect\size)
CocoaMessage(0,ImageID,"lockFocus")
Path = CocoaMessage(0,0,"NSBezierPath bezierPathWithRoundedRect:@",@Rect,"xRadius:@",@RadiusX,"yRadius:@",@RadiusY)
ColorWhite = CocoaMessage(0,0,"NSColor whiteColor")
CocoaMessage(0,ColorWhite,"setFill")
CocoaMessage(0,Path,"fill")
CocoaMessage(0,ImageID,"unlockFocus")

If OpenWindow(0,0,0,300,200,"Drawing",#PB_Window_BorderLess|#PB_Window_ScreenCentered)
  
  CocoaMessage(0,WindowID(0),"setOpaque:",#NO)
  CocoaMessage(0,WindowID(0),"setBackgroundColor:",CocoaMessage(0,0,"NSColor colorWithPatternImage:",ImageID))
  CocoaMessage(0,WindowID(0),"setMovableByWindowBackground:",#NO)
  CocoaMessage(0,WindowID(0),"setHasShadow:",#YES)
  
  Repeat
    ev = WaitWindowEvent()
  Until ev = #PB_Event_CloseWindow
  
EndIf
Wolfram
Enthusiast
Enthusiast
Posts: 567
Joined: Thu May 30, 2013 4:39 pm

Re: Window with rounded corners

Post by Wolfram »

Hi Deseven,

I don't know why, but the corners are not total transparent.
Image
macOS Catalina 10.15.7
User avatar
deseven
Enthusiast
Enthusiast
Posts: 362
Joined: Wed Jan 12, 2011 3:48 pm
Location: Serbia
Contact:

Re: Window with rounded corners

Post by deseven »

What OS X version are you using?
Try to add

Code: Select all

CocoaMessage(0,WindowID(0),"invalidateShadow")
Wolfram
Enthusiast
Enthusiast
Posts: 567
Joined: Thu May 30, 2013 4:39 pm

Re: Window with rounded corners

Post by Wolfram »

deseven wrote:What OS X version are you using?
Try to add

Code: Select all

CocoaMessage(0,WindowID(0),"invalidateShadow")
I already tried that, but here, on 10.7.5 and 10.9.4, it doesn't work.
macOS Catalina 10.15.7
User avatar
deseven
Enthusiast
Enthusiast
Posts: 362
Joined: Wed Jan 12, 2011 3:48 pm
Location: Serbia
Contact:

Re: Window with rounded corners

Post by deseven »

Well, i'm out of ideas then. Probably there is another method to create rounded shadow for older OS X versions.
Wolfram
Enthusiast
Enthusiast
Posts: 567
Joined: Thu May 30, 2013 4:39 pm

Re: Window with rounded corners

Post by Wolfram »

I got it :-)
I have to open the window invisible...

Code: Select all

Rect.NSRect
Rect\origin\x = 0
Rect\origin\y = 0
Rect\size\width = 300
Rect\size\height = 200
RadiusX.CGFloat = 20
RadiusY.CGFloat = 20

ImageID = CocoaMessage(0,CocoaMessage(0,0,"NSImage alloc"),"initWithSize:@",@Rect\size)
CocoaMessage(0,ImageID,"lockFocus")
Path = CocoaMessage(0,0,"NSBezierPath bezierPathWithRoundedRect:@",@Rect,"xRadius:@",@RadiusX,"yRadius:@",@RadiusY)
ColorWhite = CocoaMessage(0,0,"NSColor whiteColor")
CocoaMessage(0,ColorWhite,"setFill")
CocoaMessage(0,Path,"fill")
CocoaMessage(0,ImageID,"unlockFocus")

If OpenWindow(0,0,0,300,200,"Drawing",#PB_Window_BorderLess|#PB_Window_ScreenCentered|#PB_Window_Invisible)
  Close = ButtonGadget(#PB_Any, 100, 50, 100, 25, "close")

  ID = WindowID(0)

  CocoaMessage(0,ID,"setOpaque:",#NO)
  CocoaMessage(0,ID,"setBackgroundColor:",CocoaMessage(0,0,"NSColor colorWithPatternImage:",ImageID))
  CocoaMessage(0,ID,"setHasShadow:",#YES)
  CocoaMessage(0,ID,"setMovableByWindowBackground:",#NO)

  HideWindow(0, 0)
  
  Repeat
    ev = WaitWindowEvent()
    If EventGadget() = Close
      Break
    EndIf
    
  Until ev = #PB_Event_CloseWindow
  
  End
  
EndIf
macOS Catalina 10.15.7
Post Reply