How to manipulate Canvas elements: Difference between revisions

How to manipulate Canvas elements (view source)

271 bytes added , 6 December 2017

229

edits

@@ Line 251: / Line 251: @@
 Open the '''Nasal REPL Interpreter''' and execute (you can copy&paste, then {{key press|Enter}}:
 <syntaxhighlight>
- var window = canvas.Window.new([300,200],"dialog").set("title","Plot2D demo"  );
+var window = canvas.Window.new([300,200],"dialog").set("title","Plot2D demo"  );
- var myCanvas = window.createCanvas().set("background", "#eeeeee");
+var myCanvas = window.createCanvas().set("background", "#eeeeee");
- var root = myCanvas.createGroup();
+var root = myCanvas.createGroup();
- var myGroup = root.createChild("group");</syntaxhighlight>
+var myGroup = root.createChild("group");</syntaxhighlight>
 We have our new canvas, ready to play with.<br />
 At the ''>>>'' prompt type:<syntaxhighlight>
- var arrow = canvas.plot2D.polyline(myGroup,[90,120,10],[20,30,30],'#0',"y").setStrokeLineWidth(3);</syntaxhighlight>
+var arrow = canvas.plot2D.polyline(myGroup,[90,120,10],[20,30,30],'#0',"y").setStrokeLineWidth(3);</syntaxhighlight>
 Do not forget the {{key press|Enter}}.<br />
-You should have something like [[File:My_Arrow.png|none]] Noy
+You should have something like this:[[File:My_Arrow.png|thumb]]<br />
+Let's get closer to see some hidden stuff:<br />
+[[File:Arrow.gif|none]] <br />
+Our '''''arrow''''' has (like any other element) its own (intrinsic) coordinate system. Typing:
+<syntaxhighlight>
+arrow.getBoundingBox();
+</syntaxhighlight> you get [8.5,18.5, 121.5,41.5]