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.
1078 lines
42 KiB
1078 lines
42 KiB
// Déclaration des zones de dessin
|
|
var aperçu = document.getElementById('aperçu'), // Fenêtre Aperçu dans l'onglet
|
|
feuille = document.getElementById('feuille'), //Feuille qui sera envoyée comme fond de page à Sankoré
|
|
largeur_16_9='1820px', // Dimension de la page en 16/9
|
|
hauteur_16_9='1024px',
|
|
largeur_4_3='1280px', // Dimension de la page en 4/3
|
|
hauteur_4_3='960px';
|
|
// Déclaration des couleurs par défaut
|
|
var couleur_fond_uni='#ccc', // Couleur du fond uni
|
|
couleur_marge_seyes='red',//Couleur de la marge Seyes
|
|
couleur_marge_maternelle='red',//Couleur de la marge Maternelle
|
|
couleur_marge_guide_ane='red',//Couleur de la marge guide_ane
|
|
couleur_seyes_ligne_horizontale='#8E7CC3', //Violet
|
|
couleur_seyes_ligne_verticale='#8E7CC3', //Violet
|
|
couleur_seyes_interligne='#6FA8DC', //bleu pâle
|
|
couleur_fond_seyes='white', // Couleur du fond Seyes
|
|
couleur_maternelle_ligne_horizontale='#8E7CC3', //Ligne principale Violet
|
|
couleur_maternelle_interligne='#6FA8DC', //Interligne bleu pâle
|
|
couleur_fond_maternelle='white', //Couleur de fond Maternelle
|
|
couleur_ligne_guide_ane='rgb(207,226,243)', //Ligne principale Bleu clair
|
|
couleur_fond_guide_ane='white',//Couleur fond guide ane
|
|
couleur_dys_1='blue', // 1ere ligne Dys
|
|
couleur_dys_2='green', // 2e ligne Dys
|
|
couleur_dys_3='brown', //3e ligne Dys
|
|
couleur_dys_4='red', //4e ligne Dys
|
|
couleur_fond_dys='white', // Couleur de Fond Dys
|
|
couleur_quadrillage='#4a86e8',// Couleur des Lignes du quadrillage Bleu clair
|
|
couleur_fond_quadrillage='white',//Couleur du fond du quadrillage
|
|
couleur_mm_ligne='black', // Lignes principales papier mm Noir
|
|
couleur_mm_2='#888888', // Lignes intermédiaires papier mm Gris
|
|
couleur_fond_mm='white',// Couleur du fond papier mm
|
|
couleur_pointé='#888888',// Couleur des points Gris
|
|
couleur_fond_pointé='white';//Couleur de fond du papier pointé
|
|
// Épaisseurs de traits par défaut
|
|
var epaisseur_seyes=2,
|
|
epaisseur_maternelle=2,
|
|
epaisseur_guide_ane=2,
|
|
epaisseur_dys=2,
|
|
epaisseur_quadrillage=4,
|
|
epaisseur_mm=3,
|
|
epaisseur_pointé=5;
|
|
var position_marge_seyes=5, // Marge de 5 carreaux sur feuille Seyes finale
|
|
position_marge_maternelle=5, // Marge de 5 carreaux sur feuille Maternelle finale
|
|
position_marge_guide_ane=5; // Marge de 5 carreaux sur feuille Guide Âne finale
|
|
|
|
var interligne;// Espacement entre les lignes
|
|
|
|
// Palette de couleurs pour les fonds (avec couleur transparente)
|
|
var palette1=[
|
|
['rgba(0,0,0,0)',"#000","#444","#666","#888","#ccc","#eee","#fff"],
|
|
["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
|
|
["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
|
|
["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
|
|
["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
|
|
["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
|
|
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
|
|
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
|
|
],
|
|
// Palette de couleurs pour les lignes (sans couleur transparente)
|
|
palette2=[
|
|
["#000","#444","#666","#888","#ccc","#eee","#f3f3f3","#fff"],
|
|
["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
|
|
["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
|
|
["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
|
|
["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
|
|
["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
|
|
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
|
|
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
|
|
];
|
|
|
|
function initialisation(){
|
|
$("#feuille").hide(); // On masque la feuille de papier, elle sera transférée dans Open-Sankoré
|
|
$("#aperçu").show(); // On affiche la fenêtre qui sert d'aperçu
|
|
|
|
$("#marge_seyes").prop("checked", false); // Marge et réglage de la marge désactivé par défaut sur papier Seyes
|
|
$("#curseur_position_marge_seyes").hide();
|
|
$("#marge_maternelle").prop("checked", false); // Marge et réglage de la marge désactivé par défaut sur papier Maternelle
|
|
$("#curseur_position_marge_maternelle").hide();
|
|
$("#marge_guide_ane").prop("checked", false); // Marge et réglage de la marge désactivées par défaut sur papier Guide Âne
|
|
$("#curseur_position_marge_guide_ane").hide();
|
|
|
|
//##### Sélection du 1er onglet #####
|
|
document.getElementById('uni').style.display = "block";//On affiche l'onglet sélectionné
|
|
document.getElementsByClassName("lien_onglet")[0].className += " active"; // On active le lien
|
|
dessiner('uni','aperçu'); // Actualisation de l'aperçu
|
|
|
|
//##############################
|
|
//##### Définition des palettes #####
|
|
//##### #####
|
|
//##### Comportement #####
|
|
//##### Paramétrage #####
|
|
//##############################
|
|
//##### UNI #####
|
|
$("#palette_fond_uni").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_fond_uni,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_fond_uni=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('uni','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### SEYES #####
|
|
$("#palette_seyes_1").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_seyes_ligne_horizontale,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_seyes_ligne_horizontale=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_seyes_2").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_seyes_ligne_verticale,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_seyes_ligne_verticale=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_seyes_3").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_seyes_interligne,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_seyes_interligne=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_seyes").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
|
|
color: couleur_fond_seyes,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_seyes=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### MATERNELLE #####
|
|
$("#palette_maternelle_1").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_maternelle_ligne_horizontale,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_maternelle_ligne_horizontale=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_maternelle_2").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_maternelle_interligne,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_maternelle_interligne=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_maternelle").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
|
|
color: couleur_fond_maternelle,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_maternelle=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### GUIDE ANE #####
|
|
$("#palette_ligne_guide_ane").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_ligne_guide_ane,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_ligne_guide_ane=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_guide_ane").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_fond_guide_ane,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_guide_ane=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### DYS #####
|
|
$("#palette_dys_1").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_dys_1,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_dys_1=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_dys_2").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_dys_2,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_dys_2=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_dys_3").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_dys_3,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_dys_3=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_dys_4").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_dys_4,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_dys_4=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_dys").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
|
|
color: couleur_fond_dys,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_dys=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### QUADRILLAGE #####
|
|
$("#palette_quadrillage").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_quadrillage,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_quadrillage=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_quadrillage").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_fond_quadrillage,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_quadrillage=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### MILLIMÉTRÉ #####
|
|
$("#palette_mm_ligne").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_mm_ligne,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_mm_ligne=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('mm','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_mm_interligne").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_mm_2,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_mm_2=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('mm','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_mm").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
|
|
color: couleur_fond_mm,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_mm=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('mm','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### POINTÉ #####
|
|
$("#palette_pointé").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_pointé,
|
|
palette: palette2,
|
|
change: function(c) {
|
|
couleur_pointé=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('pointé','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$("#palette_fond_pointé").spectrum({
|
|
showPaletteOnly: true,
|
|
hideAfterPaletteSelect:true,
|
|
color: couleur_fond_pointé,
|
|
palette: palette1,
|
|
change: function(c) {
|
|
couleur_fond_pointé=c.toRgbString();// Renvoie le code Rgba de la couleur sélectionnée
|
|
dessiner('pointé','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
// ##########################
|
|
//##### GESTION DES MARGES #####
|
|
// ##########################
|
|
//##### SEYES #####
|
|
// Modification de la case à cocher Affichage de la marge
|
|
$('#marge_seyes').on('change', function () {
|
|
$("#curseur_position_marge_seyes").toggle(); // Bascule de l'affichage du curseur de réglage de la marge
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
});
|
|
// Modification de la position de la marge
|
|
$( function() {$( "#curseur_position_marge_seyes" ).slider({
|
|
value:5,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_marge_seyes" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$( "#taille_marge_seyes" ).val( $( "#curseur_position_marge_seyes" ).slider( "value" )); // Affichage de la valeur initiale
|
|
});
|
|
//##### MATERNELLE #####
|
|
// Modification de la case à cocher Affichage de la marge en Maternelle
|
|
$('#marge_maternelle').on('change', function () {
|
|
$("#curseur_position_marge_maternelle").toggle(); // Bascule de l'affichage du curseur de réglage de la marge
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
});
|
|
// Modification de la position de la marge en Maternelle
|
|
$( function() {$( "#curseur_position_marge_maternelle" ).slider({
|
|
value:1,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_marge_maternelle" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$( "#taille_marge_maternelle" ).val( $( "#curseur_position_marge_maternelle" ).slider( "value" )); // Affichage de la valeur initiale
|
|
});
|
|
//##### GUIDE_ANE #####
|
|
// Modification de la case à cocher Affichage de la marge en Guide Âne
|
|
$('#marge_guide_ane').on('change', function () {
|
|
$("#curseur_position_marge_guide_ane").toggle(); // Bascule de l'affichage du curseur de réglage de la marge
|
|
dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu
|
|
});
|
|
// Modification de la position de la marge Guide Âne
|
|
$( function() {$( "#curseur_position_marge_guide_ane" ).slider({
|
|
value:4,
|
|
min: 1,
|
|
max: 20,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_marge_guide_ane" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
$( "#taille_marge_guide_ane" ).val( $( "#curseur_position_marge_guide_ane" ).slider( "value" )); // Affichage de la valeur initiale
|
|
});
|
|
|
|
|
|
}
|
|
//#############################################################
|
|
//##### Définitions des curseurs de réglage des dimensions des HAUTEURS DE LIGNES #####
|
|
//############################################################
|
|
$( function() {
|
|
//##### CREATION DES CURSEURS #####
|
|
//##### SEYES #####
|
|
$( "#curseur_seyes" ).slider({
|
|
value:15,
|
|
min: 10,
|
|
max: 60,
|
|
step: 5,
|
|
slide: function( event, ui ) {
|
|
$( "#taille_carreau_seyes" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change: function( event, ui ) {
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### MATERNELLE #####
|
|
$( "#curseur_maternelle" ).slider({
|
|
value:20,
|
|
min: 10,
|
|
max: 50,
|
|
step: 10,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_carreau_maternelle" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### GUIDE ÂNE #####
|
|
$( "#curseur_guide_ane" ).slider({
|
|
value:50,
|
|
min: 10,
|
|
max: 200,
|
|
step: 10,
|
|
slide:function( event, ui ) {
|
|
$( "#interligne_guide_ane" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### DYS #####
|
|
$( "#curseur_dys" ).slider({
|
|
value:30,
|
|
min: 10,
|
|
max: 60,
|
|
step: 5,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_carreau_dys" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### QUADRILLAGE #####
|
|
$( "#curseur_quadrillage" ).slider({
|
|
value:30,
|
|
min: 10,
|
|
max: 200,
|
|
step: 10,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_carreau_quadrillage" ).val( ui.value +"x"+ui.value); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### MILLIMÉTRÉ #####
|
|
$( "#curseur_mm" ).slider({
|
|
value:10,
|
|
min: 5,
|
|
max: 30,
|
|
step: 5,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_carreau_mm" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('mm','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### POINTÉ #####
|
|
$( "#curseur_pointé" ).slider({
|
|
value:30,
|
|
min: 10,
|
|
max: 150,
|
|
step: 10,
|
|
slide:function( event, ui ) {
|
|
$( "#taille_pointé" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('pointé','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
|
|
//##### INITIALISATION DES CURSEURS #####
|
|
$( "#taille_carreau_maternelle" ).val( $( "#curseur_maternelle" ).slider( "value" )); // Affichage de la valeur initiale
|
|
$( "#taille_carreau_seyes" ).val( $( "#curseur_seyes" ).slider( "value" )); // Affichage de la valeur initiale
|
|
$( "#interligne_guide_ane" ).val( $( "#curseur_guide_ane" ).slider( "value" )); // Affichage de la valeur initiale
|
|
$( "#taille_carreau_dys" ).val( $( "#curseur_dys" ).slider( "value" )); // Affichage de la valeur initiale
|
|
$( "#taille_carreau_quadrillage" ).val( $( "#curseur_quadrillage" ).slider( "value" )+"x"+$( "#curseur_quadrillage" ).slider( "value" ) ); // Affichage de la valeur initiale
|
|
$( "#taille_carreau_mm" ).val( $( "#curseur_mm" ).slider( "value" )); // Affichage de la valeur initiale
|
|
$( "#taille_pointé" ).val( $( "#curseur_pointé" ).slider( "value" )); // Affichage de la valeur initiale
|
|
});
|
|
|
|
// ##############################
|
|
//##### GESTION DU PAPIER POINTÉ #####
|
|
// ##############################
|
|
$( function() {
|
|
// Changement du type de point pour le papier pointé maillage carré
|
|
$('input[type=radio][name=type_point_page_pointé]').change(function() {
|
|
dessiner('pointé','aperçu'); // Actualisation de l'aperçu
|
|
});
|
|
// Changement du type de papier pointé maillage (carré/iso)
|
|
$('input[type=radio][name=type_papier_pointé]').change(function() {
|
|
dessiner('pointé','aperçu'); // Actualisation de l'aperçu
|
|
});
|
|
});
|
|
|
|
//###########################
|
|
//##### ÉPAISSEURS DE TRAITS #####
|
|
//##########################
|
|
$( function() {
|
|
//##### CREATION DES CURSEURS #####
|
|
//##### SEYES #####
|
|
$( "#curseur_épaisseur_seyes" ).slider({
|
|
value:epaisseur_seyes,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#épaisseur_seyes" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('seyes','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### MATERNELLE #####
|
|
$( "#curseur_épaisseur_maternelle" ).slider({
|
|
value:epaisseur_maternelle,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#épaisseur_maternelle" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('maternelle','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### GUIDE ÂNE #####
|
|
$( "#curseur_épaisseur_guide_ane" ).slider({
|
|
value:epaisseur_guide_ane,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#épaisseur_guide_ane" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('guide_ane','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### DYS #####
|
|
$( "#curseur_épaisseur_dys" ).slider({
|
|
value:epaisseur_dys,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
change:function( event, ui ) {
|
|
$( "#épaisseur_dys" ).val( ui.value );
|
|
dessiner('dys','aperçu'); // Actualisation de l'aperçu
|
|
|
|
}
|
|
});
|
|
//##### QUADRILLAGE #####
|
|
$( "#curseur_épaisseur_quadrillage" ).slider({
|
|
value:epaisseur_quadrillage,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#épaisseur_quadrillage" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('quadrillage','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### MILLIMÉTRÉ #####
|
|
$( "#curseur_épaisseur_mm" ).slider({
|
|
value:epaisseur_mm,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#épaisseur_mm" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
|
|
change:function( event, ui ) {
|
|
dessiner('mm','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### POINTÉ #####
|
|
$( "#curseur_épaisseur_pointé" ).slider({
|
|
value:epaisseur_pointé,
|
|
min: 1,
|
|
max: 10,
|
|
step: 1,
|
|
slide:function( event, ui ) {
|
|
$( "#épaisseur_pointé" ).val( ui.value ); // Actualisation de la valeur affichée
|
|
},
|
|
change:function( event, ui ) {
|
|
dessiner('pointé','aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
});
|
|
//##### INITIALISATION DES CURSEURS #####
|
|
$( "#épaisseur_seyes" ).val( $( "#curseur_épaisseur_seyes" ).slider( "value" ));
|
|
$( "#épaisseur_maternelle" ).val( $( "#curseur_épaisseur_maternelle" ).slider( "value" ));
|
|
$( "#épaisseur_guide_ane" ).val( $( "#curseur_épaisseur_guide_ane" ).slider( "value" ));
|
|
$( "#épaisseur_dys" ).val( $( "#curseur_épaisseur_dys" ).slider( "value" ));
|
|
$( "#épaisseur_quadrillage" ).val( $( "#curseur_épaisseur_quadrillage" ).slider( "value" ));
|
|
$( "#épaisseur_mm" ).val( $( "#curseur_épaisseur_mm" ).slider( "value" ));
|
|
$( "#épaisseur_pointé" ).val( $( "#curseur_épaisseur_pointé" ).slider( "value" ));
|
|
$( "#épaisseur_pointé" ).val( $( "#curseur_épaisseur_pointé" ).slider( "value" ));
|
|
});
|
|
|
|
|
|
|
|
//############################
|
|
//##### CRÉATION DES ONGLETS #####
|
|
//###########################
|
|
function onglet(evt, nom_onglet) {
|
|
var i, contenu_onglet, lien_onglet;
|
|
|
|
contenu_onglet = document.getElementsByClassName("contenu_onglet");//On masque le contenu de tous les onglets
|
|
for (i = 0; i < contenu_onglet.length; i++) {
|
|
contenu_onglet[i].style.display = "none";
|
|
}
|
|
lien_onglet = document.getElementsByClassName("lien_onglet");// On désactive les lien
|
|
for (i = 0; i < lien_onglet.length; i++) {
|
|
lien_onglet[i].className = lien_onglet[i].className.replace(" active", "");
|
|
}
|
|
document.getElementById(nom_onglet).style.display = "block";//On affiche l'onglet sélectionné
|
|
evt.currentTarget.className += " active"; // On active le lien
|
|
if (nom_onglet=='aide') {
|
|
$("#aperçu").hide(); // On masque la fenêtre qui sert d'aperçu
|
|
}else{
|
|
$("#aperçu").show(); // On affiche la fenêtre qui sert d'aperçu
|
|
dessiner(nom_onglet,'aperçu'); // Actualisation de l'aperçu
|
|
}
|
|
}
|
|
|
|
//#######################
|
|
//##### TRACÉ DU PAPIER #####
|
|
//#######################
|
|
|
|
//##### Comportement du bouton de commande Aperçu/Générer #####
|
|
$(document).on('click', '.bouton_commande', function (e) {
|
|
e.preventDefault();
|
|
// On récupèration le type de papier sélectionné
|
|
var type_papier=$(this).parents('.contenu_onglet').attr('id');
|
|
|
|
dessiner(type_papier,'feuille');
|
|
var canvas = document.getElementById('feuille');
|
|
var adresse=canvas.toDataURL('image/png',0.1); // Compression forte (0.1) car sans compression (1), image générée trop lourde à charger sous windows
|
|
// Décallage pour voir toutes les étiquettes
|
|
sankore.addObject(adresse,'100%','100%',0,0,true);
|
|
//~ Description Ajoute l'objet à la scène
|
|
//~ Paramètres
|
|
//~ [QString] pUrl: the object URL.
|
|
//~ [int] width: la largeur.
|
|
//~ [int] height: la hauteur.
|
|
//~ [int] x: the x coordinate.
|
|
//~ [int] y: the y coordinate.
|
|
//~ [bool] background: if this flag is true, the object is set as background.
|
|
|
|
|
|
|
|
})
|
|
|
|
//##### Tracer du papier sur une zone (aperçu ou feuille)
|
|
function dessiner(type_papier,zone){
|
|
// Utilisation du booléen 'tabelau' afin d'adapter l'interligne en fonction de l'aperçu ou du tableau
|
|
var tableau=true; // Dessin du papier sur le tableau
|
|
switch (zone){
|
|
case 'aperçu':
|
|
var ctx =document.getElementById("aperçu").getContext('2d'),
|
|
hauteur=$('#aperçu').height();
|
|
largeur=$('#aperçu').width();
|
|
tableau=false; // Dessin dans la fenêtre d'aperçu
|
|
break;
|
|
case 'feuille':
|
|
//~ Détection du format de page 16/9 ou 4/3
|
|
var origine="taille_page_"+type_papier;
|
|
|
|
if ($('input[type=radio][name=taille_page_'+type_papier+']:checked').val()=='16/9') {
|
|
|
|
$('#feuille').attr({width: largeur_16_9,height:hauteur_16_9});
|
|
}else{
|
|
|
|
$('#feuille').attr({width: largeur_4_3,height:hauteur_4_3});
|
|
}
|
|
var ctx =document.getElementById("feuille").getContext('2d'),
|
|
hauteur=$('#feuille').height();
|
|
largeur=$('#feuille').width();
|
|
break;
|
|
|
|
}
|
|
var epaisseur; // Épaisseur du tracé
|
|
var i=0,j=0,i2=0,j2=0,n=0;
|
|
ctx.clearRect(0, 0, largeur, hauteur); // On efface le fond
|
|
switch (type_papier){ //Détection du papier choisi
|
|
case "uni":
|
|
ctx.fillStyle =couleur_fond_uni;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
break;
|
|
|
|
case "seyes": // Seyes;
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_seyes;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Épaisseur
|
|
epaisseur=$( "#curseur_épaisseur_seyes" ).slider("value");// Épaisseur définie par le curseur
|
|
// Interlignes
|
|
interligne=$( "#curseur_seyes" ).slider("value"), taille_carreau=interligne*4;//N° de ligne
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur/2; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_seyes_interligne;
|
|
var n=0;
|
|
for (i = interligne; i < hauteur+1; i += interligne) {// i=0 est une ligne donc on commence à i=interligne (on en saute 1)
|
|
if (n % 4!== 0) { ctx.moveTo(0, i); ctx.lineTo(largeur, i); }// Tous les 4 interlignes, on saute une ligne (3 interlignes par carreaux
|
|
n+=1;//Ligne suivante
|
|
}
|
|
ctx.stroke();
|
|
// Lignes Verticales
|
|
var position_marge=0; // Aucune marge par défaut
|
|
if ($('#marge_seyes').is(':checked')){// Si la case Marge est cochée
|
|
position_marge_seyes=$( "#curseur_position_marge_seyes" ).slider("value");// Position de la marge définie par le curseur
|
|
if (zone=='aperçu') {position_marge=taille_carreau} else {position_marge=position_marge_seyes*taille_carreau} // marge à 1 carreau sur l'aperçu et à 5 carreaux sur la feuille
|
|
}
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.strokeStyle=couleur_seyes_ligne_verticale;
|
|
for (i = position_marge+taille_carreau; i < largeur+1; i += taille_carreau) {// On commence à tracer les lignes verticales 1 carreau après la marge
|
|
ctx.moveTo(i, 0);
|
|
ctx.lineTo(i, hauteur);
|
|
}
|
|
ctx.stroke();
|
|
// Lignes Horizontales
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_seyes_ligne_horizontale;
|
|
for (i = interligne; i < largeur+1; i += taille_carreau) {
|
|
ctx.moveTo(0, i);
|
|
ctx.lineTo(largeur, i);
|
|
}
|
|
ctx.stroke();
|
|
// Affichage de la marge si nécessaire
|
|
if ($('#marge_seyes').is(':checked')){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur de la marge
|
|
ctx.strokeStyle=couleur_marge_seyes;
|
|
ctx.moveTo(position_marge, 0);
|
|
ctx.lineTo(position_marge, hauteur);
|
|
ctx.stroke();
|
|
}
|
|
break;
|
|
case "maternelle": // maternelle;
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_maternelle;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On remplit le fond avec la couleur choisie
|
|
// Épaisseur
|
|
epaisseur=$( "#curseur_épaisseur_maternelle" ).slider("value");// Épaisseur définie par le curseur
|
|
// Interlignes
|
|
if (tableau) {
|
|
interligne=$( "#curseur_maternelle" ).slider("value")*2}//Hauteur de ligne sur la page
|
|
else{
|
|
interligne=$( "#curseur_maternelle" ).slider("value")*0.5}//Hauteur de ligne dans l'aperçu
|
|
|
|
taille_carreau=interligne*3;//Hauteur de ligne
|
|
// Lignes Horizontales principales
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_maternelle_ligne_horizontale;
|
|
|
|
for (i = interligne; i < largeur+1; i += taille_carreau) {
|
|
ctx.moveTo(0, i);
|
|
ctx.lineTo(largeur, i);
|
|
}
|
|
ctx.stroke();
|
|
// Lignes Horizontales secondaires
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur/2; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_maternelle_interligne;
|
|
for (i = 0; i < largeur+1; i += taille_carreau) {
|
|
ctx.moveTo(0, i);
|
|
ctx.lineTo(largeur, i);
|
|
}
|
|
ctx.stroke();
|
|
// Marge ?
|
|
var position_marge=0; // Aucune marge par défaut
|
|
if ($('#marge_maternelle').is(':checked')){// Si la case Marge est cochée
|
|
position_marge_maternelle=$( "#curseur_position_marge_maternelle" ).slider("value");// Position de la marge définie par le curseur
|
|
if (zone=='aperçu') {position_marge=position_marge_maternelle*taille_carreau/2} else {position_marge=position_marge_maternelle*taille_carreau} // marge à une distance différente sur l'aperçu et sur le tableau (mise à l'échelle)
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur de la marge
|
|
ctx.strokeStyle=couleur_marge_maternelle;
|
|
ctx.moveTo(position_marge, 0);
|
|
ctx.lineTo(position_marge, hauteur);
|
|
ctx.stroke();
|
|
}
|
|
break;
|
|
case 'guide_ane':
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_guide_ane;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Épaisseur
|
|
epaisseur=$( "#curseur_épaisseur_guide_ane" ).slider("value");// Épaisseur définie par le curseur
|
|
// Interlignes
|
|
interligne=$( "#curseur_guide_ane" ).slider("value");//N° de ligne
|
|
// Lignes Horizontales
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_ligne_guide_ane;
|
|
for (i = interligne; i < largeur+1; i += interligne) {
|
|
ctx.moveTo(0, i);
|
|
ctx.lineTo(largeur, i);
|
|
}
|
|
ctx.stroke();
|
|
// Affichage de la marge si nécessaire
|
|
var position_marge=0; // Aucune marge par défaut
|
|
if ($('#marge_guide_ane').is(':checked')){// Si la case Marge est cochée
|
|
position_marge_guide_ane=$( "#curseur_position_marge_guide_ane" ).slider("value");// Position de la marge définie par le curseur
|
|
if (zone=='aperçu') {position_marge=interligne*4} else {position_marge=interligne*position_marge_guide_ane} // marge plus petite sur l'aperçu ou plus grande sur la feuille
|
|
}
|
|
if ($('#marge_guide_ane').is(':checked')){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur de la marge
|
|
ctx.strokeStyle=couleur_marge_guide_ane;
|
|
ctx.moveTo(position_marge, 0);
|
|
ctx.lineTo(position_marge, hauteur);
|
|
ctx.stroke();
|
|
}
|
|
break;
|
|
|
|
case "dys": // Dyspraxie;
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_dys;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Épaisseur
|
|
epaisseur=$( "#curseur_épaisseur_dys" ).slider("value");// Épaisseur définie par le curseur
|
|
// Interlignes
|
|
interligne=$( "#curseur_dys" ).slider("value");
|
|
taille_carreau_dys=interligne*5;//Espace entre 2 lignages
|
|
// Lignes Horizontales
|
|
for (j= epaisseur; j< hauteur+1; j+=taille_carreau_dys) {// La première ligne est entière, on commence à epaisseur
|
|
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_dys_1;
|
|
ctx.moveTo(i, j);
|
|
ctx.lineTo(largeur, j);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
j+=interligne*2;
|
|
ctx.strokeStyle = couleur_dys_2;
|
|
ctx.moveTo(i, j);
|
|
ctx.lineTo(largeur,j);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
j+=interligne;
|
|
ctx.strokeStyle = couleur_dys_3;
|
|
ctx.moveTo(0, j);
|
|
ctx.lineTo(largeur, j);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
j+=interligne*2;
|
|
ctx.strokeStyle = couleur_dys_4;
|
|
ctx.moveTo(0,j);
|
|
ctx.lineTo(largeur, j);
|
|
|
|
ctx.stroke();
|
|
}
|
|
break;
|
|
|
|
case "quadrillage" : // Petits Carreaux type 10x10
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_quadrillage;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Épaisseur
|
|
epaisseur=$( "#curseur_épaisseur_quadrillage" ).slider("value");// Épaisseur définie par le curseur
|
|
// Lignes
|
|
interligne=$( "#curseur_quadrillage" ).slider("value"); // Taille du quadrillage, 30 par défaut
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = couleur_quadrillage;
|
|
// Démarrage des boucle à "epaisseur" pour que les lignes périphériques apparaissent en entier.
|
|
for(i=epaisseur;i<largeur+1;i += interligne) { // Lignes verticales
|
|
ctx.moveTo(i, epaisseur/2);ctx.lineTo(i, hauteur);// epaisseur/2 pour que l'angle en haut à gauche soit complet
|
|
}
|
|
// Démarrage des boucle à "epaisseur" pour que les lignes périphériques apparaissent en entier.
|
|
for (j=epaisseur;j<hauteur+1;j+=interligne) { // Lignes horizontales
|
|
ctx.moveTo(epaisseur/2, j);ctx.lineTo(largeur, j);// epaisseur/2 pour que l'angle en haut à gauche soit complet
|
|
}
|
|
ctx.stroke(); // Affichage du tracé
|
|
break;
|
|
|
|
case "mm" : // Papier Millimétré
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_mm;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Épaisseur
|
|
epaisseur=$( "#curseur_épaisseur_mm" ).slider("value");// Épaisseur définie par le curseur
|
|
// Interlignes
|
|
interligne=$( "#curseur_mm" ).slider("value"); // Taille du quadrillage, 30 par défaut
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur/2; // épaisseur des lignes tracées
|
|
ctx.strokeStyle = couleur_mm_2;
|
|
// Horizontales
|
|
for (i = epaisseur; i < hauteur+1; i += interligne) {
|
|
if (n%10!== 0) { ctx.moveTo(epaisseur, i); ctx.lineTo(largeur, i); }
|
|
n+=1;
|
|
}
|
|
// Verticales
|
|
n=0;
|
|
for (j = epaisseur; j < largeur+1; j += interligne) {
|
|
if (n%10!== 0) { ctx.moveTo(j,epaisseur); ctx.lineTo(j,hauteur); }
|
|
n+=1;
|
|
}
|
|
ctx.stroke(); // Tracer des lignes
|
|
|
|
// Lignes principales
|
|
ctx.beginPath();
|
|
ctx.lineWidth = epaisseur; // épaisseur des lignes tracées
|
|
ctx.strokeStyle=couleur_mm_ligne;
|
|
// Verticales
|
|
// Démarrage des boucle à "epaisseur" pour que les lignes périphériques apparaissent en entier.
|
|
for (i = epaisseur; i < largeur+1; i += 10*interligne) {
|
|
ctx.moveTo(i, epaisseur/2);// epaisseur/2 pour que l'angle en haut à gauche soit complet
|
|
ctx.lineTo(i, hauteur);
|
|
}
|
|
// Horizontales
|
|
// Démarrage des boucle à "epaisseur" pour que les lignes périphériques apparaissent en entier.
|
|
for (i = epaisseur; i < largeur+1; i += 10*interligne) {
|
|
ctx.moveTo(epaisseur/2, i); // epaisseur/2 pour que l'angle en haut à gauche soit complet
|
|
ctx.lineTo(largeur, i);
|
|
}
|
|
ctx.stroke();
|
|
break;
|
|
|
|
case "pointé":
|
|
switch ($('input[type=radio][name=type_papier_pointé]:checked').val()){//détection du type de papier pointé carré ou iso
|
|
case "pointé_carré" : // Papier Pointé (maillage carré)
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_pointé;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Points
|
|
epaisseur_pointé=$( "#curseur_épaisseur_pointé").slider("value"); // Épaisseur du trait, 5 par défaut
|
|
maillage=$( "#curseur_pointé" ).slider("value"); // Maillage du réseau carré, 30 par défaut
|
|
ctx.beginPath(); // Début du tracé
|
|
switch ($('input[type=radio][name=type_point_page_pointé]:checked').val()) {
|
|
case 'plus':
|
|
ctx.strokeStyle = couleur_pointé;
|
|
ctx.lineWidth = epaisseur_pointé/2; // épaisseur de la ligne du +
|
|
// Démarrage des boucle à "epaisseur_pointé" pour que les + en bordure apparaissent en entier.
|
|
for (j=epaisseur_pointé;j<hauteur;j+=maillage) { // Boucle sur la hauteur
|
|
for (i=epaisseur_pointé;i <largeur;i+=maillage) {// Boucle sur la largeur
|
|
ctx.moveTo(i-epaisseur_pointé,j); // Dessin du +
|
|
ctx.lineTo(i+epaisseur_pointé,j);
|
|
ctx.moveTo(i,j-epaisseur_pointé);
|
|
ctx.lineTo(i,j+epaisseur_pointé);
|
|
}
|
|
}
|
|
ctx.stroke(); // Affichage du tracé
|
|
break;
|
|
case 'croix':
|
|
ctx.strokeStyle = couleur_pointé;
|
|
ctx.lineWidth = epaisseur_pointé/2;// épaisseur de la ligne du x
|
|
// Démarrage des boucle à "epaisseur_pointé" pour que les croix en bordure apparaissent en entier.
|
|
for (j=epaisseur_pointé;j<hauteur;j+=maillage) { // Boucle sur la hauteur
|
|
for (i=epaisseur_pointé;i <largeur;i+=maillage) {// Boucle sur la largeur
|
|
ctx.moveTo(i-epaisseur_pointé,j-epaisseur_pointé); // Dessin de la croix
|
|
ctx.lineTo(i+epaisseur_pointé,j+epaisseur_pointé);
|
|
ctx.moveTo(i-epaisseur_pointé,j+epaisseur_pointé);
|
|
ctx.lineTo(i+epaisseur_pointé,j-epaisseur_pointé);
|
|
}
|
|
}
|
|
ctx.stroke(); // Affichage du tracé
|
|
break;
|
|
default : // Par défaut, un point
|
|
ctx.fillStyle = couleur_pointé;
|
|
// Démarrage des boucle à "epaisseur_pointé" pour que les points en bordure apparaissent en entier.
|
|
for (j=epaisseur_pointé;j<hauteur;j+=maillage) { // Boucle sur la hauteur
|
|
for (i=epaisseur_pointé;i <largeur;i+=maillage) {// Boucle sur la largeur
|
|
ctx.moveTo(i,j);
|
|
ctx.arc(i, j, epaisseur_pointé, 0, 2 * Math.PI);
|
|
}
|
|
}
|
|
ctx.fill(); // Affichage du tracé
|
|
break;
|
|
}
|
|
break;
|
|
|
|
case "pointé_iso" : // Papier Pointé Isométrique (maillage triangulaire)
|
|
// Couleur de fond du papier
|
|
ctx.fillStyle =couleur_fond_pointé;//Couleur du fond sélectionné dans la palette
|
|
ctx.fillRect(0, 0, largeur, hauteur); // On rempli le fond avec la couleur choisie
|
|
// Points
|
|
epaisseur_pointé=$( "#curseur_épaisseur_pointé").slider("value"); // Épaisseur du trait, 5 par défaut
|
|
maillage=$( "#curseur_pointé" ).slider("value"); // Maillage du réseau carré, 30 par défaut
|
|
var delta=maillage*Math.sqrt(3)/2; // Delta correspond à l'espace entre 2 lignes du fait de l'isométrie des points
|
|
ctx.beginPath(); // Début du tracé
|
|
switch ($('input[type=radio][name=type_point_page_pointé]:checked').val()) {
|
|
case 'plus':
|
|
ctx.strokeStyle = couleur_pointé;
|
|
ctx.lineWidth = epaisseur_pointé/2; // épaisseur de la ligne du +
|
|
i2=0;j2=0;// Départ en haut à gauche
|
|
// Démarrage des boucle à "epaisseur_pointé" pour que les + en bordure apparaissent en entier.
|
|
for(i=epaisseur_pointé;i<largeur;i+=maillage){ // Boucle sur la hauteur
|
|
for (j=epaisseur_pointé;j<hauteur;j+=delta*2) {// Boucle sur la largeur
|
|
ctx.moveTo(i-epaisseur_pointé,j); // Dessin du +
|
|
ctx.lineTo(i+epaisseur_pointé,j);
|
|
ctx.moveTo(i,j-epaisseur_pointé);
|
|
ctx.lineTo(i,j+epaisseur_pointé);
|
|
|
|
i2=i+maillage/2;j2=j+delta;// + du dessous décallé pour former un triangle équilatéral
|
|
ctx.moveTo(i2,j2); // + du dessous décallé pour former un triangle équilatéral
|
|
ctx.moveTo(i2-epaisseur_pointé,j2); // Dessin du +
|
|
ctx.lineTo(i2+epaisseur_pointé,j2);
|
|
ctx.moveTo(i2,j2-epaisseur_pointé);
|
|
ctx.lineTo(i2,j2+epaisseur_pointé);
|
|
}
|
|
}
|
|
ctx.stroke(); // Affichage du tracé
|
|
break;
|
|
case 'croix':
|
|
ctx.strokeStyle = couleur_pointé;
|
|
ctx.lineWidth = epaisseur_pointé/2; // épaisseur de la ligne du +
|
|
i2=0;j2=0;// Départ en haut à gauche
|
|
// Démarrage des boucle à "epaisseur_pointé" pour que les croix en bordure apparaissent en entier.
|
|
for(i=epaisseur_pointé;i<largeur;i+=maillage){ // Boucle sur la hauteur
|
|
for (j=epaisseur_pointé;j<hauteur;j+=delta*2) {// Boucle sur la largeur
|
|
ctx.moveTo(i-epaisseur_pointé,j-epaisseur_pointé); // Dessin du +
|
|
ctx.lineTo(i+epaisseur_pointé,j+epaisseur_pointé);
|
|
ctx.moveTo(i-epaisseur_pointé,j+epaisseur_pointé);
|
|
ctx.lineTo(i+epaisseur_pointé,j-epaisseur_pointé);
|
|
|
|
i2=i+maillage/2;j2=j+delta;// + du dessous décallé pour former un triangle équilatéral
|
|
ctx.moveTo(i2,j2);
|
|
ctx.moveTo(i2-epaisseur_pointé,j2-epaisseur_pointé); // Dessin du +
|
|
ctx.lineTo(i2+epaisseur_pointé,j2+epaisseur_pointé);
|
|
ctx.moveTo(i2-epaisseur_pointé,j2+epaisseur_pointé);
|
|
ctx.lineTo(i2+epaisseur_pointé,j2-epaisseur_pointé);
|
|
}
|
|
}
|
|
ctx.stroke(); // Affichage du tracé
|
|
break;
|
|
default : // Par défaut, un point
|
|
ctx.fillStyle = couleur_pointé;
|
|
i2=0;j2=0;// Départ en haut à gauche
|
|
// Démarrage des boucle à "epaisseur_pointé" pour que les points en bordure apparaissent en entier.
|
|
for(i=epaisseur_pointé;i<largeur;i+=maillage) {// Boucle sur la largeur
|
|
for (j=epaisseur_pointé;j<hauteur;j+=delta*2) { // Boucle sur la hauteur
|
|
ctx.moveTo(i,j); // point
|
|
ctx.arc(i, j, epaisseur_pointé, 0, 2 * Math.PI);
|
|
|
|
i2=i+maillage/2;j2=j+delta;// + du dessous décallé pour former un triangle équilatéral
|
|
ctx.moveTo(i2,j2); // point du dessous décallé pour former un triangle équilatéral
|
|
ctx.arc(i2, j2, epaisseur_pointé, 0, 2 * Math.PI);
|
|
}
|
|
}
|
|
ctx.fill();// Affichage du tracé
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
break;
|
|
|
|
}
|
|
}
|
|
|