You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
386 lines
10 KiB
386 lines
10 KiB
|
|
// Convertir une coordonnée sur le graphique en position relative à l'affichage (ou à l'écran si ecran = true)
|
|
function coordToPosX(x, ecran){
|
|
if(ecran){
|
|
return coordToPosX(x, false)+affichage.offsetLeft;
|
|
}
|
|
else{
|
|
return (x - affichage.xGauche) * affichage.multX;
|
|
}
|
|
}
|
|
function coordToPosY(y, ecran){
|
|
if(ecran){
|
|
return coordToPosY(y, false)+affichage.offsetTop;
|
|
}
|
|
else{
|
|
return affichage.hauteur - (y - affichage.yBas) * affichage.multY;
|
|
}
|
|
}
|
|
|
|
var affichage = {
|
|
// Options
|
|
id : "affichage",
|
|
largeur : 640, // Set by init
|
|
hauteur : 430, // Set by init
|
|
couleurFond : "rgba(0,0,0,0)",
|
|
|
|
// Bornes (zone d'affichage)
|
|
xGauche : -5.5, // Set by init
|
|
xDroite : 5.5, // Set by init
|
|
yBas : -3.7,
|
|
yHaut : 3.7,
|
|
|
|
multX : 1,
|
|
multY : 1,
|
|
|
|
// Axes
|
|
axes : true,
|
|
couleurAxes : "rgba(0,0,0,0.5)",
|
|
widthAxes : 2,
|
|
// Grille
|
|
grille : true,
|
|
couleurGrille : "rgba(255,255,255,0.1)",
|
|
widthGrille : 2,
|
|
// Echelle
|
|
echelle : true,
|
|
couleurEchelle : "rgba(255,255,255,1)",
|
|
|
|
// Précision
|
|
precision : 100,
|
|
precisionAmelioree : true, // false = fonction plus jolie lorsqu'on dé-zoom, true = affichage plus rapide lors du dé-zoom.
|
|
|
|
// Méthode et style
|
|
methode : "canvas",
|
|
style : "continu",
|
|
|
|
// Variable définies lors de l'initialisation
|
|
canvas : null,
|
|
ctx : null,
|
|
object : null,
|
|
offsetTop : null, // Position de l'affichage par rapport à la page
|
|
offsetLeft : null,
|
|
|
|
init : function(element, width, height){
|
|
this.setBornes();
|
|
|
|
// Supprimer le contenu de l'affichage
|
|
if(!element){
|
|
element = document.getElementById(this.id);
|
|
}
|
|
if(element.hasChildNodes()){
|
|
while(element.childNodes.length >= 1 ){
|
|
element.removeChild(element.firstChild);
|
|
}
|
|
}
|
|
|
|
// Définir la taille
|
|
this.largeur = width || element.clientWidth;
|
|
this.hauteur = height || element.clientHeight;
|
|
|
|
// Set left and right proportionally to width, height, top and bottom
|
|
var centerX = this.xGauche + (this.xDroite - this.xGauche)/2;
|
|
var centerY = this.yBas + (this.yHaut - this.yBas)/2;
|
|
var dx = ((this.yHaut - this.yBas) / 2) * this.largeur / this.hauteur;
|
|
this.xGauche = Math.round((centerX - dx)*100)/100;
|
|
this.xDroite= Math.round((centerX + dx)*100)/100;
|
|
this.setBornes();
|
|
|
|
// Récupérer la position
|
|
var boundingClientRect = element.getBoundingClientRect();
|
|
this.offsetTop = boundingClientRect.top;
|
|
this.offsetLeft = boundingClientRect.left;
|
|
|
|
// Sélectionner la méthode d'affichage
|
|
if(this.methode == "svg"){
|
|
// this.object = document.createElement("embed");
|
|
// this.object.type = "image/svg+xml";
|
|
// this.object.src = "AffichageSVG.svg";
|
|
this.object = document.getElementById("embedSVG");
|
|
this.object.width = this.largeur;
|
|
this.object.height = this.hauteur;
|
|
this.object.style.top = this.offsetTop +1 +"px";
|
|
this.object.style.left = this.offsetLeft +1 +"px";
|
|
this.object.style.display = "block";
|
|
// element.appendChild(this.object);
|
|
|
|
// affichage.ctx = svg;
|
|
// affichage.dessiner();
|
|
// // Exécuter this.dessiner() maintenant ne va pas car svg n'est pas
|
|
// // encore défini dans cette fonction, il faut en lancer un nouvelle...
|
|
setTimeout("affichage.ctx = svg", 50);
|
|
setTimeout("affichage.dessiner()", 100);
|
|
}
|
|
else if(this.methode == "uniboard"){
|
|
if(window.uniboard || window.sankore){
|
|
try{
|
|
initUniboard();
|
|
this.ctx = uniboard;
|
|
this.dessiner();
|
|
}
|
|
catch(err){
|
|
alert(err.message);
|
|
}
|
|
}
|
|
else{
|
|
this.methode = "canvas";
|
|
this.setOptions();
|
|
this.init();
|
|
}
|
|
}
|
|
else{
|
|
document.getElementById("embedSVG").style.display = "none";
|
|
|
|
this.canvas = document.createElement("canvas");
|
|
this.canvas.width = this.largeur;
|
|
this.canvas.height = this.hauteur;
|
|
element.appendChild(this.canvas);
|
|
|
|
this.ctx = this.canvas.getContext("2d");
|
|
|
|
this.dessiner();
|
|
}
|
|
|
|
// Événements
|
|
if(window.addEventListener){
|
|
element = document.getElementById("eventAffichage");
|
|
element.addEventListener('DOMMouseScroll', souris.wheel, false);
|
|
element.onmousewheel = souris.wheel;
|
|
element.oncontextmenu = ctxMenu.ouvrir;
|
|
}
|
|
},
|
|
|
|
calculer : function(){
|
|
this.getBornes();
|
|
this.getOptions();
|
|
if(fonction3D){
|
|
display3D.draw()
|
|
}
|
|
else{
|
|
this.dessiner();
|
|
}
|
|
saveOptions();
|
|
},
|
|
|
|
dessiner : function(){
|
|
try{
|
|
// var ti = new Date().getTime();
|
|
var precision;
|
|
if(this.precisionAmelioree){
|
|
precision = 10/this.precision;
|
|
}
|
|
else{
|
|
precision = Math.abs(this.xDroite - this.xGauche)/this.precision;
|
|
}
|
|
this.multX = this.largeur/Math.abs(this.xDroite - this.xGauche);
|
|
this.multY = this.hauteur/Math.abs(this.yHaut - this.yBas);
|
|
|
|
var ctx = new Object();
|
|
ctx = this.ctx;
|
|
ctx.clearRect(0,0,this.largeur,this.hauteur);
|
|
|
|
ctx.fillStyle = this.couleurFond;
|
|
ctx.fillRect(0,0,this.largeur,this.hauteur);
|
|
|
|
ctx.strokeOpacity = 1; // svg
|
|
|
|
// Couleur pour l'aire sous la fonction
|
|
ctx.fillStyle = "rgba(0,180,255,0.3)";
|
|
|
|
// Fonctions
|
|
for(var i=0; i<fct.list.length; i++){
|
|
if(!fct.list[i]){
|
|
continue;
|
|
}
|
|
fct.list[i].plot(ctx, precision, affichage);
|
|
}
|
|
|
|
ctx.strokeOpacity = 0.2; // svg
|
|
|
|
// Grille et échelle
|
|
// var intervalX = Math.round(Math.abs(this.xGauche-this.xDroite)/10);
|
|
var interval = Math.round(Math.abs(this.yBas-this.yHaut)/10);
|
|
if(interval <= 0){
|
|
interval = 1;
|
|
}
|
|
// if(intervalY <= 0){
|
|
// intervalY = 1;
|
|
// }
|
|
var initialX = Math.floor(-this.xGauche) % interval;
|
|
var initialY = Math.floor(-this.yBas) % interval;
|
|
ctx.beginPath();
|
|
ctx.fillStyle = this.couleurEchelle;
|
|
ctx.strokeStyle = this.couleurEchelle;
|
|
ctx.lineWidth = this.widthGrille;
|
|
if(this.methode == "uniboard"){
|
|
ctx.lineWidth /= 2;
|
|
ctx.fillStyle = "rgb(0,0,0)";
|
|
ctx.strokeStyle = "rgb(100,100,100)";
|
|
}
|
|
for(var i=initialX; i<=Math.round(this.xDroite-this.xGauche); i=i+interval){
|
|
var position = Math.round((Math.ceil(this.xGauche) - this.xGauche +i) * this.multX);
|
|
if(this.grille){
|
|
ctx.moveTo(position, 0);
|
|
ctx.lineTo(position, this.hauteur);
|
|
}
|
|
|
|
if(this.echelle){
|
|
ctx.fillText(Math.ceil(i+this.xGauche), position-6, (this.hauteur-(-this.yBas*this.multY))-2);
|
|
}
|
|
}
|
|
for(var i=initialY;i<=Math.round(this.yHaut-this.yBas);i=i+interval){
|
|
var position = this.hauteur - Math.round((Math.ceil(this.yBas) - this.yBas +i) * this.multY);
|
|
if(this.grille){
|
|
ctx.moveTo(0, position);
|
|
ctx.lineTo(this.largeur, position);
|
|
}
|
|
|
|
if(this.echelle){
|
|
ctx.fillText(Math.ceil(i+this.yBas), (-this.xGauche*this.multX)+2, position+6);
|
|
}
|
|
}
|
|
ctx.strokeStyle = this.couleurGrille;
|
|
ctx.stroke();
|
|
|
|
ctx.strokeOpacity = 0.8; //svg
|
|
|
|
// Axes
|
|
if(this.axes){
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = this.couleurAxes;
|
|
ctx.lineWidth = this.widthAxes;
|
|
if(this.methode == "uniboard"){
|
|
ctx.lineWidth *= 2;
|
|
ctx.strokeStyle = "rgb(0,0,0)";
|
|
}
|
|
ctx.moveTo(-this.xGauche*this.multX, 0)
|
|
ctx.lineTo(-this.xGauche*this.multX, this.hauteur)
|
|
|
|
ctx.moveTo(0, this.hauteur+this.yBas*this.multY)
|
|
ctx.lineTo(this.largeur, this.hauteur+this.yBas*this.multY)
|
|
ctx.stroke()
|
|
}
|
|
|
|
// Autres
|
|
outil.dessinerListe();
|
|
// var tf = new Date().getTime();
|
|
// window.console.log(tf-ti);
|
|
}
|
|
catch(err){
|
|
var message = err.message;
|
|
afficherErreur(message);
|
|
}
|
|
},
|
|
|
|
getBornes : function(){
|
|
this.xGauche = parseFloat(document.getElementById("borneXGauche").value);
|
|
this.xDroite = parseFloat(document.getElementById("borneXDroite").value);
|
|
this.yBas = parseFloat(document.getElementById("borneYGauche").value);
|
|
this.yHaut = parseFloat(document.getElementById("borneYDroite").value);
|
|
},
|
|
|
|
setBornes : function(){
|
|
document.getElementById("borneXGauche").value = this.xGauche;
|
|
document.getElementById("borneXDroite").value = this.xDroite;
|
|
document.getElementById("borneYGauche").value = this.yBas;
|
|
document.getElementById("borneYDroite").value = this.yHaut;
|
|
},
|
|
|
|
getOptions : function(){
|
|
this.axes = document.getElementById("checkAxes").checked ? true : false;
|
|
this.grille = document.getElementById("checkGrille").checked ? true : false;
|
|
this.echelle = document.getElementById("checkEchelle").checked ? true : false;
|
|
this.precision = document.getElementById("inputPrecision").value;
|
|
this.precisionAmelioree = document.getElementById("checkPrecision").checked ? true : false;
|
|
var methode = document.getElementById("selectMethodeAffichage").value;
|
|
if(methode != this.methode){
|
|
this.methode = methode;
|
|
this.init();
|
|
}
|
|
},
|
|
|
|
setOptions : function(){
|
|
document.getElementById("selectMethodeAffichage").value = this.methode;
|
|
document.getElementById("checkGrille").checked = this.grille;
|
|
document.getElementById("checkAxes").checked = this.axes;
|
|
document.getElementById("checkEchelle").checked = this.echelle;
|
|
document.getElementById("inputPrecision").value = this.precision;
|
|
document.getElementById("checkPrecision").checked = this.precisionAmelioree;
|
|
},
|
|
|
|
deplacerX : function(x){
|
|
if(fonction3D){
|
|
display3D.move(x);
|
|
return;
|
|
}
|
|
this.xGauche += x;
|
|
this.xDroite += x;
|
|
this.dessiner();
|
|
this.setBornes();
|
|
saveOptions();
|
|
},
|
|
deplacerY : function(y){
|
|
if(fonction3D){
|
|
return;
|
|
}
|
|
this.yHaut += y;
|
|
this.yBas += y;
|
|
this.dessiner();
|
|
this.setBornes();
|
|
saveOptions();
|
|
},
|
|
centrer: function(){
|
|
var valeurX = (this.xDroite-this.xGauche)/2;
|
|
var valeurY = (this.yHaut-this.yBas)/2;
|
|
this.initZoom(valeurX, valeurY);
|
|
},
|
|
initZoom : function(valeurX, valeurY){
|
|
if(fonction3D){
|
|
display3D.initZoom();
|
|
}
|
|
this.xGauche = -valeurX;
|
|
this.xDroite = valeurX;
|
|
this.yBas = -valeurY;
|
|
this.yHaut = valeurY;
|
|
this.setBornes();
|
|
this.dessiner();
|
|
},
|
|
initZoom2 : function(valeur){
|
|
var valeurY = parseFloat(valeur);
|
|
var valeurX = valeurY * this.largeur / this.hauteur;
|
|
this.initZoom(valeurX, valeurY);
|
|
},
|
|
zoom : function(facteur){
|
|
if(fonction3D){
|
|
return;
|
|
}
|
|
var diffBornes, ajouter;
|
|
|
|
// Horizontal
|
|
diffBornes = Math.abs(this.xDroite - this.xGauche);
|
|
ajouter = Math.round(diffBornes * (facteur-1)*2)/4;
|
|
// log(diffBornes, ajouter, facteur)
|
|
if(ajouter == 0){
|
|
ajouter = 0.25;
|
|
// log("affichage.zoom -> x : ajouter = 0.5")
|
|
}
|
|
|
|
this.xGauche -= ajouter;
|
|
this.xDroite += ajouter;
|
|
|
|
// Vertical
|
|
diffBornes = Math.abs(this.yHaut - this.yBas);
|
|
ajouter = Math.round(diffBornes * (facteur-1)*2)/4;
|
|
if(ajouter == 0){
|
|
ajouter = 0.25;
|
|
// log("affichage.zoom -> y : ajouter = 0.5")
|
|
}
|
|
|
|
this.yBas -= ajouter;
|
|
this.yHaut += ajouter;
|
|
|
|
this.dessiner();
|
|
this.setBornes();
|
|
|
|
saveOptions();
|
|
}
|
|
};
|
|
|