Obtenir la bonne position de la souris sur Canvas lorsque la taille de la toile est relative?

Question

Le problème est le suivant, ma largeur et hauteur de toile est relative à ses parents. En CSS, sa largeur et sa hauteur sont fixées à 95%. Cela fait que ma fonction getMousePosition ne fonctionne pas correctement, ce qui signifie que lorsque je clique sur un point de canevas, le point réel où un rectangle est dessiné est loin du point cliqué observé.

Voici les trucs html

<div class="Container"> 
      <div id = 'left-div'> 
       <canvas class = "Blackboard" id = "blackboard-canvas" > 

       </canvas> 
      </div>     
      <div id='right-div'> 
       <div id = 'tools-div'> 
        <ul> 
         <li><a href='#colorOption'>Color Options</a></li> 
         <li><a href='#toolbar-option'>Tool Bar</a></li> 
        </ul> 
        <div id='colorOption'> 
         <canvas id='color-option-canvas' > 

         </canvas> 
        </div> 
        <div id='toolbar-option'> 
         Tool bar options goes here 
        </div> 
       </div> 
      </div> 

      <br style="clear:both;"/> 
     </div> 

et relavent css

.Blackboard{ 

border-style: ridge; 
border-color: gray; 
border-width: 5px; 
width: 96%; 
height: 96%; 
cursor: crosshair; 
position: relative; 
-webkit-border-radius: 16px; 
-webkit-box-shadow: 0px 6px 7px #0a0505; 
    }; 

.Blackboard:active{ 
cursor: crosshair; 
    } 

.Container{ 
border-color: #666; 
border-width: 10px; 
border-style: inset; 
background-color: gray; 
width: 700px; 
height: 400px; 
} 

#right-div, #left-div{ 
height: 100%; 
} 
#left-div{ 
float: left; 
width: 60%; 
} 
#right-div{ 
float: right; 
background-color: black; 
width: 40%; 
} 

est-il un moyen de 'normaliser' ou ou quelque chose?

EDIT:

ici est un jfiddle la http://jsfiddle.net/EZktE/

Answer 1

Votre problème est que votre canevas assume les attributs de taille <canvas> par défaut de width=300 height=150. Ces attributs définissent le système de coordonnées pour le canevas, indépendamment de tous les attributs de largeur et de hauteur dérivés du CSS.

Pour le résoudre, mettez immédiatement après la ligne qui trouve l'élément de toile:

this.canvas.width = this.canvas.offsetWidth; 
this.canvas.height = this.canvas.offsetHeight; 

Cela a également fait face à facteur d'échelle de 96% par rapport à son parent.

Voir http://jsfiddle.net/alnitak/9JtfW/

NB: votre propre violon ne fonctionne pas parce que votre classe Blackboard a été créé dans le gestionnaire par défaut $(document).ready() de jsFiddle n'a donc pas été portée lorsqu'il est appelé à partir du gestionnaire en ligne dans le code HTML.

Answer 2

Bien sûr, juste Soustraire les propriétés OffsetX et offsetY de votre toile DOMElement avec x et y vous récupérez.

Cela fonctionnera correctement jusqu'à ce que l'utilisateur commence à zoomer, c'est un problème assez difficile à résoudre.