web-dev-qa-db-fra.com

Dessinez des images au milieu d'une toile

Je fais une galerie de photos, mais toutes mes images sont peintes dans l'Origine (0,0).

canvasContent.drawImage(arrPhoto[currentIndex], 0, 0);

Comment puis-je m'assurer que mes images sont dessinées au milieu sur l'objet canevas?

Merci pour votre aide!

MISE À JOUR

J'aurais peut-être mal formulé ma question. Ce que je veux dire, c'est que je veux que le milieu de mon image soit au milieu de ma toile, pas le coin supérieur de l'image.

Désolé

Modifier: faute de frappe

Edit2: faute de frappe

javascripthtmlimagecanvas
18
Matt

Si vous fournissez le x, y position comme ceci:

var image = arrPhoto[currentIndex];
canvasContent.drawImage(image,
        canvas.width / 2 - image.width / 2,
        canvas.height / 2 - image.height / 2
);

alors il devrait apparaître au centre. Un exemple de ceci en action est disponible sur: http://jsfiddle.net/VPLZc/2/ .

34
Mark Rhodes

Si vous voulez le dessiner mort au centre, vous devez connaître la largeur et la hauteur de l'image. Cela devient facile après:

//var canvas = document.getElementById("yourCanvasElementID");
var img = arrPhoto[currentIndex];
canvasContent.drawImage(img, (canvas.width-img.width)/2, (canvas.height-img.height)/2);
4
Andrei Nemes

Décalez l'Origine (qui est toujours 0,0 - en haut à gauche) par + (image.width / 2) et + (image.height / 2) pour commencer à dessiner au centre du canevas.

drawImage(image, image.width/2, image.height/2)
2
Glitch Desire