229
edits
How to manipulate Canvas elements: Difference between revisions
Jump to navigation
Jump to search
How to manipulate Canvas elements (view source)
Revision as of 19:25, 5 December 2017
, 5 December 2017no edit summary
No edit summary |
|||
| Line 3: | Line 3: | ||
'''Plot2D''' is nothing more than a collection of helpers that aims to facilitate the task of coding. It makes intensive use of the [[Canvas Nasal API|Canvas API]], a mandatory reference for those who intend to refine the result beyond what is offered by plot2D.<br /> | '''Plot2D''' is nothing more than a collection of helpers that aims to facilitate the task of coding. It makes intensive use of the [[Canvas Nasal API|Canvas API]], a mandatory reference for those who intend to refine the result beyond what is offered by plot2D.<br /> | ||
It is assumed here that you already have a minimal knowledge about [[Canvas]].<br /> | It is assumed here that you already have a minimal knowledge about [[Canvas]].<br /> | ||
For now '''Plot2D''' resides in the '''SpokenGCA''' addon | For now '''Plot2D''' resides in the '''SpokenGCA''' addon, but the idea is that in the future it could be included in the $FG-ROOT/Nasal/canvas directory.<br /> | ||
If you have not the SpokenGCA addon installed, you may download '''''plot2D.nas''''' from [https://sourceforge.net/p/flightgear/fgaddon/HEAD/tree/trunk/Addons/SpokenGCA/plot2D.nas here], put it into your ''$FG-HOME/Nasal/'' folder and then execute: | |||
<syntaxhighlight lang='Nasal'> | |||
var root = getprop("/sim/fg-root"); | |||
io.load_nasal( root ~ '/Nasal/plot2D.nas', "canvas" ); | |||
</syntaxhighlight>Once executed, you can try the examples given below.<br /> | |||
== ''"Create"'' helpers == | == ''"Create"'' helpers == | ||
| Line 113: | Line 118: | ||
* '''align''' optional origin reference. "left-baseline" by default. | * '''align''' optional origin reference. "left-baseline" by default. | ||
<hr/> | <hr/> | ||
=== polyline === | |||
'''parameters''': (group, xSet, ySet, color="#0", symmetrical=' ') | |||
Plots a polyLine as <'''group'''>'s child. | |||
* '''xSet''' as [x0,...,xn] in pixels. | |||
* '''ySet''' as [y0,...,yn] in pixels. | |||
* '''color''' optional grid color as [r,g,b] or "#rrggbb". Black by default. | |||
* '''symmetrical''' optional string, may be 'x', 'y', 'xy' or 'yx'. Non symmetrical by default. | |||
{| class="wikitable" | |||
|- | |||
! example !! Screenshot | |||
|- | |||
| | |||
{{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang="xml"> | |||
var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ]; | |||
canvas.plot2D.polyline(myGroup,[150,181,194,157,199],[52,20,64,28,36]); | |||
## 3 vertices with default values: | |||
canvas.plot2D.polyline(myGroup,[20,30,70],[15,55,65]); | |||
canvas.plot2D.text(myGroup,'defaults',[75,25]); | |||
## 3 vertices with symmetrical = 'x': | |||
canvas.plot2D.polyline(myGroup,[20,30,70],[130,170,180],blue,"x"); | |||
canvas.plot2D.text(myGroup,'Symmetrical="x"',[20,195],,blue); | |||
## 3 vertices with symmetrical = 'y': | |||
canvas.plot2D.polyline(myGroup,[150,160,200],[90,130,140],red,"y"); | |||
canvas.plot2D.text(myGroup,'Symmetrical="y"',[198,180],,red,'right-baseline'); | |||
## 3 vertices with symmetrical = 'xy': | |||
canvas.plot2D.polyline(myGroup,[50,60,100],[100,140,150],green,"xy"); | |||
canvas.plot2D.text(myGroup,'Symmetrical="xy"',[55,75],,green); | |||
## 3 vertices with symmetrical = 'yx': | |||
canvas.plot2D.polyline(myGroup,[100,110,150],[50,90,100],orange,"yx"); | |||
canvas.plot2D.text(myGroup,'Symmetrical="yx"',[12,125],,orange); | |||
</syntaxhighlight> | |||
|| [[File:Plot2D.polyline.png|thumb|plot2D.polyline example]] | |||
|} | |||
<hr/> | |||
=== polyline === | === polyline === | ||
'''parameters''': (group, xSet, ySet, color="#0", symmetrical=' ') | '''parameters''': (group, xSet, ySet, color="#0", symmetrical=' ') | ||