Rounded Box (Vector Graphics) problem

Just starting out? Need help? Post your questions and find answers here.
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Rounded Box (Vector Graphics) problem

Post by Andy »

Does anyone know why this does not produce the expected result?

Code: Select all

Procedure RoundedBox(x, y, width, height, radius)
  
  MovePathCursor(x, y + radius)
  AddPathArc(x, y + height, x + radius, y + height, radius)
  AddPathArc(x + width, y + height, x + width, y + height-radius, radius)
  AddPathArc(x + width, y, x + width - radius, y, radius)
  AddPathArc(x, y, x, y + radius, radius)
  
  VectorSourceColor(RGBA(255, 0, 0, 255))
  StrokePath(3)
  
EndProcedure

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 200)
  If StartVectorDrawing(CanvasVectorOutput(0))
    RoundedBox(10, 10, 200, 100, 20)
    StopVectorDrawing()
  EndIf
EndIf
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

Post by plouf »

is this the expected result ?

Code: Select all

Procedure RoundedBox(x, y, width, height, radius)
 
  MovePathCursor(x, y + radius)
  AddPathArc(x, y + height, x + radius, y + height, radius)
  AddPathArc(x + width, y + height, x + width, y + height-radius, radius)
  AddPathArc(x + width, y, x + width - radius, y, radius)
  AddPathArc(x, y, x, y + radius, 360-radius)
 
  VectorSourceColor(RGBA(255, 0, 0, 255))
  StrokePath(3)
 
EndProcedure

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 200)
  If StartVectorDrawing(CanvasVectorOutput(0))
    RoundedBox(10, 10, 200, 100, 20)
    StopVectorDrawing()
  EndIf
EndIf
Christos
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

Yes. Thank you. The original code i found and converted is below.

Code: Select all

// A utility function to draw a rectangle with rounded corners.

function roundedRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x, y + radius);
  ctx.lineTo(x, y + height - radius);
  ctx.arcTo(x, y + height, x + radius, y + height, radius);
  ctx.lineTo(x + width - radius, y + height);
  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
  ctx.lineTo(x + width, y + radius);
  ctx.arcTo(x + width, y, x + width - radius, y, radius);
  ctx.lineTo(x + radius, y);
  ctx.arcTo(x, y, x, y + radius, radius);
  ctx.stroke();
}
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Peter »

For the sake of completeness here the converted code:

Code: Select all

Procedure roundedRect(CanvasGadget, x, y, width, height, radius) 
  ! var ctx = spider_GadgetID(v_canvasgadget).canvas.getContext('2d');
  ! ctx.beginPath();
  ! ctx.moveTo(v_x, v_y + v_radius);
  ! ctx.lineTo(v_x, v_y + v_height - v_radius);
  ! ctx.arcTo(v_x, v_y + v_height, v_x + v_radius, v_y + v_height, v_radius);
  ! ctx.lineTo(v_x + v_width - v_radius, v_y + v_height);
  ! ctx.arcTo(v_x + v_width, v_y + v_height, v_x + v_width, v_y + v_height - v_radius, v_radius);
  ! ctx.lineTo(v_x + v_width, v_y + v_radius);
  ! ctx.arcTo(v_x + v_width, v_y, v_x + v_width - v_radius, v_y, v_radius);
  ! ctx.lineTo(v_x + v_radius, v_y);
  ! ctx.arcTo(v_x, v_y, v_x, v_y + v_radius, v_radius);
  ! ctx.stroke();
EndProcedure
Greetings ... Peter
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

Very nice Peter!
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

If i use a radius of less than 15, i get the same problem. I dont really get what is going on here
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

Post by plouf »

i guess there is a bug !?

use two functions

Code: Select all

Procedure RoundedBox(x, y, width, height, radius)
 
  MovePathCursor(x, y+radius)
  AddPathArc(x, y + height, x + radius, y + height, radius)
  AddPathArc(x + width, y + height, x + width, y + height-radius, radius)
  AddPathArc(x + width, y, x + width - radius, y, radius)
  AddPathLine(x+radius, y)
  AddPathCircle(x+radius,y+radius,radius,180,270)
 
  VectorSourceColor(RGBA(255, 0, 0, 255))
  StrokePath(3)
 
EndProcedure

If OpenWindow(0, 0, 0, 400, 200, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  CanvasGadget(0, 0, 0, 400, 200)
  If StartVectorDrawing(CanvasVectorOutput(0))
    RoundedBox(10, 10, 200, 100, 15)
    StopVectorDrawing()
  EndIf
EndIf
Christos
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

Hi. I am trying to achieve this

https://github.com/sketchpunk/NEditorJS
plouf
Posts: 194
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

Post by plouf »

owo ... lot of work !!! hope success :)
Christos
Andy
Posts: 46
Joined: Sat Feb 15, 2020 5:19 pm
Location: Larnaca, Cyprus
Contact:

Re: Rounded Box (Vector Graphics) problem

Post by Andy »

Thanks for the vote of confidence :)
Post Reply