PureBasic Forums - English

http://www.purebasic.com
https://www.purebasic.fr/english/

Window with rounded corners

https://www.purebasic.fr/english/viewtopic.php?t=64606

Page 1 of 1

Window with rounded corners

Posted: Sat Jan 16, 2016 8:06 am
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?

Re: Window with rounded corners

Posted: Sat Jan 16, 2016 10:30 am
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

Re: Window with rounded corners

Posted: Sat Jan 16, 2016 10:50 am
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).

Re: Window with rounded corners

Posted: Mon Jan 18, 2016 10:16 pm
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

Re: Window with rounded corners

Posted: Tue Jan 19, 2016 11:03 am
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

Re: Window with rounded corners

Posted: Tue Jan 19, 2016 5:43 pm
by Wolfram
Hi Deseven,

I don't know why, but the corners are not total transparent.
Image

Re: Window with rounded corners

Posted: Tue Jan 19, 2016 6:13 pm
by deseven
What OS X version are you using?
Try to add

Code: Select all

CocoaMessage(0,WindowID(0),"invalidateShadow")

Re: Window with rounded corners

Posted: Tue Jan 19, 2016 6:34 pm
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.

Re: Window with rounded corners

Posted: Tue Jan 19, 2016 8:13 pm
by deseven
Well, i'm out of ideas then. Probably there is another method to create rounded shadow for older OS X versions.

Re: Window with rounded corners

Posted: Wed Jan 20, 2016 8:55 pm
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
All times are UTC+01:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited