Styles for _stroke

Let Sim Innovations know about your Air Manager experience and let us know about your dream feature addition

Moderators: russ, Ralph

Message
Author
User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Styles for _stroke

#11 Post by Keith Baxter »

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

User avatar
Sling
Posts: 5237
Joined: Mon Sep 11, 2017 2:37 pm
Contact:

Re: Styles for _stroke

#12 Post by Sling »

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.

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Styles for _stroke

#13 Post by Keith Baxter »

Sling wrote: Sun Mar 10, 2019 6:03 am 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.
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)
I have a lot of different fences.

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 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Styles for _stroke

#14 Post by JackZ »

Then it’s time to create a generic parametric function for your convenience, should not be too difficult and would simplify your code.

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)
Should cover your bases.

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Styles for _stroke

#15 Post by JackZ »

As I said, quite simple, once designed with a quick sketch on paper.
Capture.JPG
Capture1.JPG
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)
Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Sling
Posts: 5237
Joined: Mon Sep 11, 2017 2:37 pm
Contact:

Re: Styles for _stroke

#16 Post by Sling »

Tony,
If I create a fence that has radius corners and fill lines then they cut the fence top and bottom.
I'm not sure i follow what you need. What is the thing you are referring to as fences?

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.

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Styles for _stroke

#17 Post by JackZ »

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

Code: Select all

ckl_bdrL = canvas_add(110,460,470,395, function()
	_rect(0,0,470,395,20)
	_stroke("#CDCDCD" ,3)
end)
Could be replaced by:

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)
Provided the rounded_rect() function has been defined earlier in the code.

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Styles for _stroke

#18 Post by Keith Baxter »

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.

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 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Styles for _stroke

#19 Post by JackZ »

Ok I got it: something like this:
Capture.JPG
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)
Jacques
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

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Styles for _stroke

#20 Post by Keith Baxter »

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

Post Reply