Logiciel libre de géométrie, d'analyse et de simulation multiplateforme par Yves Biton
Toutes les versions de cet article : [English] [Español] [français]
La versión 6.6 de MathGraph32 JS nos permite modificar el comportamiento de una figura MathGraph32 cuando se muestra en una página web.
A diferencia de la mayoría de los otros programas de matemáticas dinámicas, MathGraph32 muestra sus figuras vectoriales en un SVG.
Cada objeto gráfico de la figura está representado por un subelemento SVG del SVG de la figura y es posible acceder luego a este elemento SVG a través de las funciones proporcionadas por MathGraph32.
Para acceder al svg que representa un elemento gráfico de la figura, la versión 6.6 nos permite asignar a este objeto un tag que es una cadena de caracteres de nuestra elección.
La asignación de un tag se realiza a través del cuadro de diálogo del protocolo de la figura (icono 
) como lo muestra la siguiente figura de ejemplo :
Aquí ya hemos asignado al punto M un tag que es la cadena "ptM".
Para modificar este tag, simplemente hacemos clic en el botón Cambiar el tag.
Mostraremos algunos ejemplos de funcionamiento personalizado en la siguiente figura :
Se puede descargar aquí un documento de referencia en PDF sobre el funcionamiento y la personalización del reproductor MathGraph32 :
A continuación está el código html que permite mostrar la figura y personalizar su funcionamiento :
Accueil
Présentation
FAQ
Contact
<div id = "mtg32"></div>
<script type="text/javascript" src="https://dev.mathgraph32.org/js/mtgLoad/mtgLoad.min.js"></script>
<script type="application/javascript">
(function autostart () {
var svgOptions = {
idSvg: "mtg32svg", width: "1087", height: "654"
}
var mtgOptions = {
fig: "TWF0aEdyYXBoSmF2YTEuMAAAABM+TMzNAAJmcv###wEA#wEAAAAAAAAAAAPxAAAChwAAAQEAAAABAAAABgAKUmFwcG9ydGV1cgHPQ29uc3RydWl0IHVuIHJhcHBvcnRldXIgw6AgcGFydGlyIGRlIGRldXggcG9pbnRzIGxpYnJlcy4KTGVzIG9iamV0cyBzb3VyY2VzIG51bcOpcmlxdWVzIHNvbnQgOgojMTplcGFpc3NldXIgOiBkaXN0YW5jZSBlbiBwaXhlbHMgZW50cmUgbGVzIGRldXggYXJjcyBkdSByYXBwb3J0ZXVyCiMyOmxvbmdQZXRpdGVzR3JhZCA6IExvbmd1ZXVyIGVuIHBpeGVsIGRlcyBwZXRpdGVzIGdyYWR1YXRpb25zCiMzOmxvbmdNb3llbm5lc0dyYWQgOiBMb25ndWV1ciBlbiBwaXhlbCBkZXMgbW95ZW5uZXMgZ3JhZHVhdGlvbnMKIzQ6bG9uZ0dyYW5kZXNHcmFkIDogTG9uZ3VldXIgZW4gcGl4ZWwgZGVzIGdyYW5kZXMgZ3JhZHVhdGlvbnMKTGVzIG9iamV0cyBzb3VyY2VzIGdyYXBoaXF1ZXMgc29udCA6CiM1OkxlIGNlbnRyZSBkdSByYXBwb3J0ZXVyCiM2OkxlIHBvaW5zIGNvcnJlc3BvbmRhbnQgw6AgbGEgZ3JhZHVhdGlvbiAwCgAAAAYAAAANAQAAAED#####AAAAAQARQ0VsZW1lbnRHZW5lcmlxdWUACWVwYWlzc2V1cv####8AAAABAAAAAAAPbG9uZ1BldGl0ZXNHcmFk#####wAAAAEAAAAAABBsb25nTW95ZW5uZXNHcmFk#####wAAAAEAAAAAAA9sb25nR3JhbmRlc0dyYWT#####AAAAAQAAAAAAAk8xAAAAAP####8AAAAAAAJJMQAAAAD##########wAAAAEAEUNTeW1ldHJpZUNlbnRyYWxlAP####8AAAAE#####wAAAAEAC0NQb2ludEltYWdlAP####8BpKSkABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAAAAAUAAAAG#####wAAAAEAEkNBcmNEZUNlcmNsZURpcmVjdAH#####AKSkpAAAAAEAAAAEAAAABQAAAAf#####AAAAAgAJQ0NlcmNsZU9SAP####8BpKSkAAAAAQAAAAX#####AAAAAQAPQ1Jlc3VsdGF0VmFsZXVyAAAAAAH#####AAAAAQAIQ1NlZ21lbnQA#####wGkpKQAEAAAAQAAAAEAAAAHAAAABf####8AAAABABBDSW50RHJvaXRlQ2VyY2xlAP####8AAAAKAAAACf####8AAAABABBDUG9pbnRMaWVCaXBvaW50AP####8BpKSkARAAAlcxAAAAAAAAAAAAQAgAAAAAAAAAAAUAAgAAAAsAAAACAP####8BpKSkABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAAAAAwAAAAGAAAAAwH#####AKSkpAAAAAEAAAAEAAAADAAAAA3#####AAAAAQAPQ1BvaW50TGllQ2VyY2xlAP####8BAAAAARAAAkoxAAAAAAAAAAAAQAgAAAAAAAAAAAUAAT#IR8zsxBM2AAAACP####8AAAABABZDRHJvaXRlUGVycGVuZGljdWxhaXJlAP####8BpKSkABAAAAEAAAABAAAABQAAAAoAAAAEAP####8BpKSkAAAAAQAAAAX#####AAAAAQAKQ09wZXJhdGlvbgMAAAAFAAAAAP####8AAAABAApDQ29uc3RhbnRlQAAAAAAAAAABAAAABwD#####AAAAEAAAABEAAAAIAP####8BpKSkABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAEAAAAS#####wAAAAEADENUcmFuc2xhdGlvbgD#####AAAABQAAABMAAAACAP####8BpKSkABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAAAAAcAAAAU#####wAAAAEACUNQb2x5Z29uZQD#####AaSkpAAAAAEAAAAFAAAABQAAABMAAAAVAAAABwAAAAX#####AAAAAQAQQ1N1cmZhY2VQb2x5Z29uZQH#####ANjY2AAAAAAABQAAABYAAAAGAf####8ApKSkABAAAAEAAAABAAAABwAAABUAAAAGAf####8ApKSkABAAAAEAAAABAAAAFQAAABMAAAAGAf####8ApKSkABAAAAEAAAABAAAAEwAAAAUAAAAJAP####8BAAD#ABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAE#58lyTfGdFwAAAAgAAAAJAP####8BAAD#ABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAE#57heNn0#HwAAAA7#####AAAAAgANQ0xpZXVEZVBvaW50cwD#####AQAA#wAAAAEAAAAcAAAAMgAAAAAAHAAAAAAAAAAQAP####8BAAD#AAAAAQAAABsAAAAyAAAAAAAbAAAAAP####8AAAABABFDU3VyZmFjZURldXhMaWV1eAH#####ANjY2AAAAAAABQAAAB0AAAAeAAAABgD#####AaSkpAAQAAABAAAAAQAAAAQAAAAPAAAABAD#####AaSkpAAAAAEAAAAPAAAABQAAAAEBAAAABwD#####AAAAIAAAACEAAAAIAP####8BpKSkABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAIAAAAiAAAABgD#####Ab29vQAQAAABAAAAAQAAAA8AAAAj#####wAAAAIAEkNMaWV1T2JqZXRQYXJQdExpZQH#####AL29vQAAAAAAJAAAAAxAZqAAAAAAAAAAAA8AAAAAAAAABAD#####Ab29vQAAAAEAAAAPAAAABQAAAAMBAAAABwD#####AAAAIAAAACYAAAAIAP####8Bvb29ABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAIAAAAnAAAABgD#####AYSEhAAQAAABAAAAAQAAACgAAAAPAAAABAD#####AYSEhAAAAAEAAAAPAAAABQAAAAIBAAAABwD#####AAAAIAAAACoAAAAIAP####8BhISEABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAIAAAArAAAABgD#####AYSEhAAQAAABAAAAAQAAACwAAAAPAAAAEgH#####AISEhAAAAAAALQAAAAxAQoAAAAAAAAAAAA8AAAAAAAAAEgH#####AISEhAAAAAAAKQAAAAxAMwAAAAAAAAAAAA8AAAAA#####wAAAAIAE0NNZXN1cmVBbmdsZU9yaWVudGUA#####wAEYW5nMQAAAAUAAAAEAAAAD#####8AAAABABRDRHJvaXRlRGlyZWN0aW9uRml4ZQD#####AQAAAAEQAAABAAAAAQAAAAQBP#AAAAAAAAD#####AAAAAQAPQ1BvaW50TGllRHJvaXRlAP####8BAAAAARAAAksxAAAAAAAAAAAAQAgAAAAAAAAAAAUAAUBvwAAAAAAAAAAAMQAAABMA#####wAEYW5nMgAAADIAAAAEAAAADwAAAAQA#####wEAAAAAAAABAAAAKAAAAAxAKAAAAAAAAAEAAAAHAP####8AAAAgAAAANAAAAAgA#####wEAAAAAEAAAAAAAAAAAAAAAQAgAAAAAAAAAAAUAAgAAADX#####AAAAAQAPQ1ZhbGV1ckFmZmljaGVlAP####8BAAAAAQAAAAAANgwAAAAAAAEAAAABAAAACwEAAAAFAAAAMwAAAAxAVoAAAAAAAAAAAAAAAAAAMAAAABIB#####wAAAAAAAAAAADcAAAAMQDMAAAAAAAAAAAAPAAAAAP####8AAAABAAdDQ2FsY3VsAP####8AB2FuZ3N1cDEACDE4MC1hbmcxAAAACwEAAAAMQGaAAAAAAAAAAAAFAAAAMP####8AAAACAA9DTWVzdXJlQWJzY2lzc2UA#####wAEYWJzMQAAAAQAAAAFAAAADP####8AAAABAAtDSG9tb3RoZXRpZQD#####AAAABAAAAAUAAAA6AAAAAgD#####AQAAAAAQAAAAAAAAAAAAAABACAAAAAAAAAAABQAAAAAPAAAAOwAAABYA#####wEAAAABAAAAAAA8CwAAAAAAAQAAAAIAAAALAQAAAAUAAAAzAAAADEBWgAAAAAAAAAAAAAAAAAA5AAAAEgH#####AAAAAAAAAAAAPQAAAAxAMwAAAAAAAAAAAA8AAAAAAAAABgH#####AKSkpAAQAAABAAAAAQAAAAwAAAANAAAAAQAAABv#####AAAAAQAKQ0NhbGNDb25zdAD#####AAJwaQAWMy4xNDE1OTI2NTM1ODk3OTMyMzg0NgAAAAxACSH7VEQtGP####8AAAABAApDUG9pbnRCYXNlAP####8AAAAAABAAAUEAwCIAAAAAAABAHAAAAAAAAAAACQABQFvAAAAAAABAYZXCj1wo9gAAABsA#####wAAAAAAEAAAAAAAAAAAAAAAQAgAAAAAAAAAA3B0QgkAAUBoAAAAAAAAQGvVwo9cKPYAAAAbAP####8AAAAAABAAAAAAAAAAAAAAAEAIAAAAAAAAAANwdEMJAAFAcvAAAAAAAEBp1cKPXCj2AAAAGwD#####AAAAAAAQAAAAQCIAAAAAAADAAAAAAAAAAAADcHRECQABQHMQAAAAAABAWiuFHrhR7AAAABsA#####wAAAAAAEAAAAMAUAAAAAAAAwD0AAAAAAAIAA3B0RQkAAUBlwAAAAAAAQFMrhR64UewAAAAOAP####8AAAD#AAhQb2x5Z29uZQABAAAABgAAAAEAAAACAAAAAwAAAAQAAAAFAAAAAQAAAA8A#####wAAAP8ABVN1cmYxAAAABQAAAAYAAAAbAP####8AAAAAABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAIAAFAZIAAAAAAAEB2+uFHrhR7AAAAGwD#####AAAAAAAQAAAAAAAAAAAAAABACAAAAAAAAAAACAABQHywAAAAAABAcHrhR64Ue#####8AAAABAAlDRHJvaXRlQUIA#####wAAfwAAEAAAAQAGRHJvaXRlAAMAAAAIAAAACQAAABsA#####wD#AP8AEAAAAAAAAAAAAAAAQAgAAAAAAAAAAAMAAUCECAAAAAAAQG31wo9cKPYAAAAbAP####8A#wD#ABAAAAAAAAAAAAAAAEAIAAAAAAAAAAADAAFAgegAAAAAAEBc64UeuFHs#####wAAAAEACUNDZXJjbGVPQQD#####AP8A#wAGQ2VyY2xlAAIAAAALAAAADP####8AAAABAA5DU3VyZmFjZURpc3F1ZQD#####AP##AAAFU3VyZjIAAAAFAAAADQAAABsA#####wAAAAAAEAAAAAAAAAAAAAAAQAgAAAAAAAAAAAUAAUB48AAAAAAAQFHrhR64UewAAAAbAP####8AAAAAABAAAAAAAAAAAAAAAEAIAAAAAAAAAAAFAAFAeRAAAAAAAEBldcKPXCj2AAAAGwD#####AAAAAAAQAAAAAAAAAAAAAABACAAAAAAAAAAABQABQICIAAAAAABAXmuFHrhR7AAAAAYA#####wAAfwAAEAAAAQAAAAEAAAARAAAAEAAAAAYA#####wAAfwAAEAAAAQAAAAEAAAAPAAAAEP####8AAAACABdDTWFycXVlQW5nbGVHZW9tZXRyaXF1ZQD#####AP8A#wALTWFycXVlQW5nbGUAAQAAAEBANTaUgBdIEAAAABEAAAAQAAAAD#####8AAAACAAxDQ29tbWVudGFpcmUA#####wAAAP8BAARTdG9w#####xBAMgAAAAAAAEAxrhR64UeuAgHv7#sAAAAAAAAAAAAAAAwAAAAAAAAAAAAEU1RPUAAAABsA#####wEAAAAAEAABTQBAIAAAAAAAAMA2AAAAAAAAAANQdE0FAAFAeVgAAAAAAEBs0euFHrhSAAAABgD#####AX8AAAAQAAABAANTZWcAAQAAAAsAAAAW#####wAAAAIABkNMYXRleAD#####AAAA#wBAIAAAAAAAAEAUAAAAAAAAAAZBZmZGb3IAAAALEAAB####AAAAAAAAAAAAAAAMAAAAAAAAAAAADFxkZnJhY3syfXszfQAAACEA#####wAAAP8BAAdBZmZSYWMy#####xBAVkAAAAAAAEAqo9cKPXCoAgHv7#sAAAAAAAAAAAAAAAwAAAAAAAAAAAAXXHRleHR7QWZmaWNoZSB9XHNxcnR7Mn0AAAAhAP####8AAAD#AQAHQWZmUmFjM#####8QQGhgAAAAAABALKPXCj1wpAIB7+#7AAAAAAAAAAAAAAAMAAAAAAAAAAAAF1x0ZXh0e0FmZmljaGUgfVxzcXJ0ezN9################",
isEditable: false,
callBackAfterReady: function callBackAfterReady(app) {
var x, y
var captured = false
app.addEventListener('mtg32svg', '#Polygone', 'mousedown', function (ev) {
captured = true
x = ev.clientX
y = ev.clientY
})
function mousemove(ev) {
if (captured) {
var newx = ev.clientX
var newy = ev.clientY
var deltax = newx - x
var deltay = newy - y
x = newx
y = newy
app.translatePoint('mtg32svg', 'A', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptB', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptC', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptD', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptE', deltax, deltay, false)
app.updateFigure('mtg32svg')
}
}
app.addCallBackToSVGListener('mtg32svg', 'mousemove', function (ev) {
mousemove(ev)
})
app.addCallBackToSVGListener('mtg32svg', 'mouseup', function () {
captured = false
})
app.addEventListener('mtg32svg', '#Polygone', 'mouseover', function (ev) {
if (!captured) app.getDoc('mtg32svg').defaultCursor = 'pointer'
})
app.addEventListener('mtg32svg', '#Polygone', 'mouseout', function (ev) {
app.getDoc('mtg32svg').defaultCursor = null
})
app.addEventListener('mtg32svg', '#Droite', 'mouseover', function (ev) {
app.setLineStyle('mtg32svg', '#Droite', 1, 3, true)
})
app.addEventListener('mtg32svg', '#Droite', 'mouseout', function (ev) {
app.setLineStyle('mtg32svg', '#Droite', 0, 3, true)
})
app.addEventListener('mtg32svg', '#MarqueAngle', 'mouseover', function (ev) {
app.setColor('mtg32svg', '#MarqueAngle', 0, 255, 0, true)
})
app.addEventListener('mtg32svg', '#MarqueAngle', 'mouseout', function (ev) {
app.setColor('mtg32svg', '#MarqueAngle', 255, 0, 255, true)
})
app.addEventListener('mtg32svg', '#Stop', 'mousedown', function (ev) {
app.removeEventListener('mtg32svg', '#Polygone', 'mouseover')
app.removeEventListener('mtg32svg', '#Polygone', 'mouseout')
app.removeEventListener('mtg32svg', '#Polygone', 'mousedown')
app.removeCallBackToSVGListener('mtg32svg', 'mousemove')
app.removeCallBackToSVGListener('mtg32svg', 'mouseup')
})
app.addEventListener('mtg32svg', '#Cercle', 'mousemove', function (ev, x, y) {
app.setVisible('mtg32svg', '#PtM', true)
app.setPointPosition('mtg32svg', '#PtM', x, y)
app.setVisible('mtg32svg', '#Seg', true)
})
app.addEventListener('mtg32svg', '#Cercle', 'mouseout', function (ev, x, y) {
app.setVisible('mtg32svg', '#PtM', false)
app.setVisible('mtg32svg', '#Seg', false)
})
app.addEventListener('mtg32svg', '#AffRac2', 'mousedown', function (ev) {
app.setText('mtg32svg', '#AffFor', '\\sqrt{2}', true)
})
app.addEventListener('mtg32svg', '#AffRac3', 'mousedown', function (ev) {
app.setText('mtg32svg', '#AffFor', '\\sqrt{3}', true)
})
}
}
mtgLoad("mtg32", svgOptions, mtgOptions, function (error, mtgAppPlayer) {
if (error) return console.error(error)
console.log("mtg32 player loaded", mtgAppPlayer)
})
})()
</script>El div de id mtg32 es el que contendrá el svg que tiene la figura.
La identificación de este svg y su tamaño se describen en la variable svgOptions.
La variable mtgOptions contiene el código Base 64 de la figura (que podemos usar para cargar la figura en MathGraph32), una variable isEditable que se establece falso porque vamos a mostrar esta figura, no editarla en la aplicación MathGraph32 en línea y una variable callBackAfterReady que define una función de callBack que se llamará una vez que MathGraph32 esté listo para mostrar la figura.
Es en esta función callBack que vamos a agregar funcionalidades no estándar a nuestra figura.
Comencemos interesándonos en el polígono de la parte superior izquierda de la figura.
Podemos capturar los vértices de este polígono que son puntos libres : esta es el funcionamiento habitual del reproductor de MathGraph32.
Pero si el puntero del mouse pasa al interior del polígono, se convierte en una mano y al hacer clic y arrastrar el mouse obtenemos una traslación de todo el polígono. Este no es el comportamiento habitual de una figura MathGraph32.
Comenzamos declarando tres variables llamadas x, y y capturadas, la última inicializada como falsa.
Cuando se creó la figura, asignamos a este polígono el tag Polígono.
Las siguientes líneas asignan al elemento SVG, que representa el polígono, una función de controlador de eventos del mouse ’mousedown’ del mouse que se llamará cuando hagamos clic en este elemento (y en el interior en el caso de un polígono) :
app.addEventListener('mtg32svg', '#Polygone', 'mousedown', function (ev) {
captured = true
x = ev.clientX
y = ev.clientY
})Esta función establece la variable capturada en verdadera y almacena en x y y las coordenadas del puntero del mouse del lugar donde hicimos clic inicialmente.
Las siguientes líneas asignan al elemento SVG que representa la figura una función de control de eventos del mouse ’mousedown’ que se llamará cuando el mouse se mueva sobre este elemento (y en el interior). Esta función de callBack es adicional a la ya definida por MathGraph32 en este SVG global de la figura.
app.addCallBackToSVGListener('mtg32svg', 'mousemove', function(ev) {
mousemove(ev)
})Esta función llama a la función mousemove definida de la siguiente manera :
function mousemove (ev) {
if (captured) {
var newx = ev.clientX
var newy = ev.clientY
var deltax = newx - x
var deltay = newy - y
x = newx
y = newy
app.translatePoint('mtg32svg', 'A', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptB', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptC', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptD', deltax, deltay, false)
app.translatePoint('mtg32svg', '#ptE', deltax, deltay, false)
app.updateFigure('mtg32svg')
}
}Esta función :
– * Recupera en las variables newx y newy las nuevas coordenadas del puntero del mouse, pone en las variables deltax y deltay las diferencias entre estas nuevas coordenadas y las antiguas que teníamos almacenadas en x y y.
– * Usa cinco veces seguidas una función del reproductor MathGraph32 llamada translatePoint que permite traducir las coordenadas de un punto libre de un vector de coordenadas (deltax, deltay).
El primer argumento de la función translatePoint es el id del svg que contiene la figura.
Los dos siguientes son las coordenadas de traslación.
El último parámetro es falso : no estamos pidiendo que la figura se actualice inmediatamente. Lo hacemos con la línea
app.updateFigure('mtg32svg')
Tengamos en cuenta que para la primera llamada a translatePoint pasamos como parámetro el nombre del punto (aquí A) pero que para las siguientes llamadas pasamos como parámetro el tag que se ha sido asignado a cada uno de estos puntos precedido por un carácter # (estos puntos no han sido nombrados).
Expliquemos la utilidad de las siguientes líneas :
app.addCallBackToSVGListener('mtg32svg', 'mouseup', function () {
captured = false
})Queremos que la captura del polígono se detenga cuando el usuario suelte el mouse (donde sea que esté).
MathGraph32 ya ha asignado un controlador de eventos mouseup al svg de la figura y esto no perturba su funcionamiento.
Por lo tanto, usamos la función addCallBackToSVGListener que agregará a la función callBack del listener ya creado por el reproductor la función pasada como parámetro, la única función de la cual será establecer el parámetro captured en falso.
Las siguientes líneas convierten el puntero del mouse en una mano cuando el puntero del mouse está dentro del polígono y restauran el puntero del mouse predeterminado cuando el puntero del mouse sale del polígono.
Para terminar con el polígono, examinemos las siguientes líneas:
<code>
app.addEventListener('mtg32svg', '#Stop', 'mousedown', function (ev) {
app.removeEventListener('mtg32svg', '#Polygone', 'mouseover')
app.removeEventListener('mtg32svg', '#Polygone', 'mouseout')
app.removeEventListener('mtg32svg', '#Polygone', 'mousedown')
app.removeCallBackToSVGListener('mtg32svg', 'mousemove')
app.removeCallBackToSVGListener('mtg32svg', 'mouseup')
})La figura contiene una visualización de texto STOP en la parte superior izquierda. El tag que se ha asignado a este objeto es Stop.
Cuando el usuario hace clic en esta visualización, se retiran los controladores de eventos que se habían asignado al svg de este objeto.
Una vez que haya hecho clic en este objeto, ya no es posible trasladar el polígono arrastrándolo.
Ahora miremos la recta verde de esta figura.
En MathGraph32, al crear la figura, a esta recta del ángulo se le asignó el tag Recta.
Cuando el puntero del mouse se desplaza sobre esta recta, ella cambia al estilo de línea de puntos para volver al estilo de línea continua cuando el puntero del mouse la deja.
Esto se hace a través de las siguientes líneas :
app.addEventListener('mtg32svg', '#Droite', 'mouseover', function (ev) {
app.setLineStyle('mtg32svg', '#Droite', 1, 3, true)
})
app.addEventListener('mtg32svg', '#Droite', 'mouseout', function (ev) {
app.setLineStyle('mtg32svg', '#Droite', 0, 3, true)
})La función setLineStyle del reproductor MathGraph32 se usa para cambiar el estilo de trazo de un objeto y tiene la siguiente sintaxis :
setLineStyle(idDoc, id , style, thickness, bImmediat = true)donde idDoc es el id de la figura svg, id es el índice html del elemento (proporcionado por el protocolo) o el carácter # siguiente de su tag (si tiene uno no vacío), thickness es el grosor de la línea de trazo en píxeles es un número entero entre 0 y 5 :
– 0 : trazo continua
– 1 : trazo de puntos
– 2 : trazo trazo (misma longitud)
– 3 : trazo punto punto
– 4 : trazo punto punto punto
– 5 : trazo largo trazo corto
El último parámetro es opcional y se considerará verdadero por defecto para solicitar una nueva visualización inmediata de la figura.
Pasemos a la marca del ángulo rosa en esta figura.
Se puede ver que ella cambia de color cuando el puntero del mouse pasa sobre él.
En MathGraph32, a esta marca de ángulo se le ha asignado el tag marqueAngle.
Las siguientes líneas cambian el color de este objeto cuando el mouse pasa sobre él y cuando el mouse deja la marca de ángulo :
app.addEventListener('mtg32svg', '#MarqueAngle', 'mouseover', function (ev) {
app.setColor('mtg32svg', '#MarqueAngle', 0, 255, 0, true)
})
app.addEventListener('mtg32svg', '#MarqueAngle', 'mouseout', function (ev) {
app.setColor('mtg32svg', '#MarqueAngle', 255, 0, 255, true)
})La función setColor del reproductor MathGraph32 tiene la siguiente sintaxis :
setColor(idDoc, ind, r, v, b, bImmediat = true)donde idDoc es la id del svg de la figura, id es el índice html del elemento (proporcionado por el protocolo) o el carácter #seguido de su tag (si tiene uno no vacío ), r, v y b son números enteros entre 0 y 255 que dan respectivamente los componentes rojo, verde y azul del color.
El último parámetro es opcional y se considerará verdadero por defecto para solicitar una nueva visualización inmediata de la figura.
Ahora veamos las siguientes líneas :
app.addEventListener('mtg32svg', '#Cercle', 'mousemove', function (ev, x, y) {
app.setVisible('mtg32svg', '#PtM', true)
app.setPointPosition('mtg32svg', '#PtM', x, y)
app.setVisible('mtg32svg', '#Seg', true)
})Cuando el puntero del ratón pasa dentro del círculo, aparece un punto M y un segmento que une este punto con el centro del círculo.
Este punto M y el segmento se ocultaron inicialmente en la figura MathGraph32, y se les asignaron las etiquetas ptM y Seg respectivamente.
La línea
app.setVisible('mtg32svg', '#PtM', true)solicita hacer visble al punto M.
La línea
app.setPointPosition('mtg32svg', '#PtM', x, y)coloca al punto libre M en la ubicación del puntero del mouse (que MathGraph32 pasó como parámetro a través de x y y)
La siguiente línea pide mostrar el segmento que inicialmente estaba oculto.
A la inversa, las siguientes líneas :
app.addEventListener('mtg32svg', '#Cercle', 'mouseout', function (ev, x, y) {
app.setVisible('mtg32svg', '#PtM', false)
app.setVisible('mtg32svg', '#Seg', false)
})ocultan al punto M y al segmento cuando el puntero del mouse sale del interior del círculo.
Finalmente, la figura contiene en la parte superior izquierda de la figura dos visualizaciones LaTeX.
Al hacer clic en estas dos visualizaciones (que tienen por tag AffRac2 y AffRac3)
vamos a cambiar la visualización LaTeX ligada al centro de la figura (que tiene por tag AffFor) que es el código LaTeX inicial \ frac 23.
Esto se hace a través de las siguientes líneas :
app.addEventListener('mtg32svg', '#AffRac2', 'mousedown', function (ev) {
app.setText('mtg32svg', '#AffFor', '\\sqrt{2}', true)
})
app.addEventListener('mtg32svg', '#AffRac3', 'mousedown', function (ev) {
app.setText('mtg32svg', '#AffFor', '\\sqrt{3}', true)
})La función setText del reproductor MathGraph32 toma como primer parámetro el id del svg de la figura, como segundo el carácter # seguido del tag de la visualización a modificar (visualización de texto o visualización LaTeX), como tercer parámetro el nuevo código LaTeX (o el nuevo texto en el caso de una visualización de texto).
El último parámetro es opcional y se establece en verdadero por defecto para solicitar una visualización inmediata de la figura.
flux RSS
