Vector drawing roundbox? [Answered]

[collectordave]

Hi all

Is there an equivalent to the 2d drawing roundbox.

I have am using some code to give me a round box written by another forum member. All good until you want to use a colour with some transparency as shown. you get the round box but you also get another box inside i think it is because you are drawing it twice and the alphas add together. I have tried setting the source colour to fully transparent for the strokepath command but the corners are then not shown.

any help welcome

Code: Select all

If OpenWindow(0, 0, 0, 400, 300, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
   CanvasGadget(0, 0, 0, 400, 300)
   
   If StartVectorDrawing(CanvasVectorOutput(0))
      vLW = 30;        line width (bigger width = bigger radius)
      vLW2= vLW * 0.5; half line width
      
      ;Fill this with round corners?
      MovePathCursor(20 + vLW2, 20 + vLW2)
      AddPathLine   (100 - vLW2, 20 + vLW2)
      AddPathLine   (100 - vLW2, 100 - vLW2)     
      AddPathLine   (20 + vLW2, 100 - vLW2)
      ClosePath     ()
     
      VectorSourceColor(RGBA(0, 0, 255, 100))
      FillPath(#PB_Path_Preserve)
      ;VectorSourceColor(RGBA(0, 0, 255, 0)) ;fully transparent    
      StrokePath(vLW, #PB_Path_RoundCorner)   
      StopVectorDrawing()
   EndIf
   
   Repeat
      Event = WaitWindowEvent()
   Until Event = #PB_Event_CloseWindow
EndIf

regards

collectordave

[#NULL]

i think you can use layers to make either the filling or the stroking fully opaque, so background and border don't blend into each other at the inside. then you make everything transparent by using the layer opacity.
i'm using AddPathArc here to draw the Box but that shouldn't matter.

Code: Select all

If OpenWindow(0, 0, 0, 400, 300, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 300)
  
  If StartVectorDrawing(CanvasVectorOutput(0))
    
    x = 40
    y = 20
    w = 100
    h = 50
    r = 10
    
    BeginVectorLayer(100)
    
    MovePathCursor(x+r, y)
    
    AddPathArc(x+w, y  , x+w, y+h, r)
    AddPathArc(x+w, y+h, x  , y+h, r)
    AddPathArc(x  , y+h, x  , y  , r)
    AddPathArc(x  , y  , x+r, y  , r)
    
    VectorSourceColor(RGBA(0, 0, 255, 255))
    FillPath(#PB_Path_Preserve)
    
    VectorSourceColor(RGBA(0, 0, 255, 127))
    StrokePath(8, #PB_Path_RoundCorner)   
    
    EndVectorLayer()
    
    StopVectorDrawing()
  EndIf
  
  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf

[collectordave]

thanks for the reply #null but still having the same problem when using transparency

Be great if we had FillPath with rounded corners then np problem.

Cheers
collectordave

[collectordave]

Hi

Actually understanding it now.

Do the drawing fully opaque on the layer and the layer transparency does the rest.

Bit of code here.

Code: Select all

If OpenWindow(0, 0, 0, 400, 300, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 300)
 
  If StartVectorDrawing(CanvasVectorOutput(0))
   
    x = 40
    y = 20
    w = 100
    h = 50
    r = 10
    
      MovePathCursor(20 , 20)
      AddPathLine   (200 , 20)
      AddPathLine   (200, 200)     
      AddPathLine   (20, 200)
      ClosePath     ()
      VectorSourceColor(RGBA(255, 0, 2, 255))
      FillPath()
 
      BeginVectorLayer(100)
    
      MovePathCursor(20 + vLW2, 20 + vLW2)
      AddPathLine   (100 - vLW2, 20 + vLW2)
      AddPathLine   (100 - vLW2, 100 - vLW2)     
      AddPathLine   (20 + vLW2, 100 - vLW2)
      ClosePath     ()
     
      VectorSourceColor(RGBA(0, 0, 255, 255))
      FillPath(#PB_Path_Preserve)
      StrokePath(20, #PB_Path_RoundCorner)   
      
      EndVectorLayer()
   
    StopVectorDrawing()
  EndIf
 
  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf

collectordave

[#NULL]

yes, for example instead of filling with alpha 0.5 and stroking with alpha 0.25, you would fill with 1.0, stroke with 0.5 and layer that with alpha 0.5
you loose half of the width though, but i think that can be fixed.

Code: Select all

If OpenWindow(0, 0, 0, 400, 300, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 300)
  
  If StartDrawing(CanvasOutput(0))
    Circle(170,130,100, $00ff00)
    StopDrawing()
  EndIf
  
  If StartVectorDrawing(CanvasVectorOutput(0))
    
    x = 40
    y = 20
    w = 100
    h = 50
    r = 10
    
    ; -------------------
   
    MovePathCursor(x+r, y)
   
    AddPathArc(x+w, y  , x+w, y+h, r)
    AddPathArc(x+w, y+h, x  , y+h, r)
    AddPathArc(x  , y+h, x  , y  , r)
    AddPathArc(x  , y  , x+r, y  , r)
   
    VectorSourceColor(RGBA(0, 0, 255, 127))
    FillPath(#PB_Path_Preserve)
   
    VectorSourceColor(RGBA(0, 0, 255, 64))
    StrokePath(20, #PB_Path_RoundCorner)   
    
    ClosePath()
    ; -------------------
    
    x + 150
    
    BeginVectorLayer(127)
    
      MovePathCursor(x+r, y)
      
      AddPathArc(x+w, y  , x+w, y+h, r)
      AddPathArc(x+w, y+h, x  , y+h, r)
      AddPathArc(x  , y+h, x  , y  , r)
      AddPathArc(x  , y  , x+r, y  , r)
      
      VectorSourceColor(RGBA(0, 0, 255, 255))
      FillPath(#PB_Path_Preserve)
      
      VectorSourceColor(RGBA(0, 0, 255, 127))
      StrokePath(20, #PB_Path_RoundCorner)   
      
    EndVectorLayer()
    
    ; -------------------

    StopVectorDrawing()
  EndIf
  
  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf

[collectordave]

Hi #Null

Got it fixed now drawing variably transparent polygons no problem.

Just had a little trouble with savevector state till i realised that new layers preserve the vector state aqs well as it says in the manual.

Thanks for the pointer in the right direction.

collectordave

[Michael Vogel]

Without "ClosePath()" I have a small gap at the left top corner of the rectangle. The reason for this seems to be the AddPathArc function which does not make a full 90° arc for the given points - therefore the box does not look perfectly symmetric as well.

I've created also a AddPathRoundBox procedure for easier integration:

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()

	MovePathCursor(-radius,0,#PB_Path_Relative)

EndProcedure


If OpenWindow(0, 0, 0, 400, 300, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	CanvasGadget(0, 0, 0, 400, 300)

	If StartDrawing(CanvasOutput(0))
		Circle(170,130,100, $00ff00)
		StopDrawing()
	EndIf

	If StartVectorDrawing(CanvasVectorOutput(0))

		x = 40
		y = 20
		w = 100
		h = 50
		r = 10

		AddPathRoundBox(x,y,w,h,r)
		AddPathRoundBox(0,80,w,h,r,#PB_Path_Relative)
		
		VectorSourceColor(RGBA(0, 0, 255, 127))
		FillPath(#PB_Path_Preserve)

		VectorSourceColor(RGBA(0, 0, 255, 64))
		StrokePath(20, #PB_Path_RoundCorner)

		BeginVectorLayer(127)

		AddPathRoundBox(x+150,y,w,h,r,#PB_Path_Default)
		AddPathRoundBox(0,80,w,h,r,#PB_Path_Relative)

		VectorSourceColor(RGBA(0, 0, 255, 255))
		FillPath(#PB_Path_Preserve)

		VectorSourceColor(RGBA(0, 0, 255, 127))
		StrokePath(20, #PB_Path_RoundCorner)

		EndVectorLayer()

		StopVectorDrawing()
	EndIf

	Repeat
		Event = WaitWindowEvent()
	Until Event = #PB_Event_CloseWindow
EndIf

[collectordave]

Thanks for all the efforts.

Found the solution with close path and vectorlayers. Produces not just boxes but polygons upto ten sides all with rounded corners and peky box underneath when using transparency.

Cheers to all