Drawmethoden von WebDrawing3D

Für alle zweidimensionalen Zeichenbefehle gilt: Wenn WebDevice.PolygonMode=FillMode.Line gesetzt ist, so wird die Figur mit der Farbe WebDevice.Emission als Linie gezeichnet, ansonsten wird die Figur mit dem Material, das in WebDevice.Material gespeichert ist, gefüllt. Es gibt die Möglichkeit, ein Material aus einer Farbe zu erstellen durch Material.getMaterialFromColor(Farbe).
In WebDevice.ClippArray kann ein Array vom Typ Listofxyarray gesetzt werden, der die zweidimensionalen Zeichenbefehle clippt.
In WebDevice.LGradient kann ein linearer Gradient gesetzt werden.
Beim Create des Gradient wird die Richtung mit gegeben:
z.B:
WebDevice.LGradient=new LinearGradient(new xy(-4,0),new xy(8,5));
Der Gradient enthält ColorStops. Hier können die Farben gesetzt werden. Sie sind eine Liste von ColorStop.
Ein ColorStop enthält eine Farbe und einen Parameter zwischen 0 und 1, der sich auf die Richtung, die beim Erzeugen des Gradienten verwendet wird, bezieht.
Beispiel:

var ColorStop1 = new ColorStop(0.2,Color.Blue);
var ColorStop2 = new ColorStop(0.5,Color.Red);
var ColorStop3 = new ColorStop(0.8,Color.Yellow);
WebDevice.LGradient= new LinearGradient(new xy(-4,0),new xy(8,5));
WebDevice.LGradient.ColorStops.add(ColorStop1);
WebDevice.LGradient.ColorStops.add(ColorStop2);
WebDevice.LGradient.ColorStops.add(ColorStop3);

drawRectangle(xy A, xy B)

Zeichnet ein Rechteck mit den Ecken A und B.

Z.B.:
var A= new xy(0,0);
var B= new xy(6,5);
WebDevice.PolygonMode=FillMode.Line; // setzt den Linemodus
WebDevice.Emission=Color.Green; // setzt die Farbe auf Grün im Linemodus
//WebDevice.Material=Material.getMaterialFromColor(Color.Red); // erzeugt ein rotes Material und setzt es in die Device
WebDevice.drawRectangle(A, B);

WebGL example draw Rectangle:
<html> <body> <canvas id="myCanvas" width="600" height="400"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="bridge.js"></script> <script src="WebDrawing3d.js"></script> <script src="Classes.js"></script> <script> // das HTML Element vom canvas anfordern. var canvas = document.getElementById("myCanvas"); var WebDevice = new Device(canvas); WebDevice.BackGround=Color.WhiteSmoke; var A= new xy(0,0); var B= new xy(6,5); // setzt den Linemodus WebDevice.PolygonMode=FillMode.Line; // setzt die Farbe auf Grün im Linemodus WebDevice.Emission=Color.Green; // erzeugt ein rotes Material und setzt es in die Device im Fillmodus //WebDevice.Material=Material.getMaterialFromColor(Color.Red); WebDevice.Paint = draw; WebDevice.Refresh(); function draw() { WebDevice.drawRectangle(A, B); } </script> </body> </html>

Dies ergibt folgendes Ergebnis:

drawPolyLine(xyarray Polygon)

WebGL example draw Polygon:
Z.B.:

Dies ergibt folgendes Ergebnis:

drawPolyPolyLine(Listofxyarray PolyPolygon)

Keinen Sinn macht drawPolyPolyLine im Linemodus, da in diesem Fall mehrere drawPolyline verwendet werden können.
WebGL example draw Polygon and Holes:

Dies ergibt folgendes Ergebnis:

drawPolyCurve(CurveArray CA)

Kurven werden in Kurven beschrieben. Curvearray ist eine Liste von Kurven. mit drawPolyCurve kann so eine Liste gezeichnet werden.

WebGL example draw Curves:

Z.B.: <html> <body> <canvas id="myCanvas" width="600" height="400"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="bridge.js"></script> <script src="WebDrawing3d.js"></script> <script src="Classes.js"></script> <script> // das HTML Element vom canvas anfordern. var canvas = document.getElementById("myCanvas"); var WebDevice = new Device(canvas); WebDevice.BackGround=Color.WhiteSmoke; var Curves = new CurveArray(); var B = new Bezier() var CP= new xyarray(); CP.add(new xy(-3,0)); CP.add(new xy(0,2)); CP.add(new xy(3,5)); CP.add(new xy(4,1)); B.ControlPoints= CP; var L = new Line(); L.A= new xy(4,1); L.B= new xy(3,5); var QS = new qSpline(); QS.A= new xy(3,5); QS.B = new xy(-3,8); QS.Controlpoint= new xy(1,10); var SI = new SplineInterpolation(); var IP= new xyarray(); IP.add(new xy(-3,8)); IP.add(new xy(-6,6)); IP.add(new xy(-8,4)); IP.add(new xy(-5,2)); IP.add(new xy(-3,0)); SI.InterpolationPoints=IP; var CA = new CurveArray(); CA.add(B); CA.add(L); CA.add(QS); CA.add(SI); WebDevice.PolygonMode = FillMode.Line; WebDevice.Paint = draw; WebDevice.Refresh(); function draw() { WebDevice.drawPolyCurve(CA); } </script> </body> </html>

Dies ergibt folgendes Ergebnis:

drawPolyPolyCurve(Loca L)

Eine Liste von Curvearrays kann mit drawPolyPolyCurve(Liste) gezeichnet werden. Die Verwendung im Linemodus ist nicht sinnvoll, da mehrere drawPolyCurve-methoden aufgerufen werden können.

WebGL example draw Curves and Holes:

<html> <body> <canvas id="myCanvas" width="600" height="400"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="bridge.js"></script> <script src="WebDrawing3d.js"></script> <script src="Classes.js"></script> <script> // das HTML Element vom canvas anfordern. var canvas = document.getElementById("myCanvas"); var WebDevice = new Device(canvas); WebDevice.BackGround=Color.WhiteSmoke; var Curves = new CurveArray(); var B = new Bezier() var CP= new xyzarray(); CP.add(new xyz(4,1)); CP.add(new xyz(3,5)); CP.add(new xyz(0,2)); CP.add(new xyz(-3,0)); B.ControlPoints= CP; var L = new Line(); L.A= new xy(3,5); L.B= new xy(4,1); var QS = new qSpline(); QS.A = new xy(-3,8); QS.B= new xy(3,5); QS.Controlpoint= new xy(1,10); var SI = new SplineInterpolation(); var IP= new xyarray(); IP.add(new xy(-3,0)); IP.add(new xy(-5,2)); IP.add(new xy(-8,4)); IP.add(new xy(-6,6)); IP.add(new xy(-3,8)); var PC= new Loca(); var CI = new Circle(); CI.aRadius= 2; CI.bRadius= 1; CI.Center= new xy(-3,4) SI.InterpolationPoints=IP; var CA1 = new CurveArray(); CA1.add(SI); CA1.add(QS); CA1.add(L); CA1.add(B); var CA2 = new CurveArray(); CA2.add(CI); PC.add(CA1); PC.add(CA2); //WebDevice.PolygonMode = FillMode.Line; WebDevice.Material = Material.PolishedSilver; WebDevice.Paint = draw; WebDevice.Refresh(); function draw() { WebDevice.drawPolyPolyCurve(PC); } </script> </body> </html>

Dies schaut so aus: ( Man sieht das Blenden des Lichtes gut.)

WebGL example ClippArray:

<html>
<body>
<canvas id="myCanvas" width="600" height="400">
 Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="bridge.js"></script>
<script src="WebDrawing3d.js"></script>
<script src="Classes.js"></script>
<script>   // das HTML Element vom canvas anfordern.
var canvas = document.getElementById("myCanvas");
var WebDevice = new Device(canvas);
 WebDevice.BackGround=Color.WhiteSmoke;
var Curves = new CurveArray();
var B = new Bezier()
var CP= new xyzarray();
CP.add(new xyz(4,1));
CP.add(new xyz(3,5));
CP.add(new xyz(0,2));
CP.add(new xyz(-3,0));
B.ControlPoints= CP;
var L = new Line(); 
L.A= new xy(3,5);
L.B= new xy(4,1);
var QS = new qSpline();
 QS.A = new xy(-3,8);
 QS.B= new xy(3,5);
QS.Controlpoint= new xy(1,10);
var SI = new SplineInterpolation();
var IP= new xyarray();
IP.add(new xy(-3,0));
IP.add(new xy(-5,2));
IP.add(new xy(-8,4));
IP.add(new xy(-6,6));
IP.add(new xy(-3,8));
var PC= new Loca();
var CI = new Circle();
 CI.aRadius= 2;
 CI.bRadius= 1;
 CI.Center= new xy(-3,4)
SI.InterpolationPoints=IP; 
var CA1 = new CurveArray();
CA1.add(SI);
CA1.add(QS);
CA1.add(L);
CA1.add(B);
var CA2 = new CurveArray();
CA2.add(CI);
PC.add(CA1);
PC.add(CA2);
var clip = new Listofxyarray();
var A = new xyarray();
clip.add(A);
A.add(new xy(-6,-1));
A.add(new xy(-6,8));
A.add(new xy(5,8));
A.add(new xy(5,-1));
A.add(new xy(-6,-1));
var B = new xyarray();
clip.add(B);
B.add(new xy(-3,2));
B.add(new xy(0,2));
B.add(new xy(0,4));
B.add(new xy(-3,4));
B.add(new xy(-3,2));
WebDevice.ClippArray= clip;
WebDevice.Material = Material.PolishedSilver;
WebDevice.Paint = draw;
WebDevice.Refresh();
function draw() {
WebDevice.drawPolyPolyCurve(PC);
WebDevice.PolygonMode = FillMode.Line;
WebDevice.Emission= Color.Red;
WebDevice.LineWidth=4;
WebDevice.drawPolyPolyLine(clip);
WebDevice.PolygonMode = FillMode.Fill;
WebDevice.Emission= Color.Black;
}

</script>
</body>
</html>

Dies ergibt folgendes Ergebnis:

WebGL example linearer Gradient:

Dies ergibt folgendes Ergebnis:

drawSphere(xyz Center, float Radius)

Eine Kugel kann einfach mit dem Befehl WebDevice.drawSphere(xyz Center, float Radius) erzeugt werden.

WebGL example draw Sphere:

Dies ergibt folgendes Ergebnis:

drawBox(xyz Point, xyz Size)

WebGL example draw Box:

Das sieht dann so aus: