Comment recalculer les coordonnées x, y sur la base de screensize

j'ai une application de carte de chaleur et je stocke je stocke les coordonnées x,y d'un clic et aussi la largeur et la hauteur du viewport. Données réelles pour 2 clics:

x,   y,   width, height
433, 343, 1257,  959
331, 823, 1257,  959

Le problème c'est quand je redimensionner l'écran sur le site responsive, les clics sont maintenant. Je ne trouve rien sur mes recherches, mais y a-t-il une formule ou un algorithme pour recalculer les coordonnées x et y pour différentes résolutions? Par exemple, le premier clic, si le width va 1257990 et le height va 959400, comment recalculer les x et y pour qu'ils s'alignent au même endroit?

modifier: J'ai ajouté 2 champs à la base de données, width_percentage et height percentage pour stocker l' x pourcentage de la largeur et de la y pourcentage de la hauteur. Donc, si x était de 433 et la largeur de l'écran était de 1257 puis x était de 35% à partir du bord gauche de l'écran. J'ai ensuite utilisé la même théorie pour la hauteur et les calculs, mais il a fait ne pas mettre à l'échelle le point de clic au même endroit que je bien que les pourcentages feraient pour les résolutions de mise à l'échelle. Je teste ceci en cliquant sur la pleine résolution 1257 largeur puis réouverture à 900 largeur. Voir ci-dessous pour le code pour afficher les points de clic à la résolution inférieure.

Ajax PHP

while ($row = mysql_fetch_array($results)) { 
  if( $_GET['w'] < $row['width'] ) {
    $xcorr = $row['width_percentage'] * $_GET['w'];
    $ycorr = $row['y']; 
  }
}

ceci utilise le $_GET variable, passant la largeur et la hauteur de la résolution de l'écran de chargement de page. Puis il obtient les points de clic de la base de données comme $results. Depuis que j'ai seulement à l'échelle de la résolution largeur de 1257 à 900 Je n'ai pas mis dans le calcul pour la hauteur et son le même pixel que le clic initial. La nouvelle largeur multipliée par le pourcentage et définir le point de pourcentage de la marge de gauche de l'écran. Puisque le pourcentage est de 35% la nouvelle coordonnée x devient 900 *.35 = 315px à partir du bord gauche. Cela n'a pas fonctionné et je me gratte encore la tête pour garder click au même endroit pour les sites réactifs.

24
demandé sur Naterade 2015-09-30 18:53:57
la source

7 ответов

Vous pouvez réaliser cela en jquery:

$( window ).resize(function() {
  //ur code
});

javascript

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

si vous travaillez sur des appareils mobiles utilisent aussi

$(window).on("orientationchange",function(event){
  alert("Orientation is: " + event.orientation);
});
9
répondu Arun 2015-10-08 12:01:16
la source

Avez-vous essayé cette formule mathématique pour changer l'intervalle d'un nombre?

FormulaX

FormulaY

Et aussi au lieu de stockage:

x,   y,   width, height
433, 343, 1257,  959
331, 823, 1257,  959

vous pouvez le stocker normalisé entre 0 et 1 donc cela fonctionne pour n'importe quel width/height (calculé en divisant chaque x ses width et y ses height):

x,     y
0.344, 0.357
0.263, 0.858

Alors vous n'avez pas besoin de connaître l' width/height vous utilisé lorsque vous les avez stockés, et lorsque vous voulez les traduire à la taille de l'écran courant vous venez de multiplier chacun par le courant width/height

6
répondu MondKin 2015-10-13 21:27:12
la source

je pense que vous êtes sur la bonne voie avec les pourcentages. Est-ce que vous incluez le décalage de l'image de la carte. Je me demande si votre algo fonctionne mais la représentation visuelle semble fausse parce que l'offset change dans le viewport.

$(window).resize(function() {
    var offset = yourMap.offset();
    myLeft = offset.left();
    myTop = offset.top();
});

vous devez ajouter les offsets à chaque fois pour obtenir le placement approprié.

3
répondu Joe Johnston 2015-10-08 00:05:15
la source

C'est ce que vous devriez faire. Parfois, l'événement resize se déclenche lorsque le document est analysé. C'est une bonne idée de mettre le code dans une fonction d'événement onload. La fonction de changement d'orientation est tirée de @Arun answer.

window.onload = function() {

  $(window).on("orientationchange", function(event) {
    alert("Orientation is: " + event.orientation);
  });

  window.onresize = function() {
    alert('window resized; recalculate');
  };

};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
3
répondu www139 2015-10-12 04:29:16
la source

pour cela, vous devez faire quelques calculs. Voici la fonction qui va retourner la nouvelle potion x et y basée sur la hauteur et la largeur

function getNewX(xVlaue, oldWidth, newWidth){
   return xVlaue * newWidth / oldWidth;
}
newX = getNewX(10, 150, 100); // Use

Vous pouvez utiliser la fonction commune pour calc hauteur et largeur.

DEMO

2
répondu Mitul 2015-10-13 10:26:48
la source

toute la question dépend fortement de la page sur laquelle vous voulez l'utiliser. La plupart des pages ont un bloc centré et/ou des éléments d'auto-redimensionnement (lire "responsive"). Si la page n'est pas très réactive, par exemple si elle a une largeur fixe, vous avez une tâche plus facile. Si la page est centrée, vous pouvez sauvegarder la position X du curseur par rapport au centre de la page. de cette façon, la largeur de la fenêtre n'a pas d'importance. Il en va de même pour les pages alignées à gauche et à droite - dans ce cas, vous enregistrer le X-pos par rapport au bord gauche ou droit de la fenêtre, respectivement.

l'image suivante montre une position de clic orientée vers le centre. Notez que les propriétés x - et y du clic ne changent pas ici si vous redimensionnez la fenêtre.

explanation of center-oriented position

maintenant aux méthodes plus génériques

Si vous enregistrez les dimensions de la fenêtre, la position du curseur ET les décalages de défilement à chaque clic, vous sera très probablement en mesure de le reproduire à côté de la mise en page, mais vous aurez besoin de le reproduire pour chaque ensemble de dimensions uniques. Si vous avez utilisé l'astuce ci-dessus, vous pourriez être en mesure de superposer toutes les mises en page et de trouver un dénominateur commun. Par exemple, si votre page est centrée dans la fenêtre, a une largeur maximale, et que vous avez sauvegardé le X-pos relatif au centre de la fenêtre, vous pouvez superposer tous les clics qui se sont produits dans les fenêtres qui étaient au moins de cette largeur.

Vous pourriez faire quelques astuces cependant, et enregistrez les éléments cliqués à côté des informations que vous enregistrez déjà. Si vous enregistrez également la position de clic relative à l'élément, vous pouvez évaluer ces données à quelque chose comme "le bouton Soumettre est plutôt appuyé sur le côté inférieur droit" ou "les gens cliquent souvent sur le bout lointain de ce drop-down et parfois faire un mauvais clic de quelques pixels".

0
répondu Hubert Grzeskowiak 2015-10-13 18:19:55
la source

Essayer les deux options suivantes:



1. le rembourrage et les marges peuvent ne pas être à l'échelle. Utilisez " * {padding: 0;margin:0}" à la fin de votre feuille de style et vérifiez si cela le corrige.



2. Assurer extérieure et intérieure (ce qui signifie que tous les éléments d'échelle. Si un seul élément ne parvient pas à se dimensionner, de nombreux autres éléments seront déplacés. Cela se produit généralement avec des entrées de texte. Utilisez "* {border: solid 2} " à la fin de votre feuille de style pour observez visuellement l'effet d'échelle sur chaque élément.



Je suis sûr que votre problème sera résolu.

0
répondu aanand_ub 2015-10-13 21:19:25
la source

Autres questions sur