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

Rounded Box (Vector Graphics) problem

by Andy Sun Mar 22, 2020 9:21 pm

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: 53
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

by plouf Mon Mar 23, 2020 12:42 am

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
Andy
 
Posts: 17
Joined: Sat Feb 15, 2020 5:19 pm

Re: Rounded Box (Vector Graphics) problem

by Andy Mon Mar 23, 2020 7:29 am

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: 689
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080

Re: Rounded Box (Vector Graphics) problem

by Peter Mon Mar 23, 2020 8:00 am

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: 17
Joined: Sat Feb 15, 2020 5:19 pm

Re: Rounded Box (Vector Graphics) problem

by Andy Mon Mar 23, 2020 8:20 am

Very nice Peter!
Andy
 
Posts: 17
Joined: Sat Feb 15, 2020 5:19 pm

Re: Rounded Box (Vector Graphics) problem

by Andy Mon Mar 23, 2020 8:28 am

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: 53
Joined: Tue Feb 25, 2014 6:01 pm
Location: Athens,Greece

Re: Rounded Box (Vector Graphics) problem

by plouf Fri Mar 27, 2020 5:59 pm

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
Andy
 
Posts: 17
Joined: Sat Feb 15, 2020 5:19 pm

Re: Rounded Box (Vector Graphics) problem

by Andy Sat Mar 28, 2020 9:56 am

Hi. I am trying to achieve this

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

Re: Rounded Box (Vector Graphics) problem

by plouf Sat Mar 28, 2020 11:59 am

owo ... lot of work !!! hope success :)
Andy
 
Posts: 17
Joined: Sat Feb 15, 2020 5:19 pm

Re: Rounded Box (Vector Graphics) problem

by Andy Sat Mar 28, 2020 12:38 pm

Thanks for the vote of confidence :)
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 3 guests