{"id":1655,"date":"2016-03-29T18:57:43","date_gmt":"2016-03-29T16:57:43","guid":{"rendered":"http:\/\/cyol.fr\/blog\/?p=1655"},"modified":"2016-03-29T15:19:27","modified_gmt":"2016-03-29T13:19:27","slug":"reve-de-dragon-roue-astrologique-et-canvas","status":"publish","type":"post","link":"https:\/\/cyol.fr\/blog\/post\/reve-de-dragon-roue-astrologique-et-canvas\/","title":{"rendered":"R\u00eave de Dragon, Roue astrologique et canvas"},"content":{"rendered":"

\"\" Petit Compl\u00e9ment sur l’aide de jeu pour R\u00eave de Dragon<\/a>. J’ai ajout\u00e9 une roue Astrologique pour connaitre les heures favorables et d\u00e9favorables.<\/p>\n

Comme pour les TMR j’ai utiliser un canvas HTML et j’ai pig\u00e9s quelques petits trucs de plus sur cet objet et sa manipulation. (Du coup, oui, un article un brin plus technique)Le canvas est un objet html qui d\u00e9fini une zone de dessin. Via javascript on va pouvoir indiquer o\u00f9 ins\u00e9rer des images, du textes, faire des formes.<\/p>\n

Dans le html \u00e7a ressemble \u00e0 \u00e7a :<\/p>\n

<canvas id=\"AstrologieCanvas\" width=\"500\" height=\"500\" style=\"background-color:#1d1d1d\"><\/canvas><\/pre>\n
Et en javascript :<\/p>\n
    \/\/Mise en place du canvas : AstrologieCanvas\r\n    canvasAstrologie = document.getElementById(\"AstrologieCanvas\");\r\n    contextAstrologie = canvasAstrologie.getContext(\"2d\");<\/pre>\n
Une notion principale \u00e0 garder en t\u00eate pour ne pas trop s’arracher les cheveux est que lors de l’initialisation du context, il y a cr\u00e9ation d’un pointeur se trouvant en coordonn\u00e9es 0,0 \u00e0 savoir en haut \u00e0 gauche.<\/p>\n
Pour bouger ce pointeur, il faut utiliser la m\u00e9thode translate :<\/p>\n
    \/\/Centre le pointeur au milieu du canvas\r\n    contextAstrologie.translate(canvasAstrologie.height \/ 2, canvasAstrologie.height \/ 2);\r\n<\/pre>\n
Hors ce qu’il se passe avec translate c’est que le point de coordonn\u00e9es 0,0 va bouger pour aller l\u00e0 o\u00f9 on lui a demand\u00e9 par rapport \u00e0 l’ancien.<\/p>\n
Il faut faire attention aux moments o\u00f9 le pointeur est boug\u00e9. Par exemple, l’erreur que j’avais faite \u00e9tait de placer la ligne de code ci-dessus dans la fonction appel\u00e9e pour redessiner la roue Astrologique.<\/p>\n
Au premier appel, tout allait bien. Le pointeur \u00e9tait d\u00e9plac\u00e9 du haut\/gauche au centre du canvas. Mais au second appel, il d\u00e9pla\u00e7ait \u00e0 nouveau le pointeur, en ajoutant la moiti\u00e9 de la hauteur en Y et de la largeur en X. ce qui au final pla\u00e7ait le 0,0 en bas \u00e0 droite du canvas (et au 3\u00e8me appel on n’\u00e9tait d\u00e9j\u00e0 plus dans le canvas…)\"Roue<\/p>\n","protected":false},"excerpt":{"rendered":"
Petit Compl\u00e9ment sur l’aide de jeu pour R\u00eave de Dragon. J’ai ajout\u00e9 une roue Astrologique pour connaitre les heures favorables et d\u00e9favorables. Comme pour les TMR j’ai utiliser un canvas HTML et j’ai pig\u00e9s quelques petits trucs de plus sur cet objet et sa manipulation. […]<\/p>\n","protected":false},"author":1,"featured_media":1646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[120,2,7,8,90],"tags":[15,62,116,23,82,40,119],"class_list":["post-1655","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aide-de-jeu-reve-de-dragon","category-developpement","category-jeu-de-role","category-maitrise","category-web","tag-des","tag-developpement-2","tag-javascript","tag-jeu","tag-jeu-de-role-tag","tag-maitre-du-jeu","tag-reve-de-dragon","odd"],"_links":{"self":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/comments?post=1655"}],"version-history":[{"count":2,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1655\/revisions"}],"predecessor-version":[{"id":1658,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/1655\/revisions\/1658"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media\/1646"}],"wp:attachment":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media?parent=1655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/categories?post=1655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/tags?post=1655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}