Obtention de la position relative de la souris sur le canevas après la mise à l'échelle

Question

Problème: Je travaille avec un canevas HTML. Ma toile a une image de fond que plusieurs personnes peuvent dessiner en temps réel (via socket.io), mais en dessinant des pauses si vous avez agrandi.

Cause: Pour calculer où commencer et terminer une ligne Je normaliser entrée lors de la capture d'être compris entre 0 et 1 inclus, comme suit:

// Pseudocode 
line.x = mousePosition.x/canvas.width;  
line.y = mousePosition.y/canvas.height; 

de ce fait, le canvas peut être de toute taille et dans une position quelconque.

Pour mettre en œuvre un zoom sur défilement fonctionnalité, je simplement translate en fonction de la position actuelle de la souris, scale la toile par un facteur de 2, puis translate retour la valeur négative de la position actuelle de la souris (comme recommandé here).

est ici où le problème est

Quand je zoom, la toile ne semble pas avoir une idée de sa taille originale. Par exemple, disons que j'ai un canevas carré de 1000px. Par exemple, disons que j'ai un canevas carré de 1000px. En utilisant mon x normalisé et y ci-dessus, le coin supérieur gauche est 0, 0 et le coin inférieur droit est 1, 1. Je puis zoomer dans le centre par la mise à l'échelle par un facteur de 2. Je m'attendrais à ce que mon nouveau haut à gauche soit 0.5, 0.5 et mon droit inférieur serait 0.75, 0.75, mais il ne l'est pas. Même lorsque je zoome, le coin supérieur gauche est toujours 0, 0 et le coin inférieur droit est 1, 1.

Le résultat est que lorsque j'effectue un zoom avant et dessine, les lignes apparaissent où elles seraient comme si je n'avais pas du tout zoomé. Si je zoomais sur le centre et "dessine" en haut à gauche, je ne verrais rien jusqu'à ce que je fasse défiler pour voir que la ligne était en train de se dessiner sur le coin supérieur gauche d'origine. Ce que je dois savoir: En zoomant, est-il possible d'obtenir une lecture de votre nouvelle origine par rapport à la toile non-zoomée, ou quelle est la quantité de toile cachée? L'un ou l'autre de ceux-ci me permettrait de zoomer et de dessiner et de le faire suivre correctement.

---

Si je suis complètement hors de la base ici et il y a une meilleure façon d'aborder cela, je suis tout ouïe. Si vous avez besoin d'informations supplémentaires, je fournirai ce que je peux.

Answer 1

Utilisez HTMLElement.prototype.getBoundingClientRect() pour obtenir la taille et la position affichées du canevas dans DOM. À partir de la taille et de la taille d'origine affichées, calcule l'échelle de la toile.

Exemple:

canvas.addEventListener("click", function (event) { 
    var b = canvas.getBoundingClientRect(); 
    var scale = canvas.width/parseFloat(b.width); 
    var x = (event.clientX - b.left) * scale; 
    var y = (event.clientY - b.top) * scale; 
    // Marks mouse position 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(x, y, 10, 0, 2 * Math.PI); 
    ctx.stroke(); 
});