Accueil – Tutoriels – Export html et LateX

Cómo insertar en línea las figuras de MathGraph32 usando etiquetas HTML

modification mercredi 19 janvier 2023.

Toutes les versions de cet article : [English] [Español] [français]

Desde la versión 7.3.5, MathGraph32 nos permite insertar figuras dinámicas utilizando etiquetas HTML específicas.

Esta es la forma más sencilla de poner figuras de MathGraph32 en una página HTML.

En primer lugar, recordemos que el código Base64 de la figura es una cadena de caracteres que podemos recuperar usando el software con el icono de exportación de la barra superior y eligiendo el elemento obtener el código Base64 de la figura.

Hay dos tipos de etiquetas disponibles :

`La etiqueta <Mathgraph-Player> </ Mathgraph-Player>:`

Hace posible poner una figura dinámica en línea, con la posibilidad de actuar en la figura (por ejemplo, capturar un punto móvil), pero sin poder modificarla en línea.

En algún lugar de su código HTML debe tener el siguiente código :

<script async src="https://www.mathgraph32.org/js/mtgLoad/mathgraphElements.js"></script>

Aquí hay un ejemplo de un código para usar en una página HTML con dos figuras :

<p>Una primera figura</p>

<mathgraph-player width="800" height="600" fig="el código base64 de la figura"></mathgraph-player>



<p>y una segunda</p>

<mathgraph-player fig="el código base64 de la otra figura"></mathgraph-player>



<script async src="https://www.mathgraph32.org/js/mtgLoad/mathgraphElements.js"></script>

Observaciones :

La etiqueta de cierre </mathgraph-player> es obligatoria, la sintaxis <mathgraph-player fig="…" /> no funcionará (como para todos los customElements)
Podemos usar los atributos de width y height (poner números sin unidad, este será el tamaño en pixels del svg que se muestra)
El atributo svgId es posible para imponer el id que se colocará sobre el svg de la figura creada (útil si deseamos manipular esta figura con el código javascript)
Si deseamos mostrar una figura en inline, podemos darle el estilo de visualización : inline-block (ponerlo inline no funcionará), con una directiva css, un atributo style puesto sobre <mathgraph-player> o en js.
Podemos poner en la misma página las etiquetas <mathgraph-editor> y <mathgraph-player>.

`La etiqueta <mathgraph-editor></mathgraph-editor> :`

Ella permite una figura dinámica en línea, con la posibilidad de modificar esta figura en línea con el software.

Aquí hay un ejemplo de un código para usar en una página HTML con dos figuras :

<!-- carga del editor, con los botones nivel colegio , sin el boton abrir ni el botón para cambiar las opciones -->

<mathgraph-editor width="800" height="600" fig="el código base64 de la figura" level="2" open="false" options="false"></mathgraph-editor>



<!-- carga del editor, con todas las opciones por defecto -->

<mathgraph-editor fig="el código base64 de la figura"></mathgraph-editor>



<script async src="https://www.mathgraph32.org/js/mtgLoad/mathgraphElements.js"></script>

Observaciones :

La etiqueta de cierre </mathgraph-player> es obligatoria, la sintaxis <mathgraph-player fig="…" /> no funcionará (como para todos los customElements)
Podemos usar los atributos de width y height (poner números sin unidad, este será el tamaño en pixels del svg que se muestra)
El atributo svgId es posible para imponer el id que se colocará sobre el svg de la figura creada (útil si deseamos manipular esta figura con el código javascript)
Si deseamos mostrar una figura en inline, podemos darle el estilo de visualización : inline-block (ponerlo inline no funcionará), con una directiva css, un atributo style puesto sobre <mathgraph-player> o en js.
Podemos poner en la misma página las etiquetas <mathgraph-editor> y <mathgraph-player>.
La etiqueta </mathgraph-editor> permite utilizar atributos suplementarios.
- El atributo open = "false" eliminará el icono permitiendo abrir un fichero, ese atributo es true si no está presente.
- El atributo options = "false" eliminará el ícono que permite modificar las opciones de funcionamiento de la figura (por ejemplo la unidad de ángulo de la figure).
- El atributo level permite especificar el nivel de funcionamiento del software : "1" para funcionar en modo elemental, "2" para modo colegio, "3" para modo avanzado sin soporte para números complejos (nivel predeterminado si el atributo está ausente) y "4" para el nivel avanzado con la carga de números complejos.
- El atributo displayMeasures : si el está en true (valor predeterminado), cuando se mide una longitud o un ángulo, la medición se muestra en la figura.
- El atributo stylePointCroix : si el está en true el estilo de punto predeterminado al inicio es la cruz. Por defecto, este atributo es false y el estilo de punto activo es un puntón.
- El atributo newFig : si ese atributo está en false el icono que permite crear una nueva figura estará ausente. Este atributo está en true por defecto.
- El atributo onlyPoints : si ese atributo está en true, las herramientas de transformaciones geométricas solo se aplicarán a los puntos. Este atributo está en false de forma predeterminada y las transformaciones geométricas se aplican a puntos, rectas, segmentos, circunferencias y arcos de circunferencias.
- El atributo dys : si ese atributo está en true, la aplicación comenzará en modo "dys" con el estilo de punto predeterminado que es una cruz grande, un espesor de línea de 2, el tamaño de los nombres de los puntos o rectas más grandes. Este atributo es falso de forma predeterminada.
- El atributo language : "fr" para un funcionamiento en francés (valor predeterminado), "en" para un funcionamiento en inglés y "es" para un funcionamiento en español.