JSXGraph Reference

JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

---

Elements

• Angle
• Arc
• Arrow
• Arrowparallel
• Axis
• Bisector
• Bisectorlines
• Circle
• Circumcenter
• Circumcircle
• CircumcircleArc
• Circumcirclesector
• Conic
• Curve
• Ellipse
• Functiongraph
• Glider
• Grid
• Hyperbola
• Image
• Incenter
• Incircle
• Integral
• Intersection
• Line
• Locus
• Midpoint
• Mirrorpoint
• Normal
• Orthogonalprojection
• OtherIntersection
• Parabola
• Parallel
• Parallelpoint
• Perpendicular
• Perpendicularpoint
• Point
• Polygon
• Reflection
• RegularPolygon
• Riemannsum
• Sector
• Segment
• Semicircle
• Slider
• Tangent
• Text
• Ticks
• Tracecurve

Classes

• _global_
• JXG
• JXG.AbstractRenderer
• JXG.Board
• JXG.C
• JXG.CanvasRenderer
• JXG.Circle
• JXG.Complex
• JXG.Composition
• JXG.Coords
• JXG.Curve
• JXG.Dump
• JXG.GeometryElement
• JXG.GeonextParser
• JXG.Group
• JXG.Image
• JXG.JessieCode
• JXG.JSXGraph
• JXG.Line
• JXG.Math
• JXG.Math.Geometry
• JXG.Math.Numerics
• JXG.Math.Poly
• JXG.Math.Poly.Monomial
• JXG.Math.Poly.Polynomial
• JXG.Math.Poly.Ring
• JXG.Math.Statistics
• JXG.Math.Symbolic
• JXG.Point
• JXG.Polygon
• JXG.Server
• JXG.Server.modules
• JXG.SVGRenderer
• JXG.Text
• JXG.Ticks
• JXG.Turtle
• JXG.Util
• JXG.VMLRenderer

---

Class JXG.Board

      ↳ JXG.Board

JXG.Board controls all properties and methods used to manage a geonext board like managing geometric elements, managing mouse and touch events, etc. You probably don't want to use this constructor directly. Please use JXG.JSXGraph#initBoard to initialize a board.

Defined in: Board.js.

Class Summary

Constructor Attributes	Constructor Name and Description
	JXG.Board(container, renderer, id, origin, zoomX, zoomY, unitX, unitY, canvasWidth, canvasHeight, showCopyright) Constructs a new Board object.

Field Summary

Field Attributes	Field Name and Description
	animationObjects Stores all the objects that are currently running an animation.
<constant>	BOARD_MODE_CONSTRUCT Board is in construction mode, objects are highlighted on mouse over and the behaviour of the board is determined by the construction type stored in the field constructionType.
<constant>	BOARD_MODE_DRAG Board is in drag mode, objects aren't highlighted on mouse over and the object referenced in {JXG.Board#mouse} is updated on mouse movement.
<constant>	BOARD_MODE_MOVE_ORIGIN In this mode a mouse move changes the origin's screen coordinates.
<constant>	BOARD_MODE_NONE Board is in no special mode, objects are highlighted on mouse over and objects may be clicked to start drag&drop.
<constant>	BOARD_MODE_ZOOM Update is made with high quality, e.g.
<constant>	BOARD_QUALITY_HIGH Update is made with high quality, e.g.
<constant>	BOARD_QUALITY_LOW /* Update is made with low quality, e.g.
	canvasHeight Canvas Height
	canvasWidth Canvas width.
<constant>	CONSTRUCTION_TYPE_CIRCLE When the board is in construction mode this construction type says we want to construct a circle.
<private>	CONSTRUCTION_TYPE_GLIDER When the board is in construction mode this construction type says we want to construct a glider.
<private>	CONSTRUCTION_TYPE_INTERSECTION When the board is in construction mode this construction type says we want to construct a intersection.
<private>	CONSTRUCTION_TYPE_LINE When the board is in construction mode this construction type says we want to construct a line.
<private>	CONSTRUCTION_TYPE_MIDPOINT When the board is in construction mode this construction type says we want to construct a midpoint.
<private>	CONSTRUCTION_TYPE_PARALLEL When the board is in construction mode this construction type says we want to construct a parallel.
<private>	CONSTRUCTION_TYPE_PERPENDICULAR When the board is in construction mode this construction type says we want to construct a perpendicular.
<constant>	CONSTRUCTION_TYPE_POINT When the board is in construction mode this construction type says we want to construct a point.
	container The html-id of the html element containing the board.
	containerObj Pointer to the html element containing the board.
	cPos Cached ressult of getCoordsTopLeftCorner for touch/mouseMove-Events to save some DOM operations.
	createElement Deprecated name for JXG.Board#create.
	currentCBDef The current color blindness deficiency is stored in this property.
	dependentBoards An array containing all other boards that are updated after this board has been updated.
	dimension Dimension of the board.
	downObjects Collects all elements that triggered a mouse down event.
	drag_dx The distance from the mouse to the dragged object in x direction when the user clicked the mouse button.
	drag_dy The distance from the mouse to the dragged object in y direction when the user clicked the mouse button.
	elementsByName An associative array to store the objects of the board by name.
	geonextCompatibilityMode If GEONExT constructions are displayed, then this property should be set to true.
	grids Grids keeps track of all grids attached to this board.
	groups An associative array containing all groups belonging to the board.
	hasMouseHandlers A flag which tells if the board registers mouse events.
	hasTouchHandlers A flag which tells if the board registers touch events.
	highlightedObjects An associative array containing all highlighted elements belonging to the board.
	hooks An array containing all hook functions.
	intersectionOptions GUI interface
	inUpdate During the update process this is set to false to prevent an endless loop.
	isSuspendedRedraw If true updates are skipped.
	mode The board mode the board is currently in.
	mouse References to the object that is dragged with the mouse on the board.
	needsFullUpdate Full updates are needed after zoom and axis translates.
	numObjects Number of objects ever created on this board.
	objects An associative array containing all geometric objects belonging to the board.
	options Some standard options
	origin Coordinates of the boards origin.
	reducedUpdate If reducedUpdate is set to true then only the dragged element and few (e.g.
	renderer A reference to this boards renderer.
	showCopyright Display the licence text.
	touches Keeps track on touched elements, like JXG.Board#mouse does for mouse events.
	touchMoveLast Contains the last time (epoch, msec) since the last touchMove event which was not thrown away or since touchStart because Android's Webkit browser fires too much of them.
	unitX The number of pixels which represent one unit in user-coordinates in x direction.
	unitY The number of pixels which represent one unit in user-coordinates in y direction.
	updateQuality The update quality of the board.
	xmlString A string containing the XML text of the construction.
	zoomX Zoom factor in X direction.
	zoomY Zoom factor in Y direction.

Method Summary

Method Attributes	Method Name and Description
	addAnimation(element) Adds an animation.
	addChild(board) Adds a dependent board to this board.
	addConditions(str) Add conditional updates to the elements.
	addEventHandlers() Add all possible event handlers to the board object
	addGrid() Adds a grid to the board according to the settings given in board.options.
	addHook(hook, m, context) Adds a hook to this board.
	animate() General purpose animation function.
	applyZoom() Apply update on all objects with the new zoom-factors.
	calculateSnapSizes() Calculates adequate snap sizes.
	clearTraces() Delete the elements drawn as part of a trace of an element.
<private>	clickDownArrow() Handler for click on down arrow in the navigation bar
<private>	clickLeftArrow() Handler for click on left arrow in the navigation bar
<private>	clickRightArrow() Handler for click on right arrow in the navigation bar
<private>	clickUpArrow() Handler for click on up arrow in the navigation bar
	create(elementType, parents, attributes) Creates a new geometric element of type elementType.
	createRoulette(c1, c2, start_c1, stepsize, time, time, pointlist) Function to animate a curve rolling on another curve.
	dehighlightAll() Remove highlighting of all elements.
	emulateColorblindness(deficiency) Initializes color blindness simulation.
	finalizeAdding(obj) After construction of the object the visibility is set and the label is constructed if necessary.
	fullUpdate() Runs through all elements and calls their update() method and update the conditions.
	generateId() Generates unique id for a board.
	generateName(object) Generates an unique name for the given object.
	getAllObjectsUnderMouse(Evt) Collects all elements under current mouse position.
	getAllUnderMouse(Evt) Collects all elements under current mouse position plus current user coordinates of mouse cursor.
	getBoundingBox() Get the bounding box of the board.
	getCoordsTopLeftCorner() Calculates mouse coordinates relative to the boards container.
	getMousePosition(e, i) Get the position of the mouse in screen coordinates, relative to the upper left corner of the host tag.
	getPartialConstruction(root, filters) Return all elements that somehow depend on the element root and satisfy one of the filter rules.
	getScrCoordsOfMouse(x, y) In case of snapToGrid activated this method caclulates the screen coords of mouse "snapped to grid".
	getUsrCoordsOfMouse(Evt) In case of snapToGrid activated this method calculates the user coords of mouse "snapped to grid".
	highlightCustomInfobox(text) Changes the text of the info box to what is provided via text.
	highlightInfobox(x, y, el) Changes the text of the info box to show the given coordinates.
	initGeonextBoard() Initialize some objects which are contained in every GEONExT construction by default, but are not contained in the gxt files.
	initInfobox() Initialize the info box object which is used to display the coordinates of points near the mouse pointer,
	initMoveObject(x, y) Collects all elements below the current mouse pointer and fulfilling the following constraints: isDraggable visible not fixed not frozen
	initMoveOrigin(x, y) Initiate moving the origin.
	initXYstart(obj) Helper function which returns a reasonable starting point for the object being dragged
	mouseDownListener(Evt) This method is called by the browser when the mouse is moved.
<private>	mouseMoveListener(Event) This method is called by the browser when the left mouse button is clicked.
<private>	mouseUpListener(Evt) This method is called by the browser when the left mouse button is released.
	mouseWheelListener(Event) Handler for mouse wheel events.
	moveLine(p1, p2, o) Moves a line in multitouch mode.
	moveObject(x, y, o) Moves an object.
	moveOrigin(x, y) Moves the origin and initializes an update of all elements.
	otherIntersection(el1, el2, el) Intersectionof circles and line
	prepareUpdate() Sets for all objects the needsUpdate flag to "true".
	removeAncestors(object) Removes the ancestors of an object an the object itself from board and renderer.
	removeChild(board) Deletes a board from the list of dependent boards.
	removeEventHandlers() Remove all event handlers from the board object
	removeGrids() Removes all grids assigned to this board.
	removeHook(id) Removes a hook from the board.
	removeObject(object) Removes object from board and renderer.
	resizeContainer(canvasWidth, canvasHeight) Change the height and width of the board's container.
	setBoundingBox(bbox, keepaspectratio) Set the bounding box of the board.
	setId(obj, type) Composes an id for an element.
	setZoom(fX, fY) Sets the zoom level to fX resp fY.
	showDependencies() Lists the dependencies graph in a new HTML-window.
	showXML() Lists the XML code of the construction in a new HTML-window.
	stopAllAnimation() Cancels all running animations.
	suspendUpdate() Stop updates of the board.
	touchStartListener(evt) Touch-Events
	unsuspendUpdate() Enable updates of the board.
	update(drag) Runs through most elements and calls their update() method and update the conditions.
<private>	updateConditions() Computes the commands in the conditions-section of the gxt file.
	updateElements(drag) Runs through all elements and calls their update() method.
	updateHooks(m) Runs through all hooked functions and calls them.
	updateInfobox(el) Updates and displays a little info box to show coordinates of current selected points.
	updateRenderer(drag) Runs through all elements and calls their update() method.
	updateRendererCanvas(drag) Runs through all elements and calls their update() method.
	zoom100() Resets zoom factor to 100%.
	zoomAllPoints() Zooms the board so every visible point is shown.
	zoomElements(elements) Reset the bounding box and the zoom level to 100% such that a given set of elements is within the board's viewport.
	zoomIn(x, y) Zooms into the board by the factors board.options.zoom.factorX and board.options.zoom.factorY and applies the zoom.
	zoomOut(x, y) Zooms out of the board by the factors board.options.zoom.factorX and board.options.zoom.factorY and applies the zoom.

---

---

See:

JXG.Board#drag_obj

---

---

---

See:

JXG.Board#updateQuality

---

See:

JXG.Board#updateQuality

---

See:

JXG.Board#updateQuality

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

See:

JXG.Board#addChild

JXG.Board#removeChild

---

Default Value:

2

---

---

See:

JXG.Board#drag_dy

JXG.Board#drag_obj

---

See:

JXG.Board#drag_dx

JXG.Board#drag_obj

---

---

See:

JXG.GeonextReader#readGeonext

Default Value:

false

---

---

---

Default Value:

true

---

Default Value:

true

---

---

See:

JXG.Board#addHook

JXG.Board#removeHook

JXG.Board#updateHooks

---

---

Default Value:

false

---

---

---

See:

---

Default Value:

false

---

---

---

---

---

Default Value:

false

---

---

See:

JXG.JSXGraph#licenseText

JXG.JSXGraph#initBoard

---

See:

---

---

---

---

See:

JXG.Board#mode

---

---

---

Parameters:

{JXG.GeometryElement} element

The element which is to be animated.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.Board} board

A reference to board which will be updated after an update of this board occured.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{String} str

String containing coniditional update in geonext syntax

---

---

Returns:

{JXG.Board} Reference to the board.

---

Parameters:

{Function} hook

A function to be called by the board after an update occured.

{String} m Optional, Default: 'update'

When the hook is to be called. Possible values are mouseup, mousedown and update.

{Object} context Optional, Default: board

Determines the execution context the hook is called. This parameter is optional, default is the board object the hook is attached to.

Returns:

{Number} Id of the hook, required to remove the hook from the board.

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board.

---

Returns:

{JXG.Board} Reference to the board.

---

Returns:

{JXG.Board} Reference to the board

---

---

---

---

---

Parameters:

{String} elementType

Type of the element to be constructed given as a string e.g. 'point' or 'circle'.

{Array} parents

Array of parent elements needed to construct the element e.g. coordinates for a point or two points to construct a line. This highly depends on the elementType that is constructed. See the corresponding JXG.create* methods for a list of possible parameters.

{Object} attributes

An object containing the attributes to be set. This also depends on the elementType. Common attributes are name, visible, strokeColor.

Returns:

{Object} Reference to the created element. This is usually a GeometryElement, but can be an array containing two or more elements.

---

Parameters:

{Curve} c1

JSXGraph curve building the floor where c2 rolls

{Curve} c2

JSXGraph curve which rolls on c1.

{number} start_c1

The parameter t such that c1(t) touches c2. This is the start position of the rolling process

{Number} stepsize

Increase in t in each step for the curve c1

{Number} time

Delay time for setInterval()

time

pointlist

Returns:

{Array} pointlist Array of points which are rolled in each step. This list should contain all points which define c2 and gliders on c2.

Examples:

// Line which will be the floor to roll upon.
var line = brd.create('curve', [function (t) { return t;}, function (t){ return 1;}], {strokeWidth:6});
// Center of the rolling circle
var C = brd.create('point',[0,2],{name:'C'});
// Starting point of the rolling circle
var P = brd.create('point',[0,1],{name:'P', trace:true});
// Circle defined as a curve. The circle "starts" at P, i.e. circle(0) = P
var circle = brd.create('curve',[
          function (t){var d = P.Dist(C),
                          beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                      t += beta;
                      return C.X()+d*Math.cos(t);
          },
          function (t){var d = P.Dist(C),
                          beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                      t += beta;
                      return C.Y()+d*Math.sin(t);
          },
          0,2*Math.PI],
          {strokeWidth:6, strokeColor:'green'});

// Point on circle
var B = brd.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
var roll = brd.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);
roll.start() // Start the rolling, to be stopped by roll.stop()

---

Returns:

{JXG.Board} Reference to the board.

---

Parameters:

{String} deficiency

Describes the color blindness deficiency which is simulated. Accepted values are 'protanopia', 'deuteranopia', and 'tritanopia'.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Object} obj

The object to add.

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{String} Unique id for a board.

---

Parameters:

{Object} object

Reference of an JXG.GeometryElement that is to be named.

Returns:

{String} Unique name for the object.

---

Parameters:

{Event} Evt

Event object containing the mouse coordinates.

Returns:

{Array} Array of elements at the current mouse position.

---

Parameters:

{Event} Evt

Event object containing the mouse coordinates.

Returns:

{Array} Array of elements at the current mouse position plus current user coordinates of mouse.

---

Returns:

{Array} bounding box [x1,y1,x2,y2] upper left corner, lower right corner

---

Returns:

{Array} Array of coordinates relative the boards container top left corner.

---

Parameters:

{Event} e

Event object given by the browser.

{Number} i Optional

Only use in case of touch events. This determines which finger to use and should not be set for mouseevents.

Returns:

{Array} Contains the mouse coordinates in user coordinates, ready for JXG.Coords

---

Parameters:

{JXG.GeometryElement} root

Dependency tree root element

{Object} filters

An arbitrary amount of objects which define filters for the elements to return. Only elements that fulfill at least one filter are returned. The comparison is a direct comparison, i.e. nested objects won't be compared.

Examples:

// This will return only points
var partPoints = board.getPartialConstruction(p, {elementClass: JXG.OBJECT_CLASS_POINT});

// This will return only points and lines
var partPointsLines = board.getPartialConstruction(p, {elementClass: JXG.OBJECT_CLASS_POINT}, {elementClass: JXG.OBJECT_CLASS_LINE});

---

Parameters:

{Number} x

X coordinate in screen coordinates

{Number} y

Y coordinate in screen coordinates

Returns:

{Array} Coordinates of the mouse in screen coordinates, snapped to grid.

---

Parameters:

{Event} Evt

Event object containing the mouse coordinates.

Returns:

{Array} Coordinates of the mouse in screen coordinates, snapped to grid.

---

Parameters:

{String} text

Returns:

{JXG.Board} Reference to the board.

---

Parameters:

{Number} x

{Number} y

{JXG.Point} el

The element the mouse is pointing at

Returns:

{JXG.Board} Reference to the board.

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Number} x

Current mouse/touch coordinates

{Number} y

current mouse/touch coordinates

Returns:

{Array} A list of geometric elements.

---

Parameters:

{Number} x

Current mouse/touch coordinates

{Number} y

Current mouse/touch coordinates

---

Parameters:

{JXG.GeometryElement} obj

The object to be dragged

Returns:

{Array} The starting point in usr coords

---

Parameters:

{Event} Evt

The browsers event object.

Returns:

{Boolean} True if no element is found under the current mouse pointer, false otherwise.

---

Parameters:

{Event} Event

The browsers event object.

---

Parameters:

Evt

---

Parameters:

{Event} Event

Returns:

{Boolean}

---

Parameters:

{array} p1

x,y coordinates of first touch

{array} p2

x,y coordinates of second touch

{object} o

The touch object that is dragged: {JXG.Board#touches}.

---

Parameters:

{Number} x

Coordinate

{Number} y

Coordinate

{object} o

The touch object that is dragged: {JXG.Board#mouse} or {JXG.Board#touches}.

---

Parameters:

x

y

Returns:

{JXG.Board} Reference to this board.

---

Parameters:

el1

el2

el

---

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.GeometryElement} object

The object to remove.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.Board} board

Reference to the board which will be removed.

Returns:

{JXG.Board} Reference to the board

---

---

Returns:

{JXG.Board} Reference to the board object.

---

Parameters:

{Number} id

Id for the hook. The number you got when you added the hook.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.GeometryElement} object

The object to remove.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Number} canvasWidth

New width of the container.

{Number} canvasHeight

New height of the container.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Array} bbox

New bounding box [x1,y1,x2,y2]

{Boolean} keepaspectratio Optional, Default: false

If set to true, the aspect ratio will be 1:1, but the resulting viewport may be larger.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Object} obj

Reference of an geometry object that needs an id.

{Number} type

Type of the object.

Returns:

{String} Unique id for an element.

---

Parameters:

{Number} fX

{Number} fY

Returns:

{JXG.Board}

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board

---

Parameters:

evt

---

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Object} drag

Element that caused the update.

Returns:

{JXG.Board} Reference to the board

---

See:

JXG.Board#addConditions

---

Parameters:

{JXG.GeometryElement} drag

Element that caused the update.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

m

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.GeometryElement} el

A GeometryElement

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.GeometryElement} drag

Element that caused the update.

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{JXG.GeometryElement} drag

Element that caused the update.

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board

---

Returns:

{JXG.Board} Reference to the board

---

Parameters:

{Array} elements

A set of elements given by id, reference, or name.

Returns:

{JXG.Board} Reference to the board.

---

Parameters:

x

y

Returns:

{JXG.Board} Reference to the board

---

Parameters:

x

y

Returns:

{JXG.Board} Reference to the board

---