How to manipulate Canvas elements: Difference between revisions

Jump to navigation Jump to search
No edit summary
Line 152: Line 152:
|}
|}
<hr/>
<hr/>
=== polyline ===
=== graphic ===
  '''parameters''': (group, xSet, ySet, color="#0", symmetrical=' ')
  '''parameters''': (group, ySet, dx=1, origin=nil, color="#0"
Plots a polyLine as <'''group'''>'s child.
Plots the curve sampled in <'''ySet'''> with a resolution of <'''dx'''>.
* '''xSet''' as [x0,...,xn] in pixels.
* '''ySet''' as [y0,...,yn] in pixels.
* '''ySet''' as [y0,...,yn] in pixels.
* '''dx''' optional curve resolution in pixels. 1 px by default.
* '''origin''' optional as [x,y] in pixels, [0,0] by default.
* '''color''' optional grid color as [r,g,b] or "#rrggbb". Black  by default.
* '''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"
{| class="wikitable"
|-
|-
Line 165: Line 165:
|
|
  {{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang="nasal">
  {{Note| This assumes that you already have a top-level root group set up, and his ''group'' child named '''myGroup'''. }} <syntaxhighlight lang="nasal">
var (red,blue,green,orange) = ['#ee0000', [0,0,1], [0,0.8,0], '#ea9a32' ];
  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]);
  var yValues = [];
  ## 3 vertices with default values:
  for(var i=0;i<460;i+=4) append(yValues, 30*math.sin(i*D2R));
canvas.plot2D.polyline(myGroup,[20,30,70],[15,55,65]);
  canvas.plot2D.hzLine(myGroup, [10,100],175,blue);
canvas.plot2D.text(myGroup,'defaults',[75,25]);
  canvas.plot2D.vtLine(myGroup, [15,180],-175,blue);
  ## 3 vertices with symmetrical = 'x':
  canvas.plot2D.graphic(myGroup, yValues,,[]15,100,red);
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>
</syntaxhighlight>
|| [[File:Plot2D.polyline.png|thumb|plot2D.polyline example]]
|| [[File:Plot2D.polyline.png|thumb|plot2D.polyline example]]
|}
|}
229

edits

Navigation menu