13,255
edits
Canvas draw library: Difference between revisions
Jump to navigation
Jump to search
m
Heading level cleanup first level (one =)should not be used; fix double redirect
m (Heading level cleanup first level (one =)should not be used; fix double redirect) |
|||
| Line 1: | Line 1: | ||
{{tip|The basic canvas.draw library was merged into FGDATA in 03/2020 so it available by default now. }} | {{tip|The basic canvas.draw library was merged into FGDATA in 03/2020 so it available by default now. }} | ||
{{Canvas Navigation}} | |||
== Introduction == | |||
= Introduction = | |||
There are basically two ways to populate a canvas, loading an SVG file which | There are basically two ways to populate a canvas, loading an SVG file which | ||
has been created with some tool like inkscape, or by writing a nasal program | has been created with some tool like inkscape, or by writing a nasal program | ||
| Line 12: | Line 12: | ||
to provide more drawing commands. | to provide more drawing commands. | ||
{{Note|Development of this library started in 12/2018 as a separate [[ | {{Note|Development of this library started in 12/2018 as a separate [[Addon|CanvasDrawDev add-on]] and is largely based on GPL'ed [[How to manipulate Canvas elements|plot2D code]] written originally by {{Usr|Rodolfo}} | ||
(rleibner on the forums) as part of the [[Spoken GCA]], [[PAR instrument]] and [[Oscilloscope addon|Oscilloscope]] add-ons.}} | (rleibner on the forums) as part of the [[Spoken GCA]], [[PAR instrument]] and [[Oscilloscope addon|Oscilloscope]] add-ons.}} | ||
== Goals == | === Goals === | ||
* Make the code flexible and powerful so people will like to use it | * Make the code flexible and powerful so people will like to use it | ||
* Provide complex drawing commands needed for e.g. compass rose or speed tapes | * Provide complex drawing commands needed for e.g. compass rose or speed tapes | ||
* Provide easy to use styles | * Provide easy to use styles | ||
= canvas.draw API = | == canvas.draw API == | ||
== draw module == | === draw module === | ||
{{note|All draw methods expect a canvas group element 'cgroup' as first parameter to draw on.}} | {{note|All draw methods expect a canvas group element 'cgroup' as first parameter to draw on.}} | ||
=== draw.colors === | ==== draw.colors ==== | ||
A hash with some standard colors like white, black, red, green, blue, cyan, magenta, yellow, orange. | A hash with some standard colors like white, black, red, green, blue, cyan, magenta, yellow, orange. | ||
Just in case you need them ;) | Just in case you need them ;) | ||
=== circle() === | ==== circle() ==== | ||
circle(cgroup, radius, center_x = nil, center_y = nil) | circle(cgroup, radius, center_x = nil, center_y = nil) | ||
| Line 35: | Line 35: | ||
'''center_x''', '''center_y''' optional center of circle | '''center_x''', '''center_y''' optional center of circle | ||
=== ellipse() === | ==== ellipse() ==== | ||
ellipse(cgroup, radius, center_x = nil, center_y = nil) | ellipse(cgroup, radius, center_x = nil, center_y = nil) | ||
| Line 42: | Line 42: | ||
'''center_x''', '''center_y''' optional center of ellipse | '''center_x''', '''center_y''' optional center of ellipse | ||
=== arc() === | ==== arc() ==== | ||
[[File:Canvas-draw-scales03.png|thumb|circular marks]] | [[File:Canvas-draw-scales03.png|thumb|circular marks]] | ||
arc(cgroup, radius, center, from_deg = nil, to_deg = nil) | arc(cgroup, radius, center, from_deg = nil, to_deg = nil) | ||
| Line 62: | Line 62: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== rectange() === | ==== rectange() ==== | ||
rectangle(cgroup, width, height, x = 0, y = 0, rounded = nil) | rectangle(cgroup, width, height, x = 0, y = 0, rounded = nil) | ||
| Line 71: | Line 71: | ||
'''rounded''' optional radius of corners in pixel | '''rounded''' optional radius of corners in pixel | ||
=== square() === | ==== square() ==== | ||
square(cgroup, length, center_x = 0, center_y = 0, cfg = nil) | square(cgroup, length, center_x = 0, center_y = 0, cfg = nil) | ||
shorthand for rectangle with width = height = length | shorthand for rectangle with width = height = length | ||
=== deltoid() === | ==== deltoid() ==== | ||
[[File:Canvas-draw-shapes01.png|thumbnail|right]] | [[File:Canvas-draw-shapes01.png|thumbnail|right]] | ||
deltoid (cgroup, dx, dy1, dy2, x = 0, y = 0) | deltoid (cgroup, dx, dy1, dy2, x = 0, y = 0) | ||
| Line 113: | Line 113: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== rhombus() / diamond() === | ==== rhombus() / diamond() ==== | ||
rhombus: func(cgroup, dx, dy, center_x = 0, center_y = 0) | rhombus: func(cgroup, dx, dy, center_x = 0, center_y = 0) | ||
| Line 125: | Line 125: | ||
=== grid() === | ==== grid() ==== | ||
[[File:Canvas-draw-grids01.png|thumbnail|right]] | [[File:Canvas-draw-grids01.png|thumbnail|right]] | ||
Draw horizontal and verical lines. Two signatures are available | Draw horizontal and verical lines. Two signatures are available | ||
| Line 150: | Line 150: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== Marks == | === Marks === | ||
Marks can be used to create scales / gauges. | Marks can be used to create scales / gauges. | ||
=== marksLinear() === | ==== marksLinear() ==== | ||
[[File:Canvas-draw-scales01.png|thumb|linear marks (horizontal)|right]] | [[File:Canvas-draw-scales01.png|thumb|linear marks (horizontal)|right]] | ||
[[File:Canvas-draw-scales02.png|thumb|linear marks (vertical)|right]] | [[File:Canvas-draw-scales02.png|thumb|linear marks (vertical)|right]] | ||
| Line 197: | Line 197: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== marksCircular() === | ==== marksCircular() ==== | ||
[[File:Canvas-draw-scales03.png|thumb|circular marks|right]] | [[File:Canvas-draw-scales03.png|thumb|circular marks|right]] | ||
marksCircular(cgroup, radius, interval, phi_start = 0, phi_stop = 360, style = nil) | marksCircular(cgroup, radius, interval, phi_start = 0, phi_stop = 360, style = nil) | ||
| Line 231: | Line 231: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== draw.style == | === draw.style === | ||
Base class for styles. | Base class for styles. | ||
== draw.marksStyle == | === draw.marksStyle === | ||
Parameter hash for drawing marks (see above). | Parameter hash for drawing marks (see above). | ||
=== new() === | ==== new() ==== | ||
Create a new style instance. | Create a new style instance. | ||
<syntaxhighlight lang="nasal"> | <syntaxhighlight lang="nasal"> | ||
| Line 243: | Line 243: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== setMarkLength() === | ==== setMarkLength() ==== | ||
Set length of marker in %interval or %radius | Set length of marker in %interval or %radius | ||
=== setMarkOffset() === | ==== setMarkOffset() ==== | ||
Set alignment of markers. | Set alignment of markers. | ||
| Line 264: | Line 264: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== setMarkWidth() === | ==== setMarkWidth() ==== | ||
Set line width in pixel. | Set line width in pixel. | ||
=== setSubdivisions() === | ==== setSubdivisions() ==== | ||
Set number of subdivisions (default = 0). | Set number of subdivisions (default = 0). | ||
=== setSubdivisionLength() === | ==== setSubdivisionLength() ==== | ||
Set length of subdivision marker in %marker_length | Set length of subdivision marker in %marker_length | ||
== transform module == | === transform module === | ||
The following methods are available to manipulate existing canvas elements. | The following methods are available to manipulate existing canvas elements. | ||
{{note|This chapter is a draft, see {{code|FGDATA/Nasal/canvas/draw/transform.nas}} for details }} | {{note|This chapter is a draft, see {{code|FGDATA/Nasal/canvas/draw/transform.nas}} for details }} | ||
{{note|All transform methods expect a canvas element as first parameter.}} | {{note|All transform methods expect a canvas element as first parameter.}} | ||
=== move() === | ==== move() ==== | ||
params: elem, dx, dy | params: elem, dx, dy | ||
===rotate() === | ==== rotate() ==== | ||
params: elem, deg, center | params: elem, deg, center | ||
=== flipX() === | ==== flipX() ==== | ||
params: elem, xaxis = 0 | params: elem, xaxis = 0 | ||
mirror element on x-axis | mirror element on x-axis | ||
=== flipY() === | ==== flipY() ==== | ||
params: elem, yaxis = 0 | params: elem, yaxis = 0 | ||
mirror element on y-axis | mirror element on y-axis | ||
=== alignX() === | ==== alignX() ==== | ||
Aligns the element, moving it horizontaly to ref. | Aligns the element, moving it horizontaly to ref. | ||
| Line 307: | Line 307: | ||
=== alignY() === | ==== alignY() ==== | ||
Aligns the element, moving it vertically to ref. | Aligns the element, moving it vertically to ref. | ||
| Line 321: | Line 321: | ||
=== rotate180() === | ==== rotate180() ==== | ||
params: elem, center = nil | params: elem, center = nil | ||
center as [x,y] in pixels, otherwise: rotate in place | center as [x,y] in pixels, otherwise: rotate in place | ||
=== scaleX() === | ==== scaleX() ==== | ||
Stretch element horizontally | Stretch element horizontally | ||
| Line 337: | Line 337: | ||
ref the relative point to keep inplace. May be 'left', 'center' or 'right'. | ref the relative point to keep inplace. May be 'left', 'center' or 'right'. | ||
=== scaleY() === | ==== scaleY() ==== | ||
strech element vertically | strech element vertically | ||
| Line 348: | Line 348: | ||
ref the relative point to keep inplace. May be 'top', 'center' or 'bottom'. | ref the relative point to keep inplace. May be 'top', 'center' or 'bottom'. | ||
=== resize() === | ==== resize() ==== | ||
params: | params: | ||
| Line 359: | Line 359: | ||
may be 'left-top', 'left-center', 'left-bottom', 'center-top', 'center-center', 'center-bottom', 'right-top', 'right-center', 'right-bottom'. | may be 'left-top', 'left-center', 'left-bottom', 'center-top', 'center-center', 'center-bottom', 'right-top', 'right-center', 'right-bottom'. | ||
= References = | == References == | ||
[[CompassRose]] is based on canvas draw. | [[CompassRose]] is based on canvas draw. | ||
{{Note|You can test, improve and play around with canvas.draw by downloading the [[ | {{Note|You can test, improve and play around with canvas.draw by downloading the [[Addon|CanvasDrawDev add-on]]. }} | ||