Styles for _stroke
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Styles for _stroke
Corjan,
When you get round to the lines could you also consider this please.
Can we have the ability to radius corners separately.
if we could have: TOP, BOTTOM, LEFT, RIGHT, ALL.
_rect(x, y, width, height, corner)
Keith
When you get round to the lines could you also consider this please.
Can we have the ability to radius corners separately.
if we could have: TOP, BOTTOM, LEFT, RIGHT, ALL.
_rect(x, y, width, height, corner)
Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board, 32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card
Re: Styles for _stroke
Keith,
You could write a function to do that for you using lines and arc's.
What is your need for this? If you want to do them separately then what about combinations say top left and bottom right together also.
You could write a function to do that for you using lines and arc's.
What is your need for this? If you want to do them separately then what about combinations say top left and bottom right together also.
Air Manager panels at https://www.experimentalsimavionics.com
Youtube Channel https://www.youtube.com/channel/UC8ZqXX ... kfZMq5BKig
Air Manager API Tutorial Video Series https://youtube.com/playlist?list=PLNr0 ... baT4gJKg5D
Youtube Channel https://www.youtube.com/channel/UC8ZqXX ... kfZMq5BKig
Air Manager API Tutorial Video Series https://youtube.com/playlist?list=PLNr0 ... baT4gJKg5D
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Styles for _stroke
Tony,
If I create a fence that has radius corners and fill lines then they cut the fence top and bottom.
Code: Select all
ckl_bgL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,20)
_fill("#262626")
end)
ckl_bdrL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,20)
_stroke("#CDCDCD" ,3)
end)
ck1_stripe1L = canvas_add(115,467, 463,20, function()
_rect(0,0,463,20,20)
_fill("#1F1F1F")
end)
ck1_stripe2L = canvas_add(115,507, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe3L = canvas_add(115,547, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe4L = canvas_add(115,587, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe5L = canvas_add(115,627, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe6L = canvas_add(115,667, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe7L = canvas_add(115,707, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe8L = canvas_add(115,747, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe9L = canvas_add(115,787, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
ck1_stripe10L = canvas_add(115,827, 463,20, function()
_rect(0,0,503,20)
_fill("#1F1F1F")
end)
Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board, 32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card
Re: Styles for _stroke
Then it’s time to create a generic parametric function for your convenience, should not be too difficult and would simplify your code.
Should cover your bases.
Jacques
Code: Select all
Function rounded_rect(x_orig,y_orig,width,height,left_top_corner_radius, right_top_corner_radius, left_bottom_corner_radius, right_bottom_corner_radius)
Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
Re: Styles for _stroke
As I said, quite simple, once designed with a quick sketch on paper.
Jacques
Be careful, no error checking at all, but you get the idea.
Code: Select all
x_orig1=50
y_orig1=50
width1=200
height1=300
left_top_radius1=40
right_top_radius1=30
left_bottom_radius1=60
right_bottom_radius1=20
stroke_color1="red"
stroke_width1=4
x_orig2=150
y_orig2=150
width2=350
height2=180
left_top_radius2=0
right_top_radius2=80
left_bottom_radius2=60
right_bottom_radius2=20
fill_color2="orange"
function rounded_rect(canvas_id,x_orig,y_orig,width,height,left_top_radius,right_top_radius,left_bottom_radius,right_bottom_radius,stroke_color,stroke_width)
canvas_draw(canvas_id,function()
-- original rectangle in green, comment these two lines
_rect(x_orig,y_orig,width,height,0)
_stroke("green",1)
-------
_arc(x_orig+left_top_radius,y_orig+left_top_radius,180,270,left_top_radius)
_line_to(x_orig+width-right_top_radius,y_orig)
_arc(x_orig+width-right_top_radius,y_orig+right_top_radius,270,0,right_top_radius)
_line_to(x_orig+width,y_orig+height-right_bottom_radius)
_arc(x_orig+width-right_bottom_radius,y_orig+height-right_bottom_radius,0,90,right_bottom_radius)
_line_to(x_orig+left_bottom_radius,y_orig+height)
_arc(x_orig+left_bottom_radius,y_orig+height-left_bottom_radius,90,180,left_bottom_radius)
_line_to(x_orig,y_orig+left_top_radius)
_stroke(stroke_color,stroke_width)
end)
end
function rounded_rect_filled(canvas_id,x_orig,y_orig,width,height,left_top_radius,right_top_radius,left_bottom_radius,right_bottom_radius,fill_color)
canvas_draw(canvas_id,function()
-- original rectangle in green for testing, comment these two lines
_rect(x_orig,y_orig,width,height,0)
_stroke("green",1)
-------
_arc(x_orig+left_top_radius,y_orig+left_top_radius,180,270,left_top_radius)
_line_to(x_orig+width-right_top_radius,y_orig)
_arc(x_orig+width-right_top_radius,y_orig+right_top_radius,270,0,right_top_radius)
_line_to(x_orig+width,y_orig+height-right_bottom_radius)
_arc(x_orig+width-right_bottom_radius,y_orig+height-right_bottom_radius,0,90,right_bottom_radius)
_line_to(x_orig+left_bottom_radius,y_orig+height)
_arc(x_orig+left_bottom_radius,y_orig+height-left_bottom_radius,90,180,left_bottom_radius)
_line_to(x_orig,y_orig+left_top_radius)
_fill(fill_color)
end)
end
rounded_rectangle_id1=canvas_add(0,0,500,500)
rounded_rect(rounded_rectangle_id1,x_orig1,y_orig1,width1,height1,left_top_radius1,right_top_radius1,left_bottom_radius1,right_bottom_radius1,stroke_color1,stroke_width1)
rounded_rectangle_id2=canvas_add(0,0,500,500)
rounded_rect_filled(rounded_rectangle_id2,x_orig2,y_orig2,width2,height2,left_top_radius2,right_top_radius2,left_bottom_radius2,right_bottom_radius2,fill_color2)
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
Re: Styles for _stroke
I'm not sure i follow what you need. What is the thing you are referring to as fences?Tony,
If I create a fence that has radius corners and fill lines then they cut the fence top and bottom.
It seems this will either need something like what Jacques posted or if you just want to square off some corners then you can draw a square in the relevant corners or perhaps you can just create what you want with a couple of shapes say a rect with no corner radius and one with. I have created a whole PFD with just the canvas tools so what you want is surely possible. A mixture of these basic shapes can produce any shape you want you just need to be creative. It may help to visualise it by drawing on some paper first.
Air Manager panels at https://www.experimentalsimavionics.com
Youtube Channel https://www.youtube.com/channel/UC8ZqXX ... kfZMq5BKig
Air Manager API Tutorial Video Series https://youtube.com/playlist?list=PLNr0 ... baT4gJKg5D
Youtube Channel https://www.youtube.com/channel/UC8ZqXX ... kfZMq5BKig
Air Manager API Tutorial Video Series https://youtube.com/playlist?list=PLNr0 ... baT4gJKg5D
Re: Styles for _stroke
Agreed with Tony. A drawing of some sort would help to visualize what you want to achieve. With the code I provided, guess you can achieve what you need, namely rectangles with rounded corners at the top or bottom only?
Then
Could be replaced by:
Provided the rounded_rect() function has been defined earlier in the code.
Jacques
Then
Code: Select all
ckl_bdrL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,20)
_stroke("#CDCDCD" ,3)
end)
Code: Select all
ckl_bdrL = canvas_add(110,460,470,395)
rounded_rect(ckl_bdrL,0,0,470,395,20,20,0,0,"#CDCDCD" ,3)
Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Styles for _stroke
Jacques, Tony,
Thank you for the code. I think it will work.
Tony the fence is everything contained within the red boarder.
This will illustrate better.
I have changed the top and bottom thick lines to white so that it highlights the issue.
I want to radius the the top thick line to fit the fence and radius the bottom thick line.
Keith
Thank you for the code. I think it will work.
Tony the fence is everything contained within the red boarder.
This will illustrate better.
I have changed the top and bottom thick lines to white so that it highlights the issue.
I want to radius the the top thick line to fit the fence and radius the bottom thick line.
Code: Select all
mbg = canvas_add(0, 0, 900, 900, function()
_rect(0,0,900,900)
_fill("black")
end)
fen_big = canvas_add(0, 0,900, 900, function()
_rect(0,0,900,900)
_stroke("#CDCDCD" ,10)
end)
cht_bgL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,50)
_fill("#262626")
end)
ck1_stripe20L = canvas_add(113,465, 465,60, function()
_rect(0,0,465,60)
_fill("white")
end)
ck1_stripe21L = canvas_add(113,585, 465,60, function()
_rect(0,0,465,60)
_fill("#1F1F1F")
end)
ck1_stripe22L = canvas_add(113,700, 465,60, function()
_rect(0,0,465,60)
_fill("#1F1F1F")
end)
ck1_stripe23L = canvas_add(113,820, 465,30, function()
_rect(0,0,465,30)
_fill("white")
end)
fen_bgL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,50)
_stroke("red" ,5)
end)
Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board, 32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card
Re: Styles for _stroke
Ok I got it: something like this:
Jacques
so this code will do.
Code: Select all
function rounded_rect(canvas_id,x_orig,y_orig,width,height,left_top_radius,right_top_radius,left_bottom_radius,right_bottom_radius,stroke_color,stroke_width)
canvas_draw(canvas_id,function()
_arc(x_orig+left_top_radius,y_orig+left_top_radius,180,270,left_top_radius)
_line_to(x_orig+width-right_top_radius,y_orig)
_arc(x_orig+width-right_top_radius,y_orig+right_top_radius,270,0,right_top_radius)
_line_to(x_orig+width,y_orig+height-right_bottom_radius)
_arc(x_orig+width-right_bottom_radius,y_orig+height-right_bottom_radius,0,90,right_bottom_radius)
_line_to(x_orig+left_bottom_radius,y_orig+height)
_arc(x_orig+left_bottom_radius,y_orig+height-left_bottom_radius,90,180,left_bottom_radius)
_line_to(x_orig,y_orig+left_top_radius)
_stroke(stroke_color,stroke_width)
end)
end
function rounded_rect_filled(canvas_id,x_orig,y_orig,width,height,left_top_radius,right_top_radius,left_bottom_radius,right_bottom_radius,fill_color)
canvas_draw(canvas_id,function()
_arc(x_orig+left_top_radius,y_orig+left_top_radius,180,270,left_top_radius)
_line_to(x_orig+width-right_top_radius,y_orig)
_arc(x_orig+width-right_top_radius,y_orig+right_top_radius,270,0,right_top_radius)
_line_to(x_orig+width,y_orig+height-right_bottom_radius)
_arc(x_orig+width-right_bottom_radius,y_orig+height-right_bottom_radius,0,90,right_bottom_radius)
_line_to(x_orig+left_bottom_radius,y_orig+height)
_arc(x_orig+left_bottom_radius,y_orig+height-left_bottom_radius,90,180,left_bottom_radius)
_line_to(x_orig,y_orig+left_top_radius)
_fill(fill_color)
end)
end
mbg = canvas_add(0, 0, 900, 900, function()
_rect(0,0,900,900)
_fill("black")
end)
fen_big = canvas_add(0, 0,900, 900, function()
_rect(0,0,900,900)
_stroke("#CDCDCD" ,10)
end)
cht_bgL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,50)
_fill("#262626")
end)
ck1_stripe20L = canvas_add(113,465, 465,60)
rounded_rect_filled(ck1_stripe20L,0,0,465,60,50,50,0,0,"white")
ck1_stripe21L = canvas_add(113,585, 465,60, function()
_rect(0,0,465,60)
_fill("#1F1F1F")
end)
ck1_stripe22L = canvas_add(113,700, 465,60, function()
_rect(0,0,465,60)
_fill("#1F1F1F")
end)
ck1_stripe23L = canvas_add(113,820, 465,30)
rounded_rect_filled(ck1_stripe23L,0,0,465,30,0,0,50,50,"white")
fen_bgL = canvas_add(110,460,470,395, function()
_rect(0,0,470,395,50)
_stroke("red" ,5)
end)
Last edited by JackZ on Sun Mar 10, 2019 7:16 pm, edited 1 time in total.
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ
- Keith Baxter
- Posts: 4674
- Joined: Wed Dec 20, 2017 11:00 am
- Location: Botswana
Re: Styles for _stroke
100% Jacques,
Jacques,
I am keeping a library of all the code on how to do different things that you,Tony and Corjan are sharing.
It would be awesome if all these tricks could be kept in a library in the forum, or a link to the wiki so that others have the ability to look them up.
Keith
Jacques,
I am keeping a library of all the code on how to do different things that you,Tony and Corjan are sharing.
It would be awesome if all these tricks could be kept in a library in the forum, or a link to the wiki so that others have the ability to look them up.
Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board, 32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card