validar - obtener resolucion javascript

Cómo recalcular las coordenadas x, y basadas en el tamaño de pantalla

Question

Tengo una aplicación de mapa de calor y almaceno las coordenadas x, y de un clic y también el ancho y la altura de la ventana gráfica. Datos reales para 2 clics:

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

El problema es cuando cambio el tamaño de la pantalla en el sitio sensible, los clics mostrados ahora están desactivados. Vuelvo vacío en mis búsquedas, pero ¿hay una fórmula o algoritmo para volver a calcular las coordenadas x e y para diferentes resoluciones? Por ejemplo, el primer clic, si el width va desde 1257 a 990 y la height va desde 959 a 400 , ¿cómo recalcular x e y para que se alineen en el mismo lugar?

EDITAR: Agregué 2 campos a la base de datos, ancho_porcentaje y porcentaje de altura para almacenar el porcentaje x del ancho y el porcentaje y de la altura. Entonces, si x era 433 y el ancho de la pantalla era 1257, entonces x era 35% desde el borde izquierdo de la pantalla. Luego utilicé la misma teoría para la altura y ejecuté los cálculos, pero no ajustó el punto de clic al mismo lugar que yo, aunque los porcentajes serían suficientes para escalar las resoluciones. Estoy probando esto haciendo clic en el ancho de resolución 1257 y volviendo a abrir a un ancho de 900. Vea a continuación el código para mostrar los puntos de clic a una resolución más baja.

Ajax PHP

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

Esto utiliza la variable $_GET , pasando el ancho y el alto de la resolución de la pantalla en la carga de la página. Luego obtiene los puntos de clic de la base de datos como $results . Como solo amplío el ancho de resolución de 1257 a 900, no calculé la altura y es el mismo píxel que el clic inicial. El nuevo ancho lo multiplicé por el porcentaje y establecí el punto en el margen de porcentaje desde la izquierda de la pantalla. Dado que el porcentaje es del 35%, la nueva coordenada x se convierte en 900 *.35 = 315px desde el borde izquierdo. No funcionó y todavía me estoy rascando la cabeza para mantener el clic en el mismo lugar para los sitios receptivos.

Answer 1

¿Has probado esta fórmula matemática para cambiar el rango de un número?

Y también en lugar de almacenar esto:

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

Podría almacenarlo normalizado entre 0 y 1 para que funcione con cualquier width/height (calculado dividiendo cada x por su width y cada y por su height ):

x,     y
0.344, 0.357
0.263, 0.858

Entonces no necesita saber el width/height que utilizó cuando los almacenó, y cuando quiera traducirlos al tamaño de la pantalla actual, simplemente multiplique cada uno por el width/height actual

Answer 2

Creo que estás en el camino correcto con los porcentajes. ¿Estás incluyendo el desplazamiento de la imagen del mapa. Me pregunto si su algo está funcionando pero la representación visual parece incorrecta porque el desplazamiento está cambiando en la ventana gráfica.

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

Debe agregar las compensaciones cada vez para obtener la ubicación correcta.

Answer 3

Esto es lo que debes hacer. A veces, el evento de cambio de tamaño se activa cuando se analiza el documento. Es una buena idea colocar el código dentro de una función de evento onload. La función de cambio de orientación se toma de la respuesta @Arun.

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>

Answer 4

Para esto necesitas hacer algún cálculo. Aquí está la función que devolverá una nueva poción xey basada en la altura y el ancho.

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

Puedes usar la función común para calcular la altura y la anchura.

DEMO

Answer 5

Pruebe ambos de los siguientes

1. El relleno y los márgenes pueden no escalar. Use "* {padding: 0; margin: 0}" al final de su hoja de estilo y verifique si eso lo corrige.

2. Asegurar la escala de elementos externos e internos (es decir, todos los elementos). Cualquier elemento individual que no se pueda escalar hará que muchos otros elementos queden fuera de lugar. Esto generalmente ocurre con las entradas de texto. Use "* {border: solid 2}" al final de su hoja de estilo para observar visualmente el efecto de la escala en cada elemento.

Estoy seguro de que su problema se resolverá.

Answer 6

Toda la pregunta depende en gran medida de la página en la que desee utilizar esto. La mayoría de las páginas tienen un bloque centrado y / o algunos elementos de auto-cambio de tamaño (lea "responsivo"). Si la página no es muy receptiva, por ejemplo, tiene un ancho fijo, tiene un trabajo más fácil. Si la página está centrada, es posible que desee guardar la posición X del cursor en relación con el centro de la página. De esta manera el ancho de la ventana no importa. Lo mismo se aplica también a las páginas alineadas a la izquierda y a la derecha, por supuesto, en este caso, guardaría la posición X con respecto al borde izquierdo o derecho de la ventana, respectivamente.

La siguiente imagen muestra una posición de clic orientada al centro. Tenga en cuenta que las propiedades x e y del clic no cambian aquí si cambia el tamaño de la ventana.

Ahora a los métodos más genéricos.

Si guarda las dimensiones de la ventana, la posición del cursor Y el desplazamiento de desplazamiento en cada clic, lo más probable es que pueda reproducirlo junto con el diseño, pero tendrá que reproducirlo para cada conjunto de dimensiones único. Si utilizaste el truco desde arriba, podrías superponer todos los diseños y encontrar un denominador común. Por ejemplo, si su página está centrada en la ventana, tiene un ancho máximo, y si guardó la X-pos en relación con el centro de la ventana, puede superponer todos los clics que ocurrieron en ventanas que tenían al menos ese ancho.

Sin embargo, podría hacer algunos trucos y guardar los elementos seleccionados junto con la información que ya guarda. Si también guarda la posición del clic en relación con el elemento, puede evaluar estos datos a algo así como "el botón de envío está presionado en la parte inferior derecha" o "la gente a menudo hace clic en el extremo más lejano de ese menú desplegable y, a veces, falla -Haga clic por unos pocos píxeles ".

Answer 7

Usted puede lograr esto por jQuery:

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

javascript

window.onresize = resize;

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

Si está trabajando en dispositivos móviles, use este también.

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