Page 1 of 2
Rounded Box (Vector Graphics) problem
Posted: Sun Mar 22, 2020 9:21 pm
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
Re: Rounded Box (Vector Graphics) problem
Posted: Mon Mar 23, 2020 12:42 am
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
Re: Rounded Box (Vector Graphics) problem
Posted: Mon Mar 23, 2020 7:29 am
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();
}
Re: Rounded Box (Vector Graphics) problem
Posted: Mon Mar 23, 2020 8:00 am
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
Re: Rounded Box (Vector Graphics) problem
Posted: Mon Mar 23, 2020 8:20 am
by Andy
Very nice Peter!
Re: Rounded Box (Vector Graphics) problem
Posted: Mon Mar 23, 2020 8:28 am
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
Re: Rounded Box (Vector Graphics) problem
Posted: Fri Mar 27, 2020 5:59 pm
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
Re: Rounded Box (Vector Graphics) problem
Posted: Sat Mar 28, 2020 9:56 am
by Andy
Re: Rounded Box (Vector Graphics) problem
Posted: Sat Mar 28, 2020 11:59 am
by plouf
owo ... lot of work !!! hope success
Re: Rounded Box (Vector Graphics) problem
Posted: Sat Mar 28, 2020 12:38 pm
by Andy
Thanks for the vote of confidence