Grafik-Klassen
Board
Dieses Objekt repräsentiert die gesamte Animation
let myBoard = new Board(1280, 720);▼ Parameter zur Initialisierung
width
Breite des Elements in Pixeln
height
Höhe des Elements in Pixeln
color
Farbe im Hexadezimalformat (z.B. 0xff0000)
▼ Methoden (für komplexe Änderungen)
setFramerate
Setzt die Bildrate der Animation. Ohne gesonderte Einstellung ist der Wert 60.
objektname.setFramerate(50)setAdaptiveFramerate
Bildrate passt sich der Leistungsfähigkeit optimal an mit der eingestellten Bildrate als Soll-Wert.
objektname.setAdaptiveFramerate(true)Group
Gruppe von grafischen Objekten
let myGroup = new Group();▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung der Gruppe in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
addChild
Fügt ein Objekt zur Gruppe hinzu
objektname.addChild(rectangle)removeChild
Entfernt ein Objekt aus der Gruppe
objektname.removeChild(rectangle)setTransformationPoint
Setzt den Ankerpunkt für die Positionierung (x, y in Pixeln relativ zum Element)
objektname.setTransformationPoint(50, 50)setRotationPoint
Setzt den Drehpunkt (x, y in Pixeln relativ zum Elementursprung)
objektname.setRotationPoint(25, 25)setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)getBounds
Gibt die Begrenzungsbox der Gruppe zurück
objektname.getBounds()setMask
Setzt eine rechteckige Maske für die Gruppe
objektname.setMask(10, 20, 100, 80)removeMask
Entfernt die Maske von der Gruppe
objektname.removeMask()onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Rectangle
Rechteckiges grafisches Element
let myRectangle = new Rectangle(200, 100, 0xff0000);▼ Parameter zur Initialisierung
width
Breite des Elements in Pixeln
height
Höhe des Elements in Pixeln
color
Farbe im Hexadezimalformat (z.B. 0xff0000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen (Farbe im Hexadezimalformat, Dicke in Pixeln)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Setzt den Ankerpunkt für die Positionierung (x, y in Pixeln relativ zum Element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Drehpunkt (x, y in Pixeln relativ zum Elementursprung)
objektname.setRotationPoint(50, 50)info
setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setCornerRadius
Setzt den Eckenradius für abgerundete Rechtecke
objektname.setCornerRadius(10)setRoundedCorners
Setzt abgerundete Ecken mit Radius. Optional: einzelne Ecken angeben (obenLinks, obenRechts, untenRechts, untenLinks)
objektname.setRoundedCorners(10);setWidth
Setzt die Breite des Rechtecks
objektname.setWidth(200)setHeight
Setzt die Höhe des Rechtecks
objektname.setHeight(150)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Circle
Kreisförmiges grafisches Element
let myCircle = new Circle(50, 0x00ff00);▼ Parameter zur Initialisierung
radius
Radius des Kreises in Pixeln
color
Farbe im Hexadezimalformat (z.B. 0xff0000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe des Kreises
objektname.setFillColor(0xff0000)setBorder
Setzt einen Rahmen (Farbe im Hexadezimalformat, Dicke in Pixeln)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Setzt den Ankerpunkt für die Positionierung (x, y in Pixeln relativ zum Element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Drehpunkt (x, y in Pixeln relativ zum Elementursprung)
objektname.setRotationPoint(0, 0)info
setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setRadius
Setzt den Radius des Kreises
objektname.setRadius(50)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Ellipse
Ellipsenförmiges grafisches Element
let myEllipse = new Ellipse(80, 50, 0x00ff00);▼ Parameter zur Initialisierung
radiusX
Horizontaler Radius der Ellipse in Pixeln
radiusY
Vertikaler Radius der Ellipse in Pixeln
color
Farbe im Hexadezimalformat (z.B. 0xff0000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen (Farbe im Hexadezimalformat, Dicke in Pixeln)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Setzt den Ankerpunkt für die Positionierung (x, y in Pixeln relativ zum Element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Drehpunkt (x, y in Pixeln relativ zum Elementursprung)
objektname.setRotationPoint(0, 0)info
setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setRadiusX
Setzt den horizontalen Radius der Ellipse
objektname.setRadiusX(100)setRadiusY
Setzt den vertikalen Radius der Ellipse
objektname.setRadiusY(60)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Polygon
Vieleckiges grafisches Element
let myPolygon = new Polygon(6, 60, 0x0000ff);▼ Parameter zur Initialisierung
sides
Anzahl der Seiten (3 für Dreieck, 4 für Quadrat, usw.)
radius
Radius des Vielecks in Pixeln
color
Farbe im Hexadezimalformat (z.B. 0xff0000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen (Farbe im Hexadezimalformat, Dicke in Pixeln)
objektname.setBorder(0xff0000, 2)setTransformationPoint
Setzt den Ankerpunkt für die Positionierung (x, y in Pixeln relativ zum Element)
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Drehpunkt (x, y in Pixeln relativ zum Elementursprung)
objektname.setRotationPoint(0, 0)info
setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setStartAngle
Setzt den Startwinkel für das Zeichnen des Vielecks in Grad
objektname.setStartAngle(90)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }LinePath
Linienpfad aus Punkten
let myLinePath = new LinePath([[0,0], [100,50], [200,100]], 0xff0000, 3);▼ Parameter zur Initialisierung
points
Array von Koordinatenpaaren [[x1,y1], [x2,y2], ...] in Pixeln
color
Linienfarbe im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsex
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe für geschlossene Linienformen
objektname.setFillColor(0xff0000)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setPoints
Ersetzt das gesamte Punktearray durch ein neues Array. War der Pfad geschlossen, wird er automatisch erneut geschlossen.
objektname.setPoints([[0,0], [100,50], [200,100]])addPointEnd
Fügt einen Punkt am Ende der Linie hinzu
objektname.addPointEnd(150, 75)addPointStart
Fügt einen Punkt am Anfang der Linie hinzu
objektname.addPointStart(25, 25)removePointEnd
Entfernt den letzten Punkt der Linie
objektname.removePointEnd()removePointStart
Entfernt den ersten Punkt der Linie
objektname.removePointStart()shiftX
Verschiebt die gesamte Linie um einen Delta-Wert in X-Richtung
objektname.shiftX(50)closePath
Schließt den Pfad durch Verbindung des ersten und letzten Punktes. Der Pfad bleibt auch nach setPoints()-Aufrufen geschlossen.
objektname.closePath()openPath
Öffnet einen geschlossenen Pfad, indem der Schließpunkt entfernt und Auto-Close deaktiviert wird.
objektname.openPath()onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }BezierPath
Bezierkurve mit Kontrollpunkten
let myBezierPath = new BezierPath([[0,0,10,-10], [100,50,120,30], [200,100,180,120]], 0xff0000, 3);▼ Parameter zur Initialisierung
points
Array von Punkten mit Steuerpunkten [[x, y, cx, cy], ...]
color
Linienfarbe im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsex
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe für geschlossene Bezier-Formen
objektname.setFillColor(0xff0000)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setPoints
Ersetzt das gesamte Punktearray durch ein neues Array
objektname.setPoints([[0,0,10,-10], [100,50,120,30], [200,100,180,120]])addPointEnd
Fügt einen Punkt mit Steuerpunkt am Ende des Bezier-Pfads hinzu
objektname.addPointEnd(150, 75, 160, 60)addPointStart
Fügt einen Punkt mit Steuerpunkt am Anfang des Bezier-Pfads hinzu
objektname.addPointStart(25, 25, 30, 20)removePointEnd
Entfernt den letzten Punkt des Bezier-Pfads
objektname.removePointEnd()removePointStart
Entfernt den ersten Punkt des Bezier-Pfads
objektname.removePointStart()shiftX
Verschiebt den gesamten Bezier-Pfad um einen Delta-Wert in X-Richtung
objektname.shiftX(50)getY
Gibt die y-Koordinate für eine gegebene x-Koordinate auf der Kurve zurück
objektname.getY(100)getX
Gibt die x-Koordinate für eine gegebene y-Koordinate auf der Kurve zurück
objektname.getX(150)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }SplinePath
Spline-Kurve aus Punkten
let mySplinePath = new SplinePath([[0,0], [100,50], [200,100]], 0xff0000, 3);▼ Parameter zur Initialisierung
points
Array von Koordinatenpaaren [[x1,y1], [x2,y2], ...] in Pixeln
color
Linienfarbe im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe der Form
objektname.setFillColor(0xff0000)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setPoints
Ersetzt das gesamte Punktearray durch ein neues Array
objektname.setPoints([[0,0], [100,50], [200,100]])addPointEnd
Fügt einen Punkt am Ende der Spline hinzu
objektname.addPointEnd(150, 75)addPointStart
Fügt einen Punkt am Anfang der Spline hinzu
objektname.addPointStart(25, 25)removePointEnd
Entfernt den letzten Punkt der Spline
objektname.removePointEnd()removePointStart
Entfernt den ersten Punkt der Spline
objektname.removePointStart()setColor
Setzt die Linienfarbe der Spline
objektname.setColor(0x00ff00)setThickness
Setzt die Linienstärke der Spline
objektname.setThickness(5)markAt
Markiert einen Punkt auf der Spline bei gegebener x-Koordinate mit optionaler Farbe und Radius
objektname.markAt(100, 0xff0000, 5)markAtXY
Markiert einen Punkt bei gegebenen x- und y-Koordinaten mit optionaler Farbe und Radius
objektname.markAtXY(100, 50, 0xff0000, 5)removeMark
Entfernt die Markierung von der Spline
objektname.removeMark()showGuideLines
Zeigt Führungslinien bei angegebener x-Koordinate mit anpassbarem Aussehen
objektname.showGuideLines(100, 0x00ff00, 2, 0.7)showGuideLinesAtXY
Zeigt Führungslinien bei angegebenen x- und y-Koordinaten mit anpassbarem Aussehen
objektname.showGuideLinesAtXY(100, 50, 0x00ff00, 2, 0.7)hideGuideLines
Versteckt die Führungslinien
objektname.hideGuideLines()updateGuideLines
Aktualisiert die x-Position der bestehenden Führungslinien
objektname.updateGuideLines(150)getY
Gibt die y-Koordinate für eine gegebene x-Koordinate auf der Kurve zurück
objektname.getY(100)getX
Gibt die x-Koordinate für eine gegebene y-Koordinate auf der Kurve zurück
objektname.getX(150)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Arrow
Pfeil mit Linie und Spitze
let myArrow = new Arrow(0, 0, 100, 50, 0xff0000, 3, 15, 8);▼ Parameter zur Initialisierung
startX
X-Startkoordinate der Linie
startY
Y-Startkoordinate der Linie
endX
X-Endkoordinate der Linie
endY
Y-Endkoordinate der Linie
color
Farbe der Linie im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
arrowHeadLength
Länge der Pfeilspitze in Pixeln
arrowHeadWidth
Breite der Pfeilspitze in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setColor
Ändert die Farbe der Linie
objektname.setColor(0xff0000)setThickness
Setzt die Linienstärke
objektname.setThickness(2)setStrokeDash
Erstellt eine gestrichelte Linie mit Muster
objektname.setStrokeDash([5, 5])setStart
Setzt den Startpunkt der Linie
objektname.setStart(0, 0)setEnd
Setzt den Endpunkt der Linie
objektname.setEnd(100, 100)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setOutline
Aktiviert Kontur mit Stärke und Farbe
objektname.setOutline(0.5, 0xffffff)removeOutline
Deaktiviert die Kontur
objektname.removeOutline()onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Parallelogram
Parallelogramm aus zwei Vektoren
let myParallelogram = new Parallelogram(0, 0, 100, 0, 50, 50, 0x00ff00);▼ Parameter zur Initialisierung
originX
X-Koordinate des Ursprungspunkts
originY
Y-Koordinate des Ursprungspunkts
vector1X
X-Koordinate des ersten Vektorendpunkts
vector1Y
Y-Koordinate des ersten Vektorendpunkts
vector2X
X-Koordinate des zweiten Vektorendpunkts
vector2Y
Y-Koordinate des zweiten Vektorendpunkts
fillColor
Füllfarbe im Hexadezimalformat (z.B. 0x00ff00)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe des Parallelogramms
objektname.setFillColor(0xff0000)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setOrigin
Setzt den Ursprungspunkt des Parallelogramms
objektname.setOrigin(50, 50)setVector1
Setzt den Endpunkt des ersten Vektors
objektname.setVector1(150, 100)setVector2
Setzt den Endpunkt des zweiten Vektors
objektname.setVector2(100, 150)getResultantEndpoint
Gibt den Endpunkt des resultierenden Vektors zurück
objektname.getResultantEndpoint()showVectors
Zeigt/versteckt die Vektorpfeile
objektname.showVectors(true)showResultant
Zeigt/versteckt den resultierenden Vektorpfeil
objektname.showResultant(true)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }PointLabel
Beschriftung für einen Punkt
let myPointLabel = new PointLabel(100, 100, "P", 15, -15, "Arial", 16, 0x000000);▼ Parameter zur Initialisierung
pointX
X-Koordinate des Referenzpunkts
pointY
Y-Koordinate des Referenzpunkts
label
Text der als Beschriftung angezeigt wird (unterstützt <sub> und <sup> Tags)
offsetX
Horizontaler Versatz vom Referenzpunkt
offsetY
Vertikaler Versatz vom Referenzpunkt
font
Schriftart für den Text
fontSize
Schriftgröße in Pixeln
textColor
Farbe des Textes im Hexadezimalformat
backgroundColor
Hintergrundfarbe für die Beschriftung (optional)
padding
Innenabstand um den Text
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setText
Ändert den Text der Beschriftung (unterstützt <sub> und <sup> Tags)
objektname.setText("H<sub>2</sub>O")setTextColor
Ändert die Farbe des Textes
objektname.setTextColor(0xff0000)setFontSize
Setzt die Schriftgröße in Pixeln
objektname.setFontSize(16)setPoint
Setzt die Position des Referenzpunkts
objektname.setPoint(100, 100)setOffset
Setzt den Versatz vom Referenzpunkt
objektname.setOffset(10, -5)setBackgroundColor
Setzt die Hintergrundfarbe der Beschriftung
objektname.setBackgroundColor(0xffffff)setPadding
Setzt den Innenabstand um den Text
objektname.setPadding(5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }LineLabel
Beschriftung für eine Strecke
let myLineLabel = new LineLabel(0, 0, 100, 50, "AB", 15, "Arial", 16, 0x000000);▼ Parameter zur Initialisierung
startX
X-Koordinate des Startpunkts der Strecke
startY
Y-Koordinate des Startpunkts der Strecke
endX
X-Koordinate des Endpunkts der Strecke
endY
Y-Koordinate des Endpunkts der Strecke
label
Text der als Beschriftung angezeigt wird (unterstützt <sub> und <sup> Tags)
distance
Orthogonaler Abstand von der Strecke zur Beschriftung
font
Schriftart für den Text
fontSize
Schriftgröße in Pixeln
textColor
Farbe des Textes im Hexadezimalformat
backgroundColor
Hintergrundfarbe für die Beschriftung (optional)
padding
Innenabstand um den Text
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setText
Ändert den Text der Beschriftung (unterstützt <sub> und <sup> Tags)
objektname.setText("H<sub>2</sub>O")setTextColor
Ändert die Farbe des Textes
objektname.setTextColor(0xff0000)setFontSize
Setzt die Schriftgröße in Pixeln
objektname.setFontSize(16)setDistance
Setzt den orthogonalen Abstand von der Strecke
objektname.setDistance(15)setStart
Setzt den Startpunkt der Strecke
objektname.setStart(100, 100)setEnd
Setzt den Endpunkt der Strecke
objektname.setEnd(200, 150)setBackgroundColor
Setzt die Hintergrundfarbe der Beschriftung
objektname.setBackgroundColor(0xffffff)setPadding
Setzt den Innenabstand um den Text
objektname.setPadding(5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setFlipSide
Spiegelt die Beschriftung auf die gegenüberliegende Seite der Linie
objektname.setFlipSide(true)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)AngleLabel
Winkelmarkierung mit Text
let myAngleLabel = new AngleLabel(100, 100, 150, 100, 150, 150, 30, "α", "Arial", 16, 0x444444, 1, 0x444444);▼ Parameter zur Initialisierung
centerX
X-Koordinate des Kreismittelpunkts
centerY
Y-Koordinate des Kreismittelpunkts
arm1X
X-Koordinate des ersten Schenkels
arm1Y
Y-Koordinate des ersten Schenkels
arm2X
X-Koordinate des zweiten Schenkels
arm2Y
Y-Koordinate des zweiten Schenkels
radius
Radius des Kreisbogens in Pixeln
label
Text, der im Kreisbogen angezeigt wird
font
Schriftart für den Text
fontSize
Schriftgröße in Pixeln
textColor
Farbe des Textes im Hexadezimalformat
lineThickness
Linienstärke des Kreisbogens
lineColor
Farbe der Linie im Hexadezimalformat
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setText
Ändert den Text im Kreisbogen
objektname.setText("90°")setTextColor
Ändert die Farbe des Textes
objektname.setTextColor(0xff0000)setFontSize
Setzt die Schriftgröße in Pixeln
objektname.setFontSize(16)setLineColor
Ändert die Farbe der Bogenlinie
objektname.setLineColor(0x0000ff)setLineThickness
Setzt die Linienstärke des Kreisbogens
objektname.setLineThickness(2)setRadius
Setzt den Radius des Kreisbogens in Pixeln
objektname.setRadius(30)setCenter
Setzt die Mittelposition des Kreisbogens
objektname.setCenter(100, 100)setArm1
Setzt den Endpunkt des ersten Schenkels
objektname.setArm1(150, 100)setArm2
Setzt den Endpunkt des zweiten Schenkels
objektname.setArm2(100, 150)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setLabelDistance
Setzt die Entfernung der Beschriftung zum Mittelpunkt
objektname.setLabelDistance(25)setArrowheads
Zeigt oder verbirgt Pfeilspitzen an den Enden des Bogens. Optional kann die Größe angegeben werden (Standard 8)
objektname.setArrowheads(true, 12)setLongArc
Legt fest, ob der längere Bogen (true) oder kürzere Bogen (false) gezeichnet wird
objektname.setLongArc(true)setExternalLabel
Aktiviert die externe Beschriftung für kleine Winkel. Zwei kleine Bögen ragen über die Schenkel hinaus und die Beschriftung wird außen platziert. Optional kann die Bogenspanne in Grad angegeben werden (Standard 15)
objektname.setExternalLabel(true, 15)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)Line
Einfache Linie
let myLine = new Line(0, 0, 100, 50, 0xff0000, 2);▼ Parameter zur Initialisierung
startX
X-Startkoordinate der Linie
startY
Y-Startkoordinate der Linie
endX
X-Endkoordinate der Linie
endY
Y-Endkoordinate der Linie
color
Farbe der Linie im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setColor
Ändert die Farbe der Linie
objektname.setColor(0xff0000)setThickness
Setzt die Linienstärke
objektname.setThickness(2)setStrokeDash
Erstellt eine gestrichelte Linie mit Muster
objektname.setStrokeDash([5, 5])setStart
Setzt den Startpunkt der Linie
objektname.setStart(0, 0)setEnd
Setzt den Endpunkt der Linie
objektname.setEnd(100, 100)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }Ruler
Lineal mit Teilstrichen
let myRuler = new Ruler("right", [0, 10, 20, 30, 40], 50, 0, 0xff0000, 2, 15, 16, 0x000000, true, 1, ".");▼ Parameter zur Initialisierung
direction
Richtung des Lineals (
values
Array mit den anzuzeigenden Werten
spacing
Abstand zwischen den Teilstrichen in Pixeln
spacingOffset
Offset für den ersten Teilstrich
color
Farbe der Teilstriche im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke der Teilstriche in Pixeln
tickLength
Länge der Teilstriche in Pixeln
fontSize
Schriftgröße in Pixeln
fontColor
Farbe der Labels im Hexadezimalformat
positionSwitch
Steuert die Ausrichtung der Teilstriche und Labels
decimalPlaces
Anzahl der anzuzeigenden Dezimalstellen bei numerischen Werten
decimalSeparator
Trennzeichen für Dezimalstellen (z.B.
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setColor
Ändert die Farbe der Teilstriche
objektname.setColor(0xff0000)setFontColor
Ändert die Farbe der Labels
objektname.setFontColor(0x000000)setThickness
Setzt die Linienstärke der Teilstriche
objektname.setThickness(2)updateValues
Aktualisiert die anzuzeigenden Werte
objektname.updateValues(["0", "5", "10"])setSubTicks
Fügt Zwischenteilstriche zwischen den beschrifteten Hauptteilstrichen hinzu. Zwischenteilstriche werden auch im spacingOffset-Bereich zwischen dem Nullpunkt des Lineals und dem ersten Hauptteilstrich gezeichnet. Parameter: count (Anzahl der Zwischenteilstriche zwischen zwei Hauptteilstrichen), length (Länge der Zwischenteilstriche in Pixeln), color (optional, Hex-Farbe, Standard ist die Farbe der Hauptteilstriche), thickness (optional, Linienstärke, Standard ist die Stärke der Hauptteilstriche)
objektname.setSubTicks(4, 5, 0xff0000, 1)CoordinateSystem
Koordinatensystem mit Achsen
let myCoordinateSystem = new CoordinateSystem(100, 100, 100, 100, 0x000000, 10, 6, 1);▼ Parameter zur Initialisierung
sizeLeft
Größe der linken Achse
sizeRight
Größe der rechten Achse
sizeTop
Größe der oberen Achse
sizeBottom
Größe der unteren Achse
color
Farbe des Koordinatensystems im Hexadezimalformat (z.B. 0xff0000)
arrowLength
Länge der Pfeilspitze in Pixeln
arrowWidth
Breite der Pfeilspitze in Pixeln
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setColor
Ändert die Farbe des Koordinatensystems
objektname.setColor(0xff0000)setThickness
Setzt die Linienstärke
objektname.setThickness(2)SimpleSVG
SVG-Grafik als Objekt
let mySVG = new SimpleSVG("<svg>...</svg>");▼ Parameter zur Initialisierung
svgString
Inhalt der SVG-Datei
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsemaintainStrokeWidth
Konturen behalten ihre ursprüngliche Stärke beim Skalieren
objektname.maintainStrokeWidth = trueresolution
Rendering-Auflösung (1-4, höher = schärfer aber mehr Speicher)
objektname.resolution = 2▼ Methoden (für komplexe Änderungen)
setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.setAlpha(0.5)setRotationPoint
Setzt den Drehpunkt (x, y in Pixeln relativ zum Elementursprung)
objektname.setRotationPoint(0, 0)setTransformationPoint
Setzt den Ankerpunkt für die Positionierung (x, y in Pixeln relativ zum Element)
objektname.setTransformationPoint(0, 0)removeFromParent
Entfernt das Element aus seinem übergeordneten Container
objektname.removeFromParent()onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Legt fest, welche Funktion beim Drücken der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Legt fest, welche Funktion beim Loslassen der Maustaste auf dem Element ausgeführt wird.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Legt fest, welche Funktion beim Überfahren des Elements mit der Maus ausgeführt wird.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Legt fest, welche Funktion beim Verlassen des Elements mit der Maus ausgeführt wird.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Grenzen (x1, y1, x2, y2 in Pixeln)
objektname.setDragging(0, 0, 1280, 720)onDragStart
Setzt eine Callback-Funktion, die beim Start des Ziehens ausgeführt wird
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Setzt eine Callback-Funktion, die während des Ziehens des Elements ausgeführt wird
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Setzt eine Callback-Funktion, die beim Ende des Ziehens ausgeführt wird
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Timer
Timer für Animationen
let myTimer = new Timer(5000, true, false);▼ Parameter zur Initialisierung
duration
Dauer der Animation in Millisekunden (leer lassen für unendlich)
loop
Bestimmt, ob die Animation endlos wiederholt wird (true/false)
autoStart
Startet die Animation automatisch bei Erstellung (true/false)
▼ Methoden (für komplexe Änderungen)
start
Startet den Timer
objektname.start()stop
Stoppt den Timer
objektname.stop()pause
Pausiert den Timer
objektname.pause()resume
Setzt einen pausierten Timer fort
objektname.resume()reset
Setzt den Timer zurück auf den Anfang
objektname.reset()addAnimation
Fügt eine Animation für eine Eigenschaft hinzu. Parameter: Zielobjekt, Eigenschaftsname als String, Startwert, Endwert
objektname.addAnimation(myObject, "x", 100, 300)info
setEasing
Setzt die Easing-Funktion für sanfte Übergänge:
objektname.setEasing("easeInOut")onComplete
Registriert eine Callback-Funktion, die ausgeführt wird, wenn die Animation beendet ist
objektname.onComplete(animationFinished);
function animationFinished() { console.log("Animation fertig!"); }onUpdate
Registriert eine Callback-Funktion, die bei jedem Frame aufgerufen wird
objektname.onUpdate(handleProgress);
function handleProgress() { console.log("Progress"); }setProgress
Setzt den Fortschritt der Animation direkt (0.0 bis 1.0)
objektname.setProgress(0.5)Particles
Hochperformantes Partikelsystem für viele gleichartige Partikel
let myParticles = new Particles(1000, 3, 0xffffff);▼ Parameter zur Initialisierung
count
Anzahl der vorab zu erzeugenden Partikel
radius
Radius jedes Partikels in Pixeln
color
Standardfarbe aller Partikel (hex, z.B. 0xff0000). Standard: 0xffffff
▼ Methoden (für komplexe Änderungen)
setPosition
Setzt die Position des Partikels am angegebenen Index
objektname.setPosition(0, 100, 200)setX
Setzt die x-Koordinate des Partikels am angegebenen Index
objektname.setX(0, 100)setY
Setzt die y-Koordinate des Partikels am angegebenen Index
objektname.setY(0, 200)getX
Gibt die x-Koordinate des Partikels am angegebenen Index zurück
objektname.getX(0)getY
Gibt die y-Koordinate des Partikels am angegebenen Index zurück
objektname.getY(0)setColor
Setzt die Farbe des Partikels am angegebenen Index
objektname.setColor(0, 0xff0000)setAlpha
Setzt die Transparenz des Partikels am angegebenen Index (0 = unsichtbar, 1 = vollständig sichtbar)
objektname.setAlpha(0, 0.5)getAlpha
Gibt die Transparenz des Partikels am angegebenen Index zurück
objektname.getAlpha(0)setScale
Setzt den Skalierungsfaktor des Partikels am angegebenen Index (1.0 = Originalgröße)
objektname.setScale(0, 2.0)setRadius
Setzt einen individuellen Radius für das Partikel (passt die Skalierung relativ zum Basisradius an)
objektname.setRadius(0, 5)setVisible
Zeigt oder versteckt das Partikel am angegebenen Index
objektname.setVisible(0, false)getSprite
Gibt das interne PIXI.Sprite für direkten Zugriff zurück (maximale Performance in engen Schleifen)
objektname.getSprite(0)addParticle
Fügt ein neues Partikel hinzu und gibt seinen Index zurück
objektname.addParticle(100, 200, 0xff0000)setAllColors
Setzt dieselbe Farbe für alle Partikel
objektname.setAllColors(0x00ff00)setAllAlphas
Setzt dieselbe Transparenz für alle Partikel
objektname.setAllAlphas(0.5)setAllVisible
Zeigt oder versteckt alle Partikel auf einmal
objektname.setAllVisible(true)SimplePNG
PNG-Bild als Objekt
let myPNG = new SimplePNG("image.png");▼ Parameter zur Initialisierung
pngContent
Quelle des PNG-Bildes (URL oder Base64)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements in Pixeln
objektname.x = 100y
Vertikale Position des Elements in Pixeln
objektname.y = 200visible
Sichtbarkeit des Elements (true = sichtbar, false = unsichtbar)
objektname.visible = falsealpha
Transparenz des Elements (0.0 = vollständig transparent, 1.0 = vollständig sichtbar)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setScale
Skaliert das Element (scaleX, scaleY). Gleiche Werte für proportionale Skalierung verwenden (1.0 = Originalgröße). Konturen werden standardmäßig nicht mitskaliert. Übergebe true als letzten Parameter, um Konturen mitzuskalieren.
objektname.setScale(1.5, 1.5)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }Komponenten-Klassen
Button
Schaltfläche mit Klick-Event
let myButton = new Button("Click me", 100, 40);▼ Parameter zur Initialisierung
label
Bezeichner oder Text des Elements
width
Breite des Elements in Pixeln
height
Höhe des Elements in Pixeln
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
onClick
Registriert einen Callout, der beim Klick ausgeführt wird
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }setText
Setzt den Beschriftungstext des Buttons
objektname.setText("Neuer Text")Checkbox
Kontrollkästchen mit Ein-/Ausschaltzustand
let myCheckbox = new Checkbox(true, 20, "Select option");▼ Parameter zur Initialisierung
checked
Gibt an, ob das Element ausgewählt ist
size
Größe des Elements (z.B. 20 für 20px)
label
Bezeichner oder Text des Elements (\
für Zeilenwechsel, <sub></sub> und <sup></sup> für tiefgestellt/hochgestellt möglich)
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
textColor
Textfarbe des Labels (z.B. 0x000000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = truechecked
Gibt an, ob das Element ausgewählt ist (true/false)
objektname.checked = true▼ Methoden (für komplexe Änderungen)
onClick
Fügt einen Event-Listener für Änderungen hinzu
objektname.onClick(handleClick);
function handleClick(event) { console.log("Status:", event.value); }RadioButton
Optionsfeld für Gruppenauswahl
let myRadio = new RadioButton("group1", false, 20, "Option 1");▼ Parameter zur Initialisierung
groupName
Name der Radiobutton-Gruppe (Radiobuttons mit gleichem Namen gehören zusammen)
checked
Gibt an, ob das Element ausgewählt ist
size
Größe des Elements (z.B. 20 für 20px)
label
Bezeichner oder Text des Elements (\
für Zeilenwechsel, <sub></sub> und <sup></sup> für tiefgestellt/hochgestellt möglich)
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
textColor
Textfarbe des Labels (z.B. 0x000000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
onClick
Fügt einen Event-Listener für Klicks hinzu
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }NumericStepper
Numerischer Stepper mit Plus/Minus-Buttons
let myStepper = new NumericStepper(50, 0, 100, 5, 120);▼ Parameter zur Initialisierung
value
Aktueller Wert des Elements
min
Minimaler Wert des Elements
max
Maximaler Wert des Elements
step
Schrittgröße des Elements
width
Breite des Elements in Pixeln
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
decimalSeparator
Dezimaltrennzeichen (, oder .)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
onChange
Fügt einen Event-Listener für Wertänderungen hinzu
objektname.onChange(handleChange);
function handleChange(event) { console.log(event.value); }Dropdown
Dropdown-Menü für die Auswahl aus einer Liste von Optionen
let myDropdown = new Dropdown(["Option 1", "Option 2"], 200, 40);▼ Parameter zur Initialisierung
options
Array von Optionen, die im Dropdown angezeigt werden
width
Breite des Elements in Pixeln
height
Höhe des Elements in Pixeln
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = trueselectedIndex
Index der ausgewählten Option
objektname.selectedIndex = 0▼ Methoden (für komplexe Änderungen)
onChange
Registriert einen Callback, der bei Änderung der Auswahl ausgeführt wird
objektname.onChange(handleChange);
function handleChange(event) { console.log("Selected: " + event.detail.value); }getSelectedValue
Gibt den aktuell ausgewählten Wert zurück
objektname.getSelectedValue();setOptions
Aktualisiert die Liste der verfügbaren Optionen
objektname.setOptions(["New Option 1", "New Option 2", "New Option 3"])ButtonSlider
Schieberegler mit ziehbarer Schaltfläche
let mySlider = new ButtonSlider(0, 100, 50, 1, 20, 200);▼ Parameter zur Initialisierung
min
Minimaler Wert des Elements
max
Maximaler Wert des Elements
value
Aktueller Wert des Elements
step
Schrittgröße des Elements
height
Höhe des Buttons in Pixeln
trackLength
Länge des Schieberegler-Tracks in Pixeln
thumbShape
Form des Knopfs:
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200value
Setzt den aktuellen Wert
objektname.value = 30visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
setValue
Setzt den aktuellen Wert
objektname.setValue(25)enableValueDisplay
Aktiviert die Wertanzeige
objektname.enableValueDisplay()setValueDisplayFont
Setzt Schriftart und -größe für die Wertanzeige
objektname.setValueDisplayFont("Arial", 16)setThumbShape
Setzt die Form des Knopfs (
objektname.setThumbShape("triangle-A")enableSnap
Aktiviert das Einrasten an bestimmten Werten
objektname.enableSnap([10, 20, 30])setRangeMarker
Setzt einen halbtransparenten grünen Wertebereich-Marker auf dem Track
objektname.setRangeMarker(20, 60) // Markiert Bereich von 20 bis 60setVertical
Setzt den Schieberegler auf vertikale Ausrichtung
objektname.setVertical()onChange
Fügt einen Listener für Wertänderungen hinzu
objektname.onChange(handleChange);
function handleChange(e) { console.log(e.value); }MathForm
Mathematische Formel mit MathJax-Rendering
let myFormula = new MathForm("x^2 + y^2 = r^2");▼ Parameter zur Initialisierung
formula
Mathematische Formel als LaTeX-String oder MathJax-formatierter String
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
setScale
Setzt den Skalierungsfaktor der Formel
objektname.setScale(1.5)setColor
Setzt die Farbe der Formel
objektname.setColor("#FF0000")Text
Text-Element mit Formatierung
let myText = new Text("Hello World", "Arial", 16, 0x000000, "center");▼ Parameter zur Initialisierung
text
Anzuzeigender Textinhalt (\
für Zeilenwechsel, <sub></sub> und <sup></sup> für tiefgestellt/hochgestellt möglich)
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
textColor
Farbe des Textes (z.B. 0x000000)
textAlign
Textausrichtung (left, center, right)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = truewidth
Breite des Textfelds für Zeilenumbruch (null zum Deaktivieren)
objektname.width = 200height
Höhe des Textfelds (null für automatische Höhe)
objektname.height = 100▼ Methoden (für komplexe Änderungen)
setText
Ändert den Textinhalt
objektname.setText("New text with <sub>subscript</sub> and <sup>superscript</sup>")setFont
Ändert die Schriftart
objektname.setFont("Times New Roman")setFontSize
Ändert die Schriftgröße
objektname.setFontSize(24)setTextColor
Ändert die Textfarbe
objektname.setTextColor(0xFF0000)setSize
Setzt die Textfeld-Abmessungen für automatischen Zeilenumbruch. null deaktiviert das Textfeld.
objektname.setSize(200, 100)setLineHeight
Setzt den Zeilenabstandsfaktor (1.0 = einfach, 1.5 = anderthalbfach, 2.0 = doppelt)
objektname.setLineHeight(1.5)setLetterSpacing
Setzt den Zeichenabstand in Pixeln
objektname.setLetterSpacing(2)setHyphenation
Aktiviert oder deaktiviert die automatische Silbentrennung (nur wirksam wenn eine Textfeld-Breite gesetzt ist)
objektname.setHyphenation(true)ParameterTable
Parameter-Tabelle mit editierbaren Werten
let myTable = new ParameterTable([{name: "Speed", value: 50}], 300);▼ Parameter zur Initialisierung
Parameter
width
Breite der Tabelle in Pixeln
font
Schriftart des Textes
fontSize
Schriftgröße in Pixeln
textColor
Textfarbe (z.B. 0x000000)
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
setTitle
Setzt die Tabellenüberschrift. Unterstützt HTML-Tags: <b>, <i>, <sub>, <sup>
objektname.setTitle("Configuration"); // or setTitle("v<sub>max</sub>")setValue
Setzt den Wert eines Parameters anhand des Namens
objektname.setValue("Speed", 50)getValue
Gibt den Wert eines Parameters anhand des Namens zurück
objektname.getValue("Speed")setValueLimits
Setzt Min/Max-Grenzen für einen Parameterwert
objektname.setValueLimits("Speed", 0, 100)setDecimalSeparator
Setzt das Dezimaltrennzeichen (
objektname.setDecimalSeparator(",")setRounding
Setzt die Rundungsgenauigkeit für einen Parameter (z.B. 0.01 für 2 Dezimalstellen, 1 für Ganzzahlen)
objektname.setRounding("Speed", 0.01)addParameter
Fügt einen neuen Parameter zur Tabelle hinzu. Name unterstützt HTML-Tags: <b>, <i>, <sub>, <sup>
objektname.addParameter("New Param", 0); // or addParameter("F<sub>res</sub>", 100)removeParameter
Entfernt einen Parameter aus der Tabelle
objektname.removeParameter("Speed")onChange
Fügt einen Event-Listener für Wertänderungen hinzu
objektname.onChange(handleChange);
function handleChange(event) { console.log(event.parameterName, event.newValue); }Model3D
3D-Modell-Viewer als iframe mit postMessage-API
let myModel = new Model3D("https://example.com/model", 600, 400);▼ Parameter zur Initialisierung
url
URL des einzubettenden 3D-Modell-Viewers
width
Breite des iframes in Pixeln
height
Höhe des iframes in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200width
Breite des iframes in Pixeln
objektname.width = 600height
Höhe des iframes in Pixeln
objektname.height = 400visible
Sichtbarkeit des Elements (true/false)
objektname.visible = true▼ Methoden (für komplexe Änderungen)
setProperty
Setzt eine Eigenschaft eines Objekts in der 3D-Szene
objektname.setProperty("Zahnrad_1", "color", "#ff0000")info
position
setMode
Setzt den Viewer-Modus
objektname.setMode("wireframe")setBackground
Setzt den Hintergrund der 3D-Szene
objektname.setBackground("#ffffff")hideObject
Versteckt ein Objekt in der 3D-Szene
objektname.hideObject("Zahnrad_1")showObject
Zeigt ein zuvor verstecktes Objekt in der 3D-Szene
objektname.showObject("Zahnrad_1")selectObject
Wählt ein Objekt in der 3D-Szene aus
objektname.selectObject("Zahnrad_1")deselectAll
Hebt die Auswahl aller Objekte in der 3D-Szene auf
objektname.deselectAll()getSceneInfo
Fordert Szeneninformationen vom 3D-Viewer an
objektname.getSceneInfo()onMessage
Registriert einen Callback für Nachrichten vom 3D-Viewer (objectSelected, propertyChanged, usw.)
objektname.onMessage((data) => { console.log(data); })onReady
Registriert einen Callback, der ausgelöst wird, sobald der 3D-Viewer vollständig geladen und bereit ist, Befehle zu empfangen.
objektname.onReady(() => { getSceneInfo(); })onObjectSelected
Registriert einen Callback, der ausgelöst wird, wenn ein anklickbares Objekt in der 3D-Szene angeklickt wird. Der Callback erhält ein Event-Objekt mit der Eigenschaft
objektname.onObjectSelected((event) => { console.log(event.value); })