[résolu] Canvas

[supermeganono]

Bonjour,

Après avoir lu pas mal de chose sur le SVG et les canvas trouver sur le forum, je me suis dis que je me devais de le tester. Plutôt sympa, je l'ai utiliser pour réaliser ma minicarte qui sera interactive. Jusque la tout va bien, canvas affiche ma carte 2D iso en miniature avec différents couleur pour les différents objets présent sur le secteur ( planète, vaisseau, allié, ennemi etc... ).

Voici le code :

[pastebin]CmamF9q1[/pastebin]

Tout ceci marche vraiment impeccablement. Sauf que lorsque je veux vider mon canvas pour changer ce qu'il contient ben rien ne se passe je garde mon ancien canvas.
Autrement dis au chargement, tout s'affiche proprement et lorsque je veux afficher le territoire d'une personne récupérer avec $("#territoire").val(); je rappelle ma fonction minicarte ( qui cette fois détecte le changement de $("#territoire").val(); ).
Bien détecté les alert() me répondent bien que je suis dans le premier cas ( if ( cnom != "aucun" ) ). Il devrais donc le dessiner que des pixel noir ou de la couleur ffcc33 si les coordonnées sont présentes dans un tableau.

Hors même après avoir trouver ctx.clearRect(0, 0, 200, 200); pour vider le canvas, celui-ci reste intact.
Mon idée étant de vider le canvas au rappel de la fonction et de le redessiner. C'est ce que j'ai trouver sur le net, mais apparemment je dois certainement merder quelque part.

Auriez-vous des pistes ?
Des sites sur lesquels avoir des informations pour apprendre ( en français si possible ). Ceux trouver jusque maintenant ne m'ont pas vraiment fourni de réponses ou d'indication. Même le site du zéro

http://www.vincent-rousseau.net/content/mini-paint-html5-avec-canvas
C'est bizarre, je comprend pas pourquoi son clearRect fonctionne et pas le mien :cogne:

Merci !

edit : coloration syntaxique

[Maks]

ctx.clearRect(0, 0, canvas.width, canvas.height);

Par ailleurs j'ai fait un topic qui regroupe des heures de recherche personnelle, d'exemple, de tuto sur canvas. Impossible que tu ne trouves pas ce qu'il te faut là dedans

[supermeganono]

Ben malheureusement j'y ai déjà fait un tour ^^ J'avais fait une recherche forum avant de poster.
J'ai balladé sur beaucoup de tes ressources, mais je ne trouve pas pourquoi je coince. Puis en anglais, je comprend pas toujours tout, ça aide pas.


ctx.clearRect(0, 0, canvas.width, canvas.height);
Déjà essayé, ça ne marche pas, le 72,72,200,200 ( car c'est un carré de 200-200 ) et le 72-72 parce que 0,0 me coupe l'image en deux, en diagonale. Surement à cause du rotate.

Si j'ai bien pigé le canvas, il démarre à 0,0 mais ne le reste pas toujours selon nos manipulations. J'aimerai juste tout remettre à 0, le canvas, le pointeur etc. mais dur dur

[Sephi-Chan]

Pense à utiliser le BBCode code=* pour indiquer le langage de la coloration syntaxique.

[Maks]

Ah !

Mais juste c'est bizarre tes transfos. Tu fais un scale à la toute fin j'ai pas compris. T'as pas une page de test ?

Il faut que tu sauvegardes puis restore la pile d'état du canvas pour repartir de 0,0

ctx.save();



// some stuff



ctx.restore();

Sinon oui je donne beaucoup de liens en anglais, mais croit c'est de très très très très loin les meilleures ressources

[supermeganono]

Ok donc j'ai retiré le ctx.scale qui n'avais pas d'utilité ici. Surement un ancien test que j'ai oublié de supprimer.
J'ai ajouter le .save() et .restore en début et fin de fonction.

Voici le résultat obtenu :

au chargement :


et l'affichage lorsque je lui demande de m'afficher le territoire ( donc l'identique, seul quelques points de couleur doivent changer qui sont enregistrer dans un tableau javascript )



Bizarrement je n'arrive pas à repartir de 0 et le ClearRect ne s'effectue donc pas depuis l'origine 0,0 du canvas.

Les points semble être bien positionner mais apparemment il a doubler la rotation et ne prend donc pas le save() et restore ?


EDIT : Pour tester => www.damocorp.com
Login test
pass test
En haut gauche "chantier naval"
Dans le menu qui apparait "En mission" et clique sur un des oeil

Une fois sur la carte, la liste des territoires est en bas a droite et la minimap en bas a gauche.

[Maks]

Ah oui j'ai eu le coup récemment !

Tu testes sous IE9 non ?

Justement avant ton clearRect() met :

ctx.setTransform(1, 0, 0, 1, 0, 0)

Plus pratique je peux te filer ça de mes outils persos en attendant l'api v5 de canvas

/**

 * Méthode permettant de remettre à zéro les transformations appliqués à un Canvas (translate, rotate, scale, etc)

 *

 * @author Maks

 */



CanvasRenderingContext2D.prototype.reset = function() {



	this.setTransform(1, 0, 0, 1, 0, 0);



};

---

Une autre solution ça aurait été de faire la rotation en sens inverse justement ça revient au même

Sinon si tu mets

ctx.clearRect();

ctx.save();
ctx.rotate();
...
ctx.restore();

ça doit le faire aussi

[supermeganono]

Ok ça fonctionne nickel !
Par contre je comprend rien à la fonction !

Les méthodes de tranformation finale permettent de modifier directement la matrice de transformation.

transform(m11, m12, m21, m22, dx, dy)

Cette méthode doit multiplier la matrice de transformation courante par la matrice décrite par :

m11 m21 dx
m12 m22 dy
0 0 1

Si un des paramètres vaut Infinity, la matrice de transformation doit être marquée comme infinie et la méthode ne doit pas provoquer d'exception.

setTransform(m11, m12, m21, m22, dx, dy)

Cette méthode doit réinitialiser la transformation courante à la matrice d'indentité, et invoquer ensuite la méthode transform avec les mêmes arguments. Si l'un d'entre-eux vaut Infinity, la matrice de transformation doit être marquée comme infinie et la méthode ne doit pas provoquer d'exception.

Source => https://developer.mozilla.org/fr/Tutorie...formations

tu peux m'expliquer le principe stp ?
J'vais faire des test pour voir ce que ça donne et essayer de comprendre.


Merci pour l'aide !

[Maks]

En fait tu appliques à tes transformations la matrice identité

1 0 0
0 1 0
0 0 1

ce qui les remet à 0, c'est des maths ^^

La méthode reset() que je t'ai filée est mieux niveau sémantique. Ils vont l'ajouter dans la prochaine API pour canvas

Sinon en dehors de ça, ça permet de faire des transfos plus complexes, genre 'skew' pour les animations CSS3.

Pour avoir ce genre de résultat : http://www.html5canvastutorials.com/adva...-tutorial/

De rien, si tu as d'autres questions...

[supermeganono]

Ok mes cours sur les matrices remonte tellement loin que j'vais devoir réviser Puis a ce que je me souviens, c'était pas mes meilleurs points en math :]

Merci !