Na atividade nos foi dado uma janela de 180px, para organizar 5 imagens com 30x20 de dimensões, estando duas da horizontal e três na vertical de forma que os espaçamentos entre elas sejam iguais!
Inicialmente precisamos fazer o cálculo do espaço que sobra da tela retirando o que as imagens ocupam e dividir igualmente. No total são 5 imagens então temos 6 espaços para dividir o que sobra da tela. A largura que as imagens ocupam é a soma de 2*30(duas imagens na horizontal) e 3*20(três imagens na vertical), no total de 120.
A equação para achar o valor de cada espaçamento, fica x=180-120/6. Que resulta em 10px!
Depois foi pedido para aderir variáveis h e v, que defina quantas imagens ficarão na vertical e quantas na horizontal, de forma que a mesma organização anterior de espaçamentos iguais funcione independente de qualquer número de imagens na vertical e horizontal.
Resolvi deixar tudo em variáveis que possa ser alterado o valor e tudo funcione do mesmo jeito, a única coisa que deixei definido foram as dimensões que são dadas 30x20.
Criei uma variável espaco para ter o mesmo valor que x, e ficar fixa pois precisarei modificar x dentro do primeiro for.
O primeiro laço criei para posicionar as imagens que estiverem na horizontal. A variável y começa em zero e para até ser menor que o valor de h, ou seja, o laço sempre irá se repetir a quantidade de vezes que for necessário para representar as imagens na horizontal. A posição no eixoX é igual a variável x, pois tem o valor o espaçamento que terá entre as imagens. A posição no eixoY não foi dita então foi colocado um número fixo de 75.
Ao fim do laço a variável x será modificada para x=x+espaco+30; Isso quer dizer que o novo valor de x será, o valor antigo somado ao espaco (que é o valor do espaçamento fixo) e somando a 30 (que é o valor da largura da imagem na horizontal). Toda vez que esse laço rodar x terá um novo valor que corresponde a posição do eixoX da imagem seguinte!!
O segundo laço fiz a mesma coisa com quantidade de vezes que o for iria rodar, igual a zero e até ser menos v, garantindo que represente na tela apenas a quantidade de imagens colocada na variável v e depois pare de rodar. Logo após precisava definir o ponto inicial no eixoX, no primeiro for foi fácil pois como era a primeira imagem seria depois do primeiro espaçamento... Já nas imagens verticais, resolvi criar uma variável p (para organizar melhor a partir de onde começariam a organização das imagens na vertical. Mas quem seria p? Bom, a quantidade de imagens na horizontal vezes 30, representa os espaços ocupados pelas imagens na horizontal. E a soma da quantidades de imagens na horizontal (h) somada a 1, nos dar a quantidade de espaços que já teve até aqui, multiplicando pela variável espaco sabemos exatamente a largura de espaçamentos também, então nos posiciona exatamente após o último espaçamento que veio depois da último imagem na horizontal. Então na última linha do for colocamos que p irá se modificar de forma que sempre fique p=p+espaco+20; ou seja, o valor anterior + a largura da imagem + a largura do espaçamento após a imagem, e sempre teremos o local certo que a próxima imagem na vertical estará!!
Dica: Percebam que declarei e defini a equação de p fora do for, se estivesse dentro toda vez que o laço rodasse, p voltaria a ser o valor inicial e as imagens seriam posicionadas uma encima da outra no mesmo local.
Aqui dois exemplos, mostrando que modificando h e v independente dos valores, o programa funciona do mesmo jeito e exibe na tela o mesmo esquema de organização e espaçamentos iguais, independente da quantidade de imagens!
Inicialmente precisamos fazer o cálculo do espaço que sobra da tela retirando o que as imagens ocupam e dividir igualmente. No total são 5 imagens então temos 6 espaços para dividir o que sobra da tela. A largura que as imagens ocupam é a soma de 2*30(duas imagens na horizontal) e 3*20(três imagens na vertical), no total de 120.
A equação para achar o valor de cada espaçamento, fica x=180-120/6. Que resulta em 10px!
Depois foi pedido para aderir variáveis h e v, que defina quantas imagens ficarão na vertical e quantas na horizontal, de forma que a mesma organização anterior de espaçamentos iguais funcione independente de qualquer número de imagens na vertical e horizontal.
Resolvi deixar tudo em variáveis que possa ser alterado o valor e tudo funcione do mesmo jeito, a única coisa que deixei definido foram as dimensões que são dadas 30x20.
O primeiro laço criei para posicionar as imagens que estiverem na horizontal. A variável y começa em zero e para até ser menor que o valor de h, ou seja, o laço sempre irá se repetir a quantidade de vezes que for necessário para representar as imagens na horizontal. A posição no eixoX é igual a variável x, pois tem o valor o espaçamento que terá entre as imagens. A posição no eixoY não foi dita então foi colocado um número fixo de 75.
Ao fim do laço a variável x será modificada para x=x+espaco+30; Isso quer dizer que o novo valor de x será, o valor antigo somado ao espaco (que é o valor do espaçamento fixo) e somando a 30 (que é o valor da largura da imagem na horizontal). Toda vez que esse laço rodar x terá um novo valor que corresponde a posição do eixoX da imagem seguinte!!
O segundo laço fiz a mesma coisa com quantidade de vezes que o for iria rodar, igual a zero e até ser menos v, garantindo que represente na tela apenas a quantidade de imagens colocada na variável v e depois pare de rodar. Logo após precisava definir o ponto inicial no eixoX, no primeiro for foi fácil pois como era a primeira imagem seria depois do primeiro espaçamento... Já nas imagens verticais, resolvi criar uma variável p (para organizar melhor a partir de onde começariam a organização das imagens na vertical. Mas quem seria p? Bom, a quantidade de imagens na horizontal vezes 30, representa os espaços ocupados pelas imagens na horizontal. E a soma da quantidades de imagens na horizontal (h) somada a 1, nos dar a quantidade de espaços que já teve até aqui, multiplicando pela variável espaco sabemos exatamente a largura de espaçamentos também, então nos posiciona exatamente após o último espaçamento que veio depois da último imagem na horizontal. Então na última linha do for colocamos que p irá se modificar de forma que sempre fique p=p+espaco+20; ou seja, o valor anterior + a largura da imagem + a largura do espaçamento após a imagem, e sempre teremos o local certo que a próxima imagem na vertical estará!!
Dica: Percebam que declarei e defini a equação de p fora do for, se estivesse dentro toda vez que o laço rodasse, p voltaria a ser o valor inicial e as imagens seriam posicionadas uma encima da outra no mesmo local.
0 Comentários