Graphics Classes
Board
This object represents the entire animation
let myBoard = new Board(1280, 720);▼ Parameters for Initialization
width
Width of the element in pixels
height
Height of the element in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Methods (for complex changes)
setFramerate
Sets the frame rate of the animation. Default value is 60 without specific setting.
objektname.setFramerate(50)setAdaptiveFramerate
Frame rate adapts optimally to performance with the set frame rate as target value.
objektname.setAdaptiveFramerate(true)Group
Group of graphic objects
let myGroup = new Group();▼ Setter Parameters (for later changes)
x
Horizontal position of the group
objektname.x = 100y
Vertical position of the group
objektname.y = 200rotation
Rotation of the group in degrees
objektname.rotation = 45visible
Visibility of the entire group (true/false)
objektname.visible = false▼ Methods (for complex changes)
addChild
Adds an object to the group
objektname.addChild(rectangle)removeChild
Removes an object from the group
objektname.removeChild(rectangle)setTransformationPoint
Defines the transformation point for position of the group
objektname.setTransformationPoint(50, 50)setRotationPoint
Sets the rotation pivot relative to the group
objektname.setRotationPoint(25, 25)setScale
Scales the entire group proportionally
objektname.setScale(0.75)setAlpha
Sets the transparency of the entire group (0 = invisible, 1 = fully visible)
objektname.setAlpha(0.5)getBounds
Returns the bounding box of the group
objektname.getBounds()setMask
Sets a rectangular mask for the group
objektname.setMask(10, 20, 100, 80)removeMask
Removes the mask from the group
objektname.removeMask()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Rectangle
Rectangular graphic element
let myRectangle = new Rectangle(200, 100, 0xff0000);▼ Parameters for Initialization
width
Width of the element in pixels
height
Height of the element in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element (true/false)
objektname.visible = false▼ Methods (for complex changes)
setBorder
Sets a border with color and thickness
objektname.setBorder(0xff0000, 2)setTransformationPoint
Defines the transformation point for position of the element
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot relative to the element
objektname.setRotationPoint(50, 50)setGradient
Creates a linear or radial gradient
objektname.setGradient("linear", [{offset:0,color:"#ff0"},{offset:1,color:"#f00"}])setScale
Scales the entire element proportionally
objektname.setScale(0.75)setAlpha
Sets the transparency of the element (0 = invisible, 1 = fully visible)
objektname.setAlpha(0.5)setRoundedCorners
Sets rounded corners with radius. Optional: specify which corners (topLeft, topRight, bottomRight, bottomLeft)
objektname.setRoundedCorners(10);setWidth
Sets the width of the rectangle
objektname.setWidth(200)setHeight
Sets the height of the rectangle
objektname.setHeight(150)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Circle
Circular graphic element
let myCircle = new Circle(50, 0x00ff00);▼ Parameters for Initialization
radius
Radius of the circle in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element
objektname.visible = false▼ Methods (for complex changes)
setBorder
Sets a border with color and thickness
objektname.setBorder(0xff0000, 2)setTransformationPoint
Defines the transformation point for position of the element
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot relative to the element
objektname.setRotationPoint(0, 0)setGradient
Creates a radial gradient
objektname.setGradient("radial", [{offset:0,color:"#fff"},{offset:1,color:"#000"}])setScale
Scales the circle proportionally
objektname.setScale(0.75)setAlpha
Sets the transparency of the entire circle (0 = invisible, 1 = fully visible)
objektname.setAlpha(0.5)setRadius
Sets the radius of the circle
objektname.setRadius(50)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hello World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Polygon
Polygon graphic element
let myPolygon = new Polygon(6, 60, 0x0000ff);▼ Parameters for Initialization
sides
Number of sides (3 for triangle, 4 for square, etc.)
radius
Radius of the polygon in pixels
color
Color in hexadecimal format (e.g. 0xff0000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Visibility of the element
objektname.visible = false▼ Methods (for complex changes)
setBorder
Sets a border with color and thickness
objektname.setBorder(0xff0000, 2)setTransformationPoint
Defines the transformation point for position of the element
objektname.setTransformationPoint(0, 0)setRotationPoint
Sets the rotation pivot relative to the element
objektname.setRotationPoint(0, 0)setGradient
Creates a gradient
objektname.setGradient("radial", [{offset:0,color:"#fff"},{offset:1,color:"#000"}])setScale
Scales the polygon proportionally
objektname.setScale(0.75)setAlpha
Sets the transparency of the entire polygon (0 = invisible, 1 = fully visible)
objektname.setAlpha(0.5)setStartAngle
Sets the starting angle for drawing the polygon in degrees
objektname.setStartAngle(90)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }LinePath
Line path from points
let myLinePath = new LinePath([[0,0], [100,50], [200,100]], 0xff0000, 3);▼ Parameters for Initialization
points
Array of points to define the line
color
Line color in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
visible
Sets the visibility of the entire object
objektname.visible = falsex
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200▼ Methods (for complex changes)
setFillColor
Sets the fill color for closed line shapes
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the entire object (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setPoints
Replaces the entire point array with a new array. If the path was closed, it will be automatically closed again.
objektname.setPoints([[0,0], [100,50], [200,100]])addPointEnd
Adds a point at the end of the line
objektname.addPointEnd(150, 75)addPointStart
Adds a point at the beginning of the line
objektname.addPointStart(25, 25)removePointEnd
Removes the last point of the line
objektname.removePointEnd()removePointStart
Removes the first point of the line
objektname.removePointStart()shiftX
Shifts the entire line by a delta value in X direction
objektname.shiftX(50)closePath
Closes the path by connecting the first and last point. The path remains closed after setPoints() calls.
objektname.closePath()openPath
Opens a closed path by removing the closing point and disabling auto-close.
objektname.openPath()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }BezierPath
Bezier curve with control points
let myBezierPath = new BezierPath([[0,0,10,-10], [100,50,120,30], [200,100,180,120]], 0xff0000, 3);▼ Parameters for Initialization
points
Array of points with control points [[x, y, cx, cy], ...]
color
Line color in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
visible
Sets the visibility of the entire object
objektname.visible = falsex
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200▼ Methods (for complex changes)
setFillColor
Sets the fill color for closed bezier shapes
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the entire object (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setPoints
Replaces the entire point array with a new array
objektname.setPoints([[0,0,10,-10], [100,50,120,30], [200,100,180,120]])addPointEnd
Adds a point with control point at the end of the bezier path
objektname.addPointEnd(150, 75, 160, 60)addPointStart
Adds a point with control point at the beginning of the bezier path
objektname.addPointStart(25, 25, 30, 20)removePointEnd
Removes the last point of the bezier path
objektname.removePointEnd()removePointStart
Removes the first point of the bezier path
objektname.removePointStart()shiftX
Shifts the entire bezier path by a delta value in X direction
objektname.shiftX(50)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }SplinePath
Spline curve from points
let mySplinePath = new SplinePath([[0,0], [100,50], [200,100]], 0xff0000, 3);▼ Parameters for Initialization
points
Array of points to define the shape
color
Line color in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Defines whether the object is visible or invisible
objektname.visible = true▼ Methods (for complex changes)
setFillColor
Sets the fill color of the shape
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the entire object (0.0 = fully transparent, 1.0 = fully opaque)
objektname.setAlpha(0.5)setPoints
Replaces the entire point array with a new array
objektname.setPoints([[0,0], [100,50], [200,100]])addPointEnd
Adds a point at the end of the spline
objektname.addPointEnd(150, 75)addPointStart
Adds a point at the beginning of the spline
objektname.addPointStart(25, 25)removePointEnd
Removes the last point of the spline
objektname.removePointEnd()removePointStart
Removes the first point of the spline
objektname.removePointStart()setColor
Sets the line color of the spline
objektname.setColor(0x00ff00)setThickness
Sets the line thickness of the spline
objektname.setThickness(5)markAt
Marks a point on the spline at given x-coordinate with optional color and radius
objektname.markAt(100, 0xff0000, 5)markAtXY
Marks a point at given x and y coordinates with optional color and radius
objektname.markAtXY(100, 50, 0xff0000, 5)removeMark
Removes the marker from the spline
objektname.removeMark()showGuideLines
Shows guide lines at specified x-coordinate with customizable appearance
objektname.showGuideLines(100, 0x00ff00, 2, 0.7)showGuideLinesAtXY
Shows guide lines at specified x and y coordinates with customizable appearance
objektname.showGuideLinesAtXY(100, 50, 0x00ff00, 2, 0.7)hideGuideLines
Hides the guide lines
objektname.hideGuideLines()updateGuideLines
Updates the x-position of existing guide lines
objektname.updateGuideLines(150)getY
Returns the y-coordinate for a given x-coordinate on the curve
objektname.getY(100)getX
Returns the x-coordinate for a given y-coordinate on the curve
objektname.getX(150)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Arrow
Arrow with line and head
let myArrow = new Arrow(0, 0, 100, 50, 0xff0000, 3, 15, 8);▼ Parameters for Initialization
startX
X start coordinate of the line
startY
Y start coordinate of the line
endX
X end coordinate of the line
endY
Y end coordinate of the line
color
Color of the line in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
arrowHeadLength
Length of the arrow head in pixels
arrowHeadWidth
Width of the arrow head in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Sets the visibility of the object
objektname.visible = falsealpha
Sets the transparency of the object (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setColor
Changes the color of the line
objektname.setColor(0xff0000)setThickness
Sets the line thickness
objektname.setThickness(2)setStrokeDash
Creates a dashed line with pattern
objektname.setStrokeDash([5, 5])setStart
Sets the start point of the line
objektname.setStart(0, 0)setEnd
Sets the end point of the line
objektname.setEnd(100, 100)setAlpha
Sets the transparency of the entire arrow (0.0 to 1.0)
objektname.setAlpha(0.5)setOutline
Enables outline with thickness and color
objektname.setOutline(0.5, 0xffffff)removeOutline
Disables the outline
objektname.removeOutline()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Parallelogram
Parallelogram from two vectors
let myParallelogram = new Parallelogram(0, 0, 100, 0, 50, 50, 0x00ff00);▼ Parameters for Initialization
originX
X coordinate of the origin point
originY
Y coordinate of the origin point
vector1X
X coordinate of the first vector endpoint
vector1Y
Y coordinate of the first vector endpoint
vector2X
X coordinate of the second vector endpoint
vector2Y
Y coordinate of the second vector endpoint
fillColor
Fill color in hexadecimal format (e.g. 0x00ff00)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Sets the visibility of the parallelogram
objektname.visible = falsealpha
Sets the transparency of the parallelogram (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setFillColor
Sets the fill color of the parallelogram
objektname.setFillColor(0xff0000)setAlpha
Sets the transparency of the parallelogram (0.0 to 1.0)
objektname.setAlpha(0.5)setOrigin
Sets the origin point of the parallelogram
objektname.setOrigin(50, 50)setVector1
Sets the endpoint of the first vector
objektname.setVector1(150, 100)setVector2
Sets the endpoint of the second vector
objektname.setVector2(100, 150)getResultantEndpoint
Returns the endpoint of the resultant vector
objektname.getResultantEndpoint()showVectors
Shows/hides the vector arrows
objektname.showVectors(true)showResultant
Shows/hides the resultant vector arrow
objektname.showResultant(true)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }PointLabel
Label for a point
let myPointLabel = new PointLabel(100, 100, "P", 15, -15, "Arial", 16, 0x000000);▼ Parameters for Initialization
pointX
X coordinate of the reference point
pointY
Y coordinate of the reference point
label
Text to display as label (supports <sub> and <sup> tags)
offsetX
Horizontal offset from the reference point
offsetY
Vertical offset from the reference point
font
Font family for the text
fontSize
Font size for the text
textColor
Color of the text in hexadecimal format
backgroundColor
Background color for the label (optional)
padding
Padding around the text
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Sets the visibility of the object
objektname.visible = falsealpha
Sets the transparency of the object (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setText
Changes the text of the label (supports <sub> and <sup> tags)
objektname.setText("H<sub>2</sub>O")setTextColor
Changes the color of the text
objektname.setTextColor(0xff0000)setFontSize
Sets the font size of the text
objektname.setFontSize(16)setPoint
Sets the reference point position
objektname.setPoint(100, 100)setOffset
Sets the offset from the reference point
objektname.setOffset(10, -5)setBackgroundColor
Sets the background color of the label
objektname.setBackgroundColor(0xffffff)setPadding
Sets the padding around the text
objektname.setPadding(5)setAlpha
Sets the transparency of the entire label (0.0 to 1.0)
objektname.setAlpha(0.5)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }LineLabel
Label for a line segment
let myLineLabel = new LineLabel(0, 0, 100, 50, "AB", 15, "Arial", 16, 0x000000);▼ Parameters for Initialization
startX
X coordinate of the line start point
startY
Y coordinate of the line start point
endX
X coordinate of the line end point
endY
Y coordinate of the line end point
label
Text to display as label (supports <sub> and <sup> tags)
distance
Orthogonal distance from the line to the label
font
Font family for the text
fontSize
Font size for the text
textColor
Color of the text in hexadecimal format
backgroundColor
Background color for the label (optional)
padding
Padding around the text
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Sets the visibility of the object
objektname.visible = falsealpha
Sets the transparency of the object (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setText
Changes the text of the label (supports <sub> and <sup> tags)
objektname.setText("H<sub>2</sub>O")setTextColor
Changes the color of the text
objektname.setTextColor(0xff0000)setFontSize
Sets the font size of the text
objektname.setFontSize(16)setDistance
Sets the orthogonal distance from the line
objektname.setDistance(15)setStart
Sets the start point of the line
objektname.setStart(100, 100)setEnd
Sets the end point of the line
objektname.setEnd(200, 150)setBackgroundColor
Sets the background color of the label
objektname.setBackgroundColor(0xffffff)setPadding
Sets the padding around the text
objektname.setPadding(5)setAlpha
Sets the transparency of the entire label (0.0 to 1.0)
objektname.setAlpha(0.5)setFlipSide
Flips the label to the opposite side of the line
objektname.setFlipSide(true)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)AngleLabel
Angle label with text
let myAngleLabel = new AngleLabel(100, 100, 150, 100, 150, 150, 30, "α", "Arial", 16, 0x444444, 1, 0x444444);▼ Parameters for Initialization
centerX
X coordinate of the arc center
centerY
Y coordinate of the arc center
arm1X
X coordinate of the first arm endpoint
arm1Y
Y coordinate of the first arm endpoint
arm2X
X coordinate of the second arm endpoint
arm2Y
Y coordinate of the second arm endpoint
radius
Radius of the arc
label
Text to display in the arc
font
Font family for the text
fontSize
Font size for the text
textColor
Color of the text in hexadecimal format
lineThickness
Thickness of the arc line
lineColor
Color of the arc line in hexadecimal format
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Sets the visibility of the object
objektname.visible = falsealpha
Sets the transparency of the object (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setText
Changes the text displayed in the arc
objektname.setText("90°")setTextColor
Changes the color of the text
objektname.setTextColor(0xff0000)setFontSize
Sets the font size of the text
objektname.setFontSize(16)setLineColor
Changes the color of the arc line
objektname.setLineColor(0x0000ff)setLineThickness
Sets the thickness of the arc line
objektname.setLineThickness(2)setRadius
Sets the radius of the arc
objektname.setRadius(30)setCenter
Sets the center position of the arc
objektname.setCenter(100, 100)setArm1
Sets the endpoint of the first arm
objektname.setArm1(150, 100)setArm2
Sets the endpoint of the second arm
objektname.setArm2(100, 150)setAlpha
Sets the transparency of the entire angle arc (0.0 to 1.0)
objektname.setAlpha(0.5)setLongArc
Sets whether to draw the longer arc (true) or shorter arc (false)
objektname.setLongArc(true)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)Line
Simple line
let myLine = new Line(0, 0, 100, 50, 0xff0000, 2);▼ Parameters for Initialization
startX
X start coordinate of the line
startY
Y start coordinate of the line
endX
X end coordinate of the line
endY
Y end coordinate of the line
color
Color of the line in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Sets the visibility of the object
objektname.visible = falsealpha
Sets the transparency of the object (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setColor
Changes the color of the line
objektname.setColor(0xff0000)setThickness
Sets the line thickness
objektname.setThickness(2)setStrokeDash
Creates a dashed line with pattern
objektname.setStrokeDash([5, 5])setStart
Sets the start point of the line
objektname.setStart(0, 0)setEnd
Sets the end point of the line
objektname.setEnd(100, 100)setAlpha
Sets the transparency of the line (0.0 to 1.0)
objektname.setAlpha(0.5)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }Ruler
Ruler with ticks
let myRuler = new Ruler("right", [0, 10, 20, 30, 40], 50, 0, 0xff0000, 2, 15, 16, 0x000000, true, 1, ".");▼ Parameters for Initialization
direction
Direction of the ruler (
values
Array with the values to display
spacing
Distance between tick marks in pixels
spacingOffset
Offset for the first tick mark
color
Color of the tick marks in hexadecimal format (e.g. 0xff0000)
thickness
Line thickness of the tick marks in pixels
tickLength
Length of the tick marks in pixels
fontSize
Font size of the labels
fontColor
Color of the labels in hexadecimal format
positionSwitch
Controls the alignment of tick marks and labels
decimalPlaces
Number of decimal places to display for numerical values
decimalSeparator
Separator for decimal places (e.g.
▼ Setter Parameters (for later changes)
x
Horizontal position of the ruler
objektname.x = 100y
Vertical position of the ruler
objektname.y = 200visible
Controls the visibility of the ruler
objektname.visible = false▼ Methods (for complex changes)
setColor
Changes the color of the tick marks
objektname.setColor(0xff0000)setFontColor
Changes the color of the labels
objektname.setFontColor(0x000000)setThickness
Sets the line thickness of the tick marks
objektname.setThickness(2)updateValues
Updates the values to display
objektname.updateValues(["0", "5", "10"])CoordinateSystem
Coordinate system with axes
let myCoordinateSystem = new CoordinateSystem(100, 100, 100, 100, 0x000000, 10, 6, 1);▼ Parameters for Initialization
sizeLeft
Size of the left axis
sizeRight
Size of the right axis
sizeTop
Size of the top axis
sizeBottom
Size of the bottom axis
color
Color of the coordinate system in hexadecimal format (e.g. 0xff0000)
arrowLength
Length of the arrow head in pixels
arrowWidth
Width of the arrow head in pixels
thickness
Line thickness in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Controls the visibility of the entire coordinate system
objektname.visible = false▼ Methods (for complex changes)
setColor
Changes the color of the coordinate system
objektname.setColor(0xff0000)setThickness
Sets the line thickness
objektname.setThickness(2)addTicksAndLabels
Adds tick marks and labels with specified values
objektname.addTicksAndLabels(["0", "5", "10"], "right", 50, 0, 10)SimpleSVG
SVG graphic as object
let mySVG = new SimpleSVG("<svg>...</svg>");▼ Parameters for Initialization
svgString
Content of the SVG file
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200rotation
Rotation of the element in degrees
objektname.rotation = 45visible
Defines whether the object is visible or invisible
objektname.visible = truemaintainStrokeWidth
Strokes maintain their original thickness when scaling
objektname.maintainStrokeWidth = trueresolution
Rendering resolution (1-4, higher = sharper but more memory)
objektname.resolution = 2▼ Methods (for complex changes)
setScale
Scales the element in both directions
objektname.setScale(1.5, 1.5)setAlpha
Sets the transparency of the element (0 = invisible, 1 = fully visible)
objektname.setAlpha(0.5)setRotationPoint
Sets the rotation pivot relative to the element
objektname.setRotationPoint(0, 0)setTransformationPoint
Defines the transformation point for position of the element
objektname.setTransformationPoint(0, 0)removeFromParent
Removes the element from its parent container
objektname.removeFromParent()onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }onMouseDown
Defines a function to execute when the mouse button is pressed down on the element.
objektname.onMouseDown(handleMouseDown);
function handleMouseDown() { console.log("Mouse button pressed"); }onMouseUp
Defines a function to execute when the mouse button is released on the element.
objektname.onMouseUp(handleMouseUp);
function handleMouseUp() { console.log("Mouse button released"); }onMouseOver
Defines a function to execute when the mouse cursor enters the element.
objektname.onMouseOver(handleMouseOver);
function handleMouseOver() { console.log("Mouse entered element"); }onMouseOut
Defines a function to execute when the mouse cursor leaves the element.
objektname.onMouseOut(handleMouseOut);
function handleMouseOut() { console.log("Mouse left element"); }setDragging
Enables dragging within the specified rectangular bounds
objektname.setDragging(0, 0, 1280, 720)onDragStart
Sets a callback function that is executed when dragging starts
objektname.onDragStart(handleDragStart);
function handleDragStart() { console.log("Started dragging element"); }onDrag
Sets a callback function that is executed while the element is being dragged
objektname.onDrag(handleDrag);
function handleDrag() { console.log("Element is being dragged"); }onDragEnd
Sets a callback function that is executed when dragging ends
objektname.onDragEnd(handleDragEnd);
function handleDragEnd() { console.log("Stopped dragging element"); }Timer
Timer for animations
let myTimer = new Timer(5000, true, false);▼ Parameters for Initialization
duration
Duration of the animation in milliseconds (leave empty for infinite)
loop
Determines whether the animation repeats endlessly (true/false)
autoStart
Starts the animation automatically upon creation (true/false)
▼ Methods (for complex changes)
start
Starts the timer
objektname.start()stop
Stops the timer
objektname.stop()pause
Pauses the timer
objektname.pause()resume
Resumes a paused timer
objektname.resume()reset
Resets the timer to the beginning
objektname.reset()addAnimation
Adds an animation: object, property, start value, end value
objektname.addAnimation(myObject, "x", 100, 300)addKeyframeAnimation
Adds a keyframe animation with multiple time points
objektname.addKeyframeAnimation(myObject, "alpha", [{time: 0, value: 0}, {time: 0.5, value: 1}, {time: 1, value: 0}])setEasing
Sets the easing function:
objektname.setEasing("easeInOut")onComplete
Registers a callback function that executes when the animation is finished
objektname.onComplete(animationFinished);
function animationFinished() { console.log("Animation fertig!"); }onUpdate
Registers a callback function that is called on every frame
objektname.onUpdate(handleProgress);
function handleProgress() { console.log("Progress"); }setProgress
Sets the animation progress directly (0.0 to 1.0)
objektname.setProgress(0.5)SimplePNG
PNG image as object
let myPNG = new SimplePNG("image.png");▼ Parameters for Initialization
pngContent
Source of the PNG image (URL or Base64)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Defines whether the object is visible or invisible
objektname.visible = truealpha
Transparency of the image (0.0 to 1.0)
objektname.alpha = 0.5▼ Methods (for complex changes)
setScale
Scales the element in both directions
objektname.setScale(1.5, 1.5)onClick
Defines a function to execute when the element is clicked.
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }Component Classes
Button
Button with click event
let myButton = new Button("Click me", 100, 40);▼ Parameters for Initialization
label
Label or text of the element
width
Width of the element in pixels
height
Height of the element in pixels
font
Font family of the text
fontSize
Font size in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
onClick
Registers a callback that is executed on click
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }setText
Sets the label text of the button
objektname.setText("Neuer Text")Checkbox
Checkbox with on/off state
let myCheckbox = new Checkbox(true, 20, "Select option");▼ Parameters for Initialization
checked
Indicates whether the element is selected
size
Size of the element (e.g. 20 for 20px)
label
Label or text of the element (\
for line break, <sub></sub> and <sup></sup> for subscript/superscript possible)
font
Font family of the text
fontSize
Font size in pixels
textColor
Text color of the label (e.g. 0x000000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = truechecked
Indicates whether the element is selected (true/false)
objektname.checked = true▼ Methods (for complex changes)
onClick
Adds an event listener for changes
objektname.onClick(handleClick);
function handleClick(event) { console.log("Status:", event.value); }RadioButton
Radio button for group selection
let myRadio = new RadioButton("group1", false, 20, "Option 1");▼ Parameters for Initialization
groupName
Name of the radio button group (radio buttons with the same name belong together)
checked
Indicates whether the element is selected
size
Size of the element (e.g. 20 for 20px)
label
Label or text of the element (\
for line break, <sub></sub> and <sup></sup> for subscript/superscript possible)
font
Font family of the text
fontSize
Font size in pixels
textColor
Text color of the label (e.g. 0x000000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
onClick
Adds an event listener for clicks
objektname.onClick(sendMessage);
function sendMessage() { console.log("Hallo World"); }NumericStepper
Numeric stepper with plus/minus buttons
let myStepper = new NumericStepper(50, 0, 100, 5, 120);▼ Parameters for Initialization
value
Current value of the element
min
Minimum value of the element
max
Maximum value of the element
step
Step size of the element
width
Width of the element in pixels
font
Font family of the text
fontSize
Font size in pixels
decimalSeparator
Decimal separator character (, or .)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
onChange
Adds an event listener for value changes
objektname.onChange(handleChange);
function handleChange(event) { console.log(event.newValue); }Dropdown
Dropdown menu for selecting from a list of options
let myDropdown = new Dropdown(["Option 1", "Option 2"], 200, 40);▼ Parameters for Initialization
options
Array of options to display in the dropdown
width
Width of the element in pixels
height
Height of the element in pixels
font
Font family of the text
fontSize
Font size in pixels
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = trueselectedIndex
Index of the selected option
objektname.selectedIndex = 0▼ Methods (for complex changes)
onChange
Registers a callback that is executed when the selection changes
objektname.onChange(handleChange);
function handleChange(event) { console.log("Selected: " + event.detail.value); }getSelectedValue
Returns the currently selected value
objektname.getSelectedValue();setOptions
Updates the list of available options
objektname.setOptions(["New Option 1", "New Option 2", "New Option 3"])ButtonSlider
Slider with draggable button
let mySlider = new ButtonSlider(0, 100, 50, 1, 20, 200);▼ Parameters for Initialization
min
Minimum value of the element
max
Maximum value of the element
value
Current value of the element
step
Step size of the element
height
Height of the button in pixels
trackLength
Length of the slider track in pixels
thumbShape
Shape of the thumb:
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200value
Sets the current value
objektname.value = 30visible
Visibility of the element (true/false)
objektname.visible = trueMathForm
Mathematical formula with MathJax rendering
let myFormula = new MathForm("x^2 + y^2 = r^2");▼ Parameters for Initialization
formula
Mathematical formula as LaTeX string or MathJax-formatted string
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setScale
Sets the scaling factor of the formula
objektname.setScale(1.5)setColor
Sets the color of the formula
objektname.setColor("#FF0000")Text
Text element with formatting
let myText = new Text("Hello World", "Arial", 16, 0x000000, "center");▼ Parameters for Initialization
text
Text content to display (\
for line break, <sub></sub> and <sup></sup> for subscript/superscript possible)
font
Font family of the text
fontSize
Font size in pixels
textColor
Color of the text (e.g. 0x000000)
textAlign
Text alignment (left, center, right)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setText
Changes the text content
objektname.setText("New text with <sub>subscript</sub> and <sup>superscript</sup>")setFont
Changes the font family
objektname.setFont("Times New Roman")setFontSize
Changes the font size
objektname.setFontSize(24)setTextColor
Changes the text color
objektname.setTextColor(0xFF0000)ParameterTable
Parameter table with editable values
let myTable = new ParameterTable([{name: "Speed", value: 50}], 300);▼ Parameters for Initialization
Parameter
width
Width of the table in pixels
font
Font family of the text
fontSize
Font size in pixels
textColor
Text color (e.g. 0x000000)
▼ Setter Parameters (for later changes)
x
Horizontal position of the element
objektname.x = 100y
Vertical position of the element
objektname.y = 200visible
Visibility of the element (true/false)
objektname.visible = true▼ Methods (for complex changes)
setTitle
Sets the table title/header. Supports HTML tags: <b>, <i>, <sub>, <sup>
objektname.setTitle("Configuration");
setValue
Sets the value of a parameter by name
objektname.setValue("Speed", 50)getValue
Gets the value of a parameter by name
objektname.getValue("Speed")setValueLimits
Sets min/max limits for a parameter value
objektname.setValueLimits("Speed", 0, 100)setDecimalSeparator
Sets decimal separator (
objektname.setDecimalSeparator(",")setRounding
Sets rounding precision for a parameter (e.g. 0.01 for 2 decimals, 1 for integers)
objektname.setRounding("Speed", 0.01)addParameter
Adds a new parameter to the table. Name supports HTML tags: <b>, <i>, <sub>, <sup>
objektname.addParameter("New Param", 0);
removeParameter
Removes a parameter from the table
objektname.removeParameter("Speed")onChange
Adds an event listener for value changes
objektname.onChange(handleChange);
function handleChange(event) { console.log(event.parameterName, event.newValue); }