Cette page d\u00e9crit les \u00e9tapes \u00e0 suivre pour \u00e9laborer le nuancier de la partie Couleur de JSXGraph d\u00e9velopp\u00e9e dans le cadre de ce site.<\/p>\n\n\n\n\n\n\n\n
Objectif de notre \u00e9ch\u00e9ancier qui parait bien simple mais qui demande quelques adaptations.<\/p>\n\n\n\n
On souhaite permettre aux utilisateurs de constituer leur propre nuancier \u00e0 partir de la liste des couleurs disponibles dans JSXGraph et \u00e0 partir de deux sources externes <\/p>\n\n\n\n
<\/p>\n\n\n\n
De quoi a t-on besoin pour constituer cet outil :<\/p>\n\n\n\n
1\/ Board <\/p>\n\n\n\n
D\u00e9finir une zone sp\u00e9cifique dans votre html appel\u00e9e box3<\/p>\n\n\n\n
<div id=\"box3\" class=\"jxgbox\" style=\"width:100%;height:420px;\"><\/div><\/code><\/pre>\n\n\n\nDans la partie Javascript, il faut initialiser le contenu de cette zone en fixant quelques propri\u00e9t\u00e9s classiques :<\/p>\n\n\n\n
board3=JXG.JSXGraph.initBoard(\"box3\", {pan: {enabled:false},boundingbox: [-10,20,100,-10],\n withLines:true, keepaspectratio:false, axis:false, showInfobox:false,\n defaultAxes: {\n x: { ticks: {visible: true},withLabel: true,name: '',label: {position: 'rt',offset: [10, -20],anchorX: 'right',layer:20} },\n y: { ticks: {visible: true},withLabel: false,name: '', label: {position: 'rt',offset: [-25, -1],anchorY: 'top',}\n },\n zoom: {min: 0.5,max: 2}, layer:20\n}, showNavigation:false,showCopyright:false})};\nboard3.renderer.container.style.backgroundColor='#C3ADC3';<\/code><\/pre>\n\n\n\n2\/ Zone de d\u00e9p\u00f4t : <\/p>\n\n\n\n
L’id\u00e9e est de constituer une zone dans laquelle l’utilisateur pourra en d\u00e9pla\u00e7ant les couleurs constituer son nuancier. Il aura \u00e9galement la possibilit\u00e9 de d\u00e9placer les couleurs dans l’ordre de son choix. Mais comment faire en sorte que les couleurs se positionnent correctement les unes par rapport aux autres ? <\/p>\n\n\n\n
var centre_attractions=[];\nconst nb_pts_attract=12;\n\/\/ --------------------------------------------------------------------\n\/\/ deuxi\u00e8me partie : on cr\u00e9er la zone d'acceuil des couleurs choisies\n\/\/ --------------------------------------------------------------------\nconst creation_zone_acceuil=function() {\n const titre = board3.create('text',[10,18.5,\"Votre nuancier\"],{cssStyle:\"font-family:KaTeX_Math\", fixed:true,fontsize:16});\n const col=7, haut=17.5, bas=-8;\n const p1 = board3.create('point', [col, haut],{fixed:true,visible:false});\n const p2 = board3.create('point', [col+26, haut],{fixed:true,visible:false});\n const p3 = board3.create('point', [col+26, bas],{fixed:true,visible:false});\n const p4 = board3.create('point', [col, bas],{fixed:true,visible:false});\n const poly = board3.create(\"polygon\", [p1,p2,p3,p4],{Highlight:false,visible:true,fixed:true,fillColor:\"white\",opacity:1});\n \/\/ -----------------------------------------------------------\n \/\/ on genere les points d'accroche des couleurs nb_pts_attract\n \/\/ -----------------------------------------------------------\n centre_attractions=[]; \n for (let i=0; i<nb_pts_attract; i++) {\n let pt_poly=board3.create('point',[20,bas-2+i*2],{name:'',fillColor:'lightslategray',Highlight:false,fixed:true,strokeColor:\"lightslategray\"});\n \/\/ on stocke les points dans une liste pour un usage plus tard \n centre_attractions.push(pt_poly);\n }\n}<\/code><\/pre>\n\n\n\n3 \/ Elaboration du dispositif de s\u00e9lection :<\/p>\n\n\n\n
Nous allons d\u00e9finir des rectangles de couleur avec diff\u00e9rentes propri\u00e9t\u00e9s et voir ce qui se passe dans les diff\u00e9rents cas. Pour montrer les configurations possibles pour arriver au r\u00e9sultat attendu, nous avons d\u00e9velopp\u00e9 diff\u00e9rents cas qui permettent de voir et de comprendre le processus \u00e0 mettre en place pour atteindre l’objectif fix\u00e9. S\u00e9lectionnez les diff\u00e9rents cas pour observer l’effet d’une configuration et le code correspondant.<\/p>\n\n\n