así que tengo un botón HTML y un aleatorizador de JavaScript que aleatoriza una ubicación para que una imagen se 'genere' cuando haces clic en dicho botón. También tengo una imagen de campo de hierba (que tiene un aleatorizador para elegir entre 12 campos diferentes al recargar la página y mostrar uno de ellos). Actualmente, puede 'generar' una imagen en cualquier parte de la página, sin embargo, quiero que solo pueda generarla en el campo.
mi javascript:
function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; // set the position img.style.position = 'absolute'; img.style.top = document.body.clientHeight * Math.random() + 'px'; img.style.left = document.body.clientWidth * Math.random() + 'px'; document.body.appendChild(img); } document.getElementById('foo').addEventListener('click', () => show_image("cow-sprites/cowtest.png", 56, 54, 'foo') );mi html:
<button id="foo"> get a cow </button>mi CSS:
.cow-spawning { z-index: 1; } .field-image { position: fixed; left: 28.25%; top: 16%; z-index: -1; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); }lo que he intentado:
reemplazando
img.style.top = document.body.clientHeight * Math.random() + 'px'; img.style.left = document.body.clientWidth * Math.random() + 'px';con
img.style.top = meadows.naturalHeight * Math.random() + meadows_box.top + 'px'; img.style.top = meadows.naturalHeight * Math.random() + meadows_box.left + 'px';y creando una variable para contener la imagen del campo (prados)
Tienes las coordenadas de un contenedor (el campo) y otra caja (la imagen). Cada uno tiene una posición izquierda (x) y superior (y), así como un ancho (x) y una altura (y).
Desea aleatorizar las coordenadas de la imagen para que las 4 esquinas de esa imagen estén dentro de los límites de los contenedores exteriores. Puede ser difícil pensar en colocar las 4 esquinas a la vez, pero podemos simplificar el problema.
Solo pensemos en la coordenada superior izquierda (x, y). Si la imagen permanece dentro del contenedor, lo más bajo que puede estar la parte superior es lo mismo que la posición inferior del contenedor más la altura de la imagen. Del mismo modo, lo más a la derecha que puede ir la imagen es el ancho de una imagen desde el lado derecho del contenedor.
Por ejemplo, supongamos que el contenedor exterior left,top es 0,0, y su ancho, alto son 100,100. El ancho de la imagen interna, la altura es 10,10. La imagen interna puede estar en 0,0 dentro del contenedor extendiéndose hasta 10,10, que es la posición más a la izquierda y más arriba. Si la imagen está en la esquina inferior derecha más alejada, entonces la coordenada inferior derecha está en 100,100. Dado que la imagen es 10,10, la esquina superior izquierda está en 90,90.
Al final, esto solo nos dice que calculemos la posición aleatoria usando un rango reducido. En lugar de poder colocar la coordenada superior o izquierda en cualquier lugar entre 0 y 100, debemos restringirlas a 0-90, lo que permite que la altura y el ancho de la imagen se rellenen a la derecha y la parte inferior.
img.style.top = (containerHeight - imageHeight) * Math.random() + 'px'; img.style.left = (containerWidth - imageWidth) * Math.random() + 'px';Donde containerHeight y containerWidth son la altura del contenedor exterior en ancho, asumiendo que containerTop y containerLeft son ambos 0. Si tiene que tener en cuenta la posición de desplazamiento del contenedor exterior, también podemos tenerlo en cuenta.
img.style.top = ((containerHeight - containerTop - imageHeight) * Math.random() + containerTop) + 'px'; img.style.left = ((containerWidth - containerLeft - imageWidth) * Math.random() + containerLeft) + 'px';Por ejemplo:
Las posiciones izquierda/X aleatorias pueden oscilar entre 100 y 190 y los nuevos rangos de posición superior/Y pueden oscilar entre 200 y 280.