[Solved] Outlined transparent circle with no missing inner pixels

Just starting out? Need help? Post your questions and find answers here.
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

[Solved] Outlined transparent circle with no missing inner pixels

Post by BarryG »

I saw a post about this before but just can't find it now. It's possible it wasn't using #PB_2DDrawing_Outlined anyway, so it might not have helped.

I'm trying to draw a 3-pixel-wide circle with no pixel gaps in it. See code below and image of the problem. Should be simple? I can't work it out.

The inside of the circle must be transparent, too, because I intend to place it over another image to highlight something. Thanks.

Code: Select all

If OpenWindow(0, 400, 200, 200, 200, "Circle", #PB_Window_SystemMenu)
  If CreateImage(0, 200, 200) And StartDrawing(ImageOutput(0))
    DrawingMode(#PB_2DDrawing_Outlined)
    Circle(100, 100, 90, #Red)
    Circle(100, 100, 89, #Red)
    Circle(100, 100, 88, #Red)
    StopDrawing() 
    ImageGadget(0, 0, 0, 200, 200, ImageID(0))
  EndIf
  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf
Image
Last edited by BarryG on Wed Nov 24, 2021 2:09 am, edited 1 time in total.
firace
Addict
Addict
Posts: 899
Joined: Wed Nov 09, 2011 8:58 am

Re: Outlined transparent circle with no missing inner pixels

Post by firace »

Alternative approach - no missing pixels:

Code: Select all

If OpenWindow(0, 400, 200, 200, 200, "Circle", #PB_Window_SystemMenu)
  If CreateImage(0, 200, 200) And StartDrawing(ImageOutput(0))
 
    Circle(100, 100, 90, #Red)
    Circle(100, 100, 87, #Black)
    StopDrawing() 
    
    ImageGadget(0, 0, 0, 200, 200, ImageID(0))
  EndIf
  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: Outlined transparent circle with no missing inner pixels

Post by BarryG »

Nice, firace... but can I make the #Black transparent?
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Outlined transparent circle with no missing inner pixels

Post by mk-soft »

Why black transparent and not circle outlined ...

Code: Select all

If OpenWindow(0, 400, 200, 200, 200, "Circle", #PB_Window_SystemMenu)
  If CreateImage(0, 200, 200, 32, #Gray) And StartDrawing(ImageOutput(0))
    
    Box(0, 95, 200, 10, #Black)
    DrawingMode(#PB_2DDrawing_Outlined)
    Circle(100, 100, 90, #Red)
    DrawingMode(#PB_2DDrawing_Default)
    StopDrawing() 
    
    ImageGadget(0, 0, 0, 200, 200, ImageID(0))
  EndIf
  Repeat
    Select WaitWindowEvent()
      Case #PB_Event_CloseWindow
        Break
        
    EndSelect
    
  ForEver
  
EndIf

My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: Outlined transparent circle with no missing inner pixels

Post by JHPJHP »

Hi Barry,

Just draw your own... there are an infinite number of circle algorithms to choose from, here is a simple one.

I usually use circle to control the thickness, but box is more accurate.

Code: Select all

Enumeration
  #MainWindow
  #ImageGadget
EndEnumeration

WindowWidth = 640
WindowHeight = 480

If OpenWindow(#MainWindow, 0, 0, WindowWidth, WindowHeight, "Draw Circle", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ImageGadget(#ImageGadget, 0, 0, WindowWidth, WindowHeight, #Null)
  ImageCircle = CreateImage(#PB_Any, WindowWidth, WindowHeight)

  If IsImage(ImageCircle)
    xCenter = WindowWidth / 2
    yCenter = WindowHeight / 2
    nRadius = 200
    nThickness = 3
    nColor = RGB(0, 0, 255)
    nAngle.f = 0
    nDistance.f = 0.01

    If StartDrawing(ImageOutput(ImageCircle))
      While nAngle < #PI * 2
        Box(xCenter + Cos(nAngle) * nRadius, yCenter + Sin(nAngle) * nRadius, nThickness, nThickness, nColor)
        ;Circle(xCenter + Cos(nAngle) * nRadius, yCenter + Sin(nAngle) * nRadius, nThickness, nColor)
        nAngle + nDistance
      Wend
      StopDrawing()
    EndIf
    SetGadgetState(#ImageGadget, ImageID(ImageCircle))
  EndIf
  Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
User avatar
netmaestro
PureBasic Bullfrog
PureBasic Bullfrog
Posts: 8425
Joined: Wed Jul 06, 2005 5:42 am
Location: Fort Nelson, BC, Canada

Re: Outlined transparent circle with no missing inner pixels

Post by netmaestro »

Code: Select all

Declare TimerProc()

Global fwd=#True,down=#True,x=0,y=0

CreateImage(0,160,160,32,#PB_Image_Transparent)
StartVectorDrawing(ImageVectorOutput(0))
VectorSourceColor(RGBA(255,0,0,255))
AddPathCircle(79,79,75)
StrokePath(3)
StopVectorDrawing()

OpenWindow(0,0,0,256,256,"",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)
CanvasGadget(0,0,0,256,256)
LoadImage(1, #PB_Compiler_Home+"Examples\Sources\Data\Background.bmp")
AddWindowTimer(0,1,15)

BindEvent(#PB_Event_Timer,@TimerProc())
Repeat : EventID = WaitWindowEvent() : Until EventID = #PB_Event_CloseWindow

Procedure TimerProc()
  If fwd:x+1:If x>99:fwd=#False:EndIf:Else:x-1:If x<1:fwd=#True:EndIf:EndIf
  If down:y+1:If y>104:down=#False:EndIf:Else:y-1:If y<1:down=#True:EndIf:EndIf        
  CopyImage(1,2)
  StartDrawing(ImageOutput(2))
  DrawAlphaImage(ImageID(0),x,y)
  StopDrawing()
  SetGadgetAttribute(0,#PB_Canvas_Image, ImageID(2))
EndProcedure
BERESHEIT
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: Outlined transparent circle with no missing inner pixels

Post by BarryG »

Wow, so much help! You guys are great! Really appreciate the community here. Some quick replies:

netmaestro: nice example with the CanvasGadget, but it has dark edges around the circle -> https://i.imgur.com/ghiKk2w.png
mk-soft wrote: Tue Nov 23, 2021 7:02 pmWhy black transparent and not circle outlined
Because I'm pasting it on top of an existing image (see my first post), so the black part must be transparent so I can see the exising image inside the circle. And it works fine with 1-pixel width circles like your example, but not for 3-pixel width circles (it causes gaps in the circle). Yours didn't do a 3-pixel width, so I can't use it.
JHPJHP wrote: Tue Nov 23, 2021 8:01 pmJust draw your own
This is the answer I'm going with. It ticks all boxes and lets me change the width easily, as mentioned. Thanks, JHPJHP!
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by RASHAD »

- No black pix (I think :) )
- No excessive calculation
- Outline transparent circle over Image

Code: Select all

LoadImage(1, #PB_Compiler_Home+"Examples\Sources\Data\Background.bmp")
If OpenWindow(0, 0, 0, 800, 800, "2D Drawing Test",#PB_Window_ScreenCentered|#PB_Window_SystemMenu)
  If CreateImage(0, 800, 800,32,#PB_Image_Transparent)
    If StartDrawing(ImageOutput(0))
      DrawingMode(#PB_2DDrawing_AllChannels)
      DrawImage(ImageID(1),0,0,800,800)
      DrawingMode(#PB_2DDrawing_Default|#PB_2DDrawing_Outlined )
      For r = 350 To 340 Step -1      
        Circle(400,400,r,$0000FF)
      Next
      StopDrawing()
    EndIf
  EndIf

  ImageGadget(0, 0, 0, 800,800, ImageID(0))
  
  Repeat
    Event = WaitWindowEvent() 
  Until Event = #PB_Event_CloseWindow  ; If the user has pressed on the window close button
  
EndIf
End  
Edit :10 pixels wide
Last edited by RASHAD on Wed Nov 24, 2021 4:04 am, edited 2 times in total.
Egypt my love
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by BarryG »

Rashad, your circle isn't 3 pixels wide, though, so of course no gaps. Thanks for replying with some code, though.

JHPJHP, I just discovered your code doesn't scale well with larger thicknesses. Below is your circle with radius 100 and thickness 15. Not a big problem for me because I only need 3 thickness (which still looks fine) but maybe you can make it scale properly to satisfy my OCD? Up to you. Hehehe.

Image
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by RASHAD »

Previous post updated
Egypt my love
JHPJHP
Addict
Addict
Posts: 2129
Joined: Sat Oct 09, 2010 3:47 am
Contact:

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by JHPJHP »

Hi Barry,

Nothing to change, just use Circle instead of Box; nDistance can also be adjusted... that is, if its not to excessive :lol:

Cheers!
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4636
Joined: Sun Apr 12, 2009 6:27 am

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by RASHAD »

Sorry JHPJHP no offense :D
Egypt my love
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by BarryG »

Thanks, I will check with Circle instead of Box.
User avatar
NicTheQuick
Addict
Addict
Posts: 1224
Joined: Sun Jun 22, 2003 7:43 pm
Location: Germany, Saarbrücken
Contact:

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by NicTheQuick »

What about a using an image with alpha mask instead of a black background? Then the Vector graphics library is the solution for you. Using a color to mimic transparency is a bit oldschool in my opinion.

Edit: Wait a minute. The example of netmaestro does all this and I don't have any black borders around the circle. Did you modify his example?
The english grammar is freeware, you can use it freely - But it's not Open Source, i.e. you can not change it or publish it in altered way.
BarryG
Addict
Addict
Posts: 3292
Joined: Thu Apr 18, 2019 8:17 am

Re: [Solved] Outlined transparent circle with no missing inner pixels

Post by BarryG »

NicTheQuick wrote: Wed Nov 24, 2021 12:02 pmThe example of netmaestro does all this and I don't have any black borders around the circle. Did you modify his example?
No, I didn't modify it. Okay, maybe not black as such, but here's a zoomed-in image of his result that definitely shows a darker border around the red ring (due to anti-aliasing I guess), which is unwanted -> https://i.imgur.com/fjaUbsp.png

@Rashad: Your latest edit to show 10-pixel width is riddled with holes in the red ring, which is unwanted -> https://i.imgur.com/ylhm9ak.png

BTW, I marked this topic as solved, so you don't need to spend any more time on it (if you don't want). I'm using JHPJHP's code.
Post Reply