Class ForeignObject
JXG.GeometryElement,JXG.CoordsElement
↳ JXG.ForeignObject
↳ ForeignObject
This element is used to provide a constructor for arbitrary content in an SVG foreignObject container.
Instead of board.create('foreignobject') the shortcut board.create('fo') may be used.
Defined in: foreignobject.js.
Extends
JXG.ForeignObject.
Constructor Attributes | Constructor Name and Description |
---|---|
ForeignObject(content, position, size)
|
- Fields borrowed from class JXG.ForeignObject:
- content, size
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel
- Fields borrowed from class JXG.CoordsElement:
- coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
- Fields borrowed from class JXG.ForeignObject:
- content, size
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel
- Fields borrowed from class JXG.CoordsElement:
- coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
- Methods borrowed from class JXG.ForeignObject:
- H, hasPoint, setSize, update, updateRenderer, updateSize, updateSpan, W
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Dist, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Class Detail
ForeignObject(content, position, size)
- Parameters:
- {String} content
- HTML content of the foreignObject. May also be <video> or <iframe>
- {Array} position
- Position of the foreignObject given by [x, y] in user coordinates. Same as for images.
- {Array} size Optional
- (Optional) argument size of the foreignObject in user coordinates. If not given, size is specified by the HTML attributes or CSS properties of the content.
- See:
- Image
- Examples:
var p = board.create('point', [1, 7], {size: 16}); var fo = board.create('foreignobject', [ '<video width="300" height="200" src="https://eucbeniki.sio.si/vega2/278/Video_metanje_oge_.mp4" type="html5video" controls>', [0, -3], [9, 6]], {layer: 8, fixed: true} );
var p = board.create('point', [1, 7], {size: 16}); var fo = board.create('fo', [ '<div style="background-color:blue; color: yellow; padding:20px; width:200px; height:50px; ">Hello</div>', [-7, -6]], {layer: 1, fixed: false} );
board.renderer.container.style.backgroundColor = 'lightblue'; var points = []; points.push( board.create('point', [-2, 3.5], {fixed:false,color: 'yellow', size: 6,name:'6 am'}) ); points.push( board.create('point', [0, 3.5], {fixed:false,color: 'yellow', size: 6,name:'12 pm'}) ); points.push( board.create('point', [2, 3.5], {fixed:false,color: 'yellow', size: 6,name:'6 pm'}) ); var fo = board.create('fo', [ '<video width="100%" height="100%" src="https://benedu.net/moodle/aaimg/ajx_img/astro/tr/1vd.mp4" type="html5video" controls>', [-6, -4], [12, 8]], {layer: 0, fixed: true} ); var f = JXG.Math.Numerics.lagrangePolynomial(points); var graph = board.create('functiongraph', [f, -10, 10], {fixed:true,strokeWidth:3, layer: 8});