Javascript Girl
  1. Javascript Girl
  3. Position de la souris sur la peinture sur toile
Intereting Posts
Comment obtenir un domaine à partir d'une chaîne à l'aide d'une expression régulière javascript PNG n'est pas rendu avec PhantomJS avec plusieurs tentatives en boucle Pour une boîte de recherche de remplissage automatique JavaScript, faut-on utiliser le gestionnaire d'événements «d'entrée»? Est-ce une mauvaise pratique d'utiliser le module requireJS en tant que singleton? Réessayez une étape prometteuse Appelez la fonction javascript après le chargement du script Test des exceptions JS avec Mocha / Chai Objet de la page Protractor – TypeError: Object # <Object> n'a pas de méthode 'methodName' Google Chrome Pinch-to-zoom prevention Comment cachez-vous les contrôles audio HTML5? Temps d'exécution maximum pour JavaScript Appelez javascript du code vb.net derrière Expression régulière pour supprimer l'extension d'un fichier Débogage de JSX à l'aide d'un navigateur / plugins Est-il préférable de comparer les chaînes à l'aide de la fonction LowCase ou à la fonction d'ajout de JavaScript?

Position de la souris sur la peinture sur toile

Le code ci-dessous se penche correctement, mais il crée de mauvaises coordonnées. Il devrait peindre l'endroit où se trouve la souris. Je n'ai pas pu découvrir mon erreur. Merci.

JSFIDDLE 

container.mousedown(function(e) { var parentOffset = $(this).offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; context_temp.beginPath(); context_temp.moveTo(x, y); started = true; }); container.mousemove(function(e) { var parentOffset = $(this).offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; if (started) { context_temp.lineTo(x, y); context_temp.stroke(); } }); container.mouseup(function(e) { var parentOffset = $(this).offset(); var x = e.pageX - parentOffset.left; var y = e.pageY - parentOffset.top; if (started) { container.mousemove(x, y); started = false; update(); } });

Vous définissez la largeur et la hauteur de votre canevas dans CSS. Cela étire simplement la toile comme il s'agissait d'une image.

L'effet est en train de dessiner au mauvais endroit.

Au lieu de cela, vous devez définir les dimensions de votre toile sur la balise elle-même: 

 <canvas width="400" height="400"></canvas>

Un <canvas> a sa propre width et sa height , qui définit non seulement sa taille physique (à moins que CSS entre dans), mais aussi sa taille logique (le nombre de lignes / colonnes de pixels sur sa surface de dessin). Lorsque CSS change la taille, la toile s'étend pour s'adapter, mais ne change pas sa taille logique . Fondamentalement, les pixels s'allongent aussi, de sorte que les coordonnées logiques et physiques ne correspondent plus.

Pour réparer le problème, vous pouvez soit faire les calculs pour faire correspondre les coordonnées, soit utiliser exclusivement la largeur / hauteur des toiles pour les dimensionner ou définir les propriétés de largeur et de hauteur des toiles après le fait pour correspondre à la largeur et à la hauteur Défini par CSS.