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 der Gruppe
objektname.x = 100y
Vertikale Position der Gruppe
objektname.y = 200rotation
Drehung der Gruppe in Grad
objektname.rotation = 45visible
Sichtbarkeit der gesamten Gruppe (true/false)
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
Definiert den Transformationspunkt für die Position der Gruppe
objektname.setTransformationPoint(50, 50)setRotationPoint
Setzt den Rotationspunkt relativ zum Ursprung (0, 0) der Gruppe
objektname.setRotationPoint(25, 25)setScale
Skaliert die gesamte Gruppe proportional
objektname.setScale(0.75)setAlpha
Setzt die Transparenz der gesamten Gruppe (0 = unsichtbar, 1 = 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 Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements (true/false)
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen mit Farbe und Dicke
objektname.setBorder(0xff0000, 2)setTransformationPoint
Definiert den Transformationspunkt für die Position des Elements
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Rotationspunkt relativ zum Ursprung (0, 0) des Elements
objektname.setRotationPoint(50, 50)setGradient
Erstellt einen linearen oder radialen Farbverlauf. Optionaler Winkel in Grad für lineare Verläufe (0 = links nach rechts, 90 = oben nach unten)
objektname.setGradient("linear", [{offset:0,color:"#ff0"},{offset:1,color:"#f00"}], 90)setScale
Skaliert das gesamte Element proportional
objektname.setScale(0.75)setAlpha
Setzt die Transparenz des Elements (0 = unsichtbar, 1 = 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 Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen mit Farbe und Dicke
objektname.setBorder(0xff0000, 2)setTransformationPoint
Definiert den Transformationspunkt für die Position des Elements
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Rotationspunkt relativ zum Ursprung (0, 0) des Elements
objektname.setRotationPoint(0, 0)setGradient
Erstellt einen radialen Farbverlauf
objektname.setGradient("radial", [{offset:0,color:"#fff"},{offset:1,color:"#000"}])setScale
Skaliert den Kreis proportional
objektname.setScale(0.75)setAlpha
Setzt die Transparenz des gesamten Kreises (0 = unsichtbar, 1 = 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 Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen mit Farbe und Dicke
objektname.setBorder(0xff0000, 2)setTransformationPoint
Definiert den Transformationspunkt für die Position des Elements
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Rotationspunkt relativ zum Ursprung (0, 0) des Elements
objektname.setRotationPoint(0, 0)setGradient
Erstellt einen Farbverlauf
objektname.setGradient("radial", [{offset:0,color:"#fff"},{offset:1,color:"#000"}])setScale
Skaliert die Ellipse proportional
objektname.setScale(0.75)setAlpha
Setzt die Transparenz der gesamten Ellipse (0 = unsichtbar, 1 = 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("Hallo 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 Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Sichtbarkeit des Elements
objektname.visible = false▼ Methoden (für komplexe Änderungen)
setBorder
Setzt einen Rahmen mit Farbe und Dicke
objektname.setBorder(0xff0000, 2)setTransformationPoint
Definiert den Transformationspunkt für die Position des Elements
objektname.setTransformationPoint(0, 0)setRotationPoint
Setzt den Rotationspunkt relativ zum Ursprung (0, 0) des Elements
objektname.setRotationPoint(0, 0)setGradient
Erstellt einen Farbverlauf
objektname.setGradient("radial", [{offset:0,color:"#fff"},{offset:1,color:"#000"}])setScale
Skaliert das Vieleck proportional
objektname.setScale(0.75)setAlpha
Setzt die Transparenz des gesamten Vielecks (0 = unsichtbar, 1 = 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("Hallo 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 Rechtecksgrenzen
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 Punkten zur Definition der Linie
color
Linienfarbe im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
visible
Setzt die Sichtbarkeit des gesamten Objekts
objektname.visible = falsex
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
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 gesamten Objekts (0.0 = vollständig transparent, 1.0 = vollständig undurchsichtig)
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("Hallo 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 Rechtecksgrenzen
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
Setzt die Sichtbarkeit des gesamten Objekts
objektname.visible = falsex
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
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 gesamten Objekts (0.0 = vollständig transparent, 1.0 = vollständig undurchsichtig)
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)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo 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 Rechtecksgrenzen
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 Punkten zur Definition der Form
color
Linienfarbe im Hexadezimalformat (z.B. 0xff0000)
thickness
Linienstärke in Pixeln
▼ Setter-Parameter (für nachträgliche Änderungen)
x
Horizontale Position des Elements
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Legt fest, ob das Objekt sichtbar oder unsichtbar ist
objektname.visible = true▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe der Form
objektname.setFillColor(0xff0000)setAlpha
Setzt die Transparenz des gesamten Objekts (0.0 = vollständig transparent, 1.0 = vollständig undurchsichtig)
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("Hallo 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 Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Setzt die Sichtbarkeit des Objekts
objektname.visible = falsealpha
Setzt die Transparenz des Objekts (0.0 bis 1.0)
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 gesamten Pfeils (0.0 bis 1.0)
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("Hallo 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 Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Setzt die Sichtbarkeit des Parallelogramms
objektname.visible = falsealpha
Setzt die Transparenz des Parallelogramms (0.0 bis 1.0)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setFillColor
Setzt die Füllfarbe des Parallelogramms
objektname.setFillColor(0xff0000)setAlpha
Setzt die Transparenz des Parallelogramms (0.0 bis 1.0)
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("Hallo 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 Rechtecksgrenzen
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 für den Text
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Setzt die Sichtbarkeit des Objekts
objektname.visible = falsealpha
Setzt die Transparenz des Objekts (0.0 bis 1.0)
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 des Textes
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 der gesamten Beschriftung (0.0 bis 1.0)
objektname.setAlpha(0.5)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo 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 Rechtecksgrenzen
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 für den Text
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Setzt die Sichtbarkeit des Objekts
objektname.visible = falsealpha
Setzt die Transparenz des Objekts (0.0 bis 1.0)
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 des Textes
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 der gesamten Beschriftung (0.0 bis 1.0)
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("Hallo World"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Rechtecksgrenzen
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
label
Text, der im Kreisbogen angezeigt wird
font
Schriftart für den Text
fontSize
Schriftgröße für den Text
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Setzt die Sichtbarkeit des Objekts
objektname.visible = falsealpha
Setzt die Transparenz des Objekts (0.0 bis 1.0)
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 des Textes
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
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 gesamten Winkelbogens (0.0 bis 1.0)
objektname.setAlpha(0.5)setLongArc
Legt fest, ob der längere Bogen (true) oder kürzere Bogen (false) gezeichnet wird
objektname.setLongArc(true)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }setDragging
Ermöglicht das Ziehen innerhalb der angegebenen Rechtecksgrenzen
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Setzt die Sichtbarkeit des Objekts
objektname.visible = falsealpha
Setzt die Transparenz des Objekts (0.0 bis 1.0)
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 der Linie (0.0 bis 1.0)
objektname.setAlpha(0.5)onClick
Legt fest, welche Funktion beim Klick auf das Element ausgeführt wird.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo 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 der Labels
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 Lineals
objektname.x = 100y
Vertikale Position des Lineals
objektname.y = 200visible
Steuert die Sichtbarkeit des Lineals
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Steuert die Sichtbarkeit des gesamten Koordinatensystems
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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200rotation
Drehung des Elements in Grad
objektname.rotation = 45visible
Legt fest, ob das Objekt sichtbar oder unsichtbar ist
objektname.visible = truemaintainStrokeWidth
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 in beide Richtungen
objektname.setScale(1.5, 1.5)setAlpha
Setzt die Transparenz des Elements (0 = unsichtbar, 1 = vollständig sichtbar)
objektname.setAlpha(0.5)setRotationPoint
Setzt den Rotationspunkt relativ zum Ursprung (0, 0) des Elements
objektname.setRotationPoint(0, 0)setTransformationPoint
Definiert den Transformationspunkt für die Position des Elements
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("Hallo 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 Rechtecksgrenzen
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 hinzu: Objekt, Eigenschaft, Startwert, Endwert
objektname.addAnimation(myObject, "x", 100, 300)addKeyframeAnimation
Fügt eine Keyframe-Animation hinzu mit mehreren Zeitpunkten
objektname.addKeyframeAnimation(myObject, "alpha", [{time: 0, value: 0}, {time: 0.5, value: 1}, {time: 1, value: 0}])setEasing
Setzt die Easing-Funktion:
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)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
objektname.x = 100y
Vertikale Position des Elements
objektname.y = 200visible
Legt fest, ob das Objekt sichtbar oder unsichtbar ist
objektname.visible = truealpha
Transparenz des Bildes (0.0 bis 1.0)
objektname.alpha = 0.5▼ Methoden (für komplexe Änderungen)
setScale
Skaliert das Element in beide Richtungen
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("Hallo 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); })