Olá
pessoal, eu vou falar neste artigo como desenvolver funcionalidades para girar
e fazer zoom na imagem. Neste artigo eu uso classes em CSS e envio de comandos
usando a linguagem de programação C#. Nenhum JavaScript foi utilizado para
rotacionar ou dar zoom na imagem.
No
final desse artigo, você estará apto a trabalhar com imagem no seu site ou
sistema, usando a solução informada aqui.
Requisito:
Ferramenta
de desenvolvimento: Visual Studio
Linguagem
utilizada: C#
Estilo: CSS
Toda
a solução que vira imagem e faz o zoom, em resumo, é usado CSS chamado pela
linguagem C#.
Primeiro exemplo
No
modo greal a ideia é simples e ao mesmo tempo não utiliza de recursos em
JavaScript. O JavaScript tem sido pesado para alguns desenvolvedores esses
dias. Lembro a todos que, quem puder estudar mais sobre a linguagem de
interpretação JavaScript, faça isso porque a linguagem JavaScript junto com CSS3
se torna muito poderoso.
A
imagem 1 mostra o primeiro passo que precisa ser feito, por exemplo: colocar os
botões de girar, zoom mais e zoom menos. Colocar uma imagem para teste e com
ela vamos trabalhar.
Zoom menos
Imagem 1 – Tela HTML
O zoom menos é o primeiro botão começando da esquerda para a direita. Para programar essa funcionalidade vamos começar do CSS. Listagem 1.
Listagem 1 – Fazendo HTML e CSS da página.
< !DOCTYPE html >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server" >
< style >
.zoomMenos70
{
zoom: 70%;
-moz-transform: scale(0.70);
-webkit-transform: scale(0.70);
}
.zoomMenos50
{
zoom: 50%;
-moz-transform: scale(0.50);
-webkit-transform: scale(0.50);
-ms-transform: scale((1.49);
}
.zoomMenos30
{
zoom: 30%;
-moz-transform: scale(0.30);
-webkit-transform: scale(0.30);
-ms-transform: scale((1.49);
}
< /style >
Note que na listagem 1 existem comandos funcionando para os três browsers. O primeiro comando zoom usando o CSS3 mais atual. Os outros se dividem pelos outros browsers como Firefox e Internet Explorer.
O zoom de 30% equivale a escala de 0.30 nos outros comandos como –moz-transform e –webkit-transform. O zoom menos diminui de 70 para 50 e depois 30 porcento, isto é, são 3 zoom menos. Isso pode ser programado por você quantas vezes quiser, pode ser de 10 em 10 até chegar a zero. Na minha opinião, acho que não é necessário.
Passando agora para o corpo do documento HTML, coloquei o botão image, uma div e uma imagem dentro da div. Listagem 2.
Listagem 2 – Mostrando o corpo da página
< body >
< form id="form1" runat="server" >
< div align="center" style="text-align:center;" >
< asp:ImageButton ImageUrl="botoes/zoomout_d.png" ID="cmdZoom" OnClick="cmdZoom_Click" runat="server" / >
< /div >
< br / >< br / >< br / >< br / >< br / >< br / >
< div id="divImagem" runat="server" >
< img src="imagem.png" runat="server" id="img1" / >
< /div >
< /form >
< /body >
O objeto botão tem o nome chamado cmdZoom. O div com nome divImagem, possui a tag runat=server e dentro dela um objeto de imagem chamada img1. No clique do botão, é atribuído a classe para a div e não para a imagem. Quem vira é a div e não a imagem mas você pode usar qualquer objeto. Veja a listagem 3 mostrando o código de zoom menos.
Listagem 3 – Código C#
protected void cmdZoom_Click(object
sender, ImageClickEventArgs e)
{
if
(divImagem.Attributes["class"] == null)
divImagem.Attributes["class"] = "zoomMenos70";
else if
(divImagem.Attributes["class"].Equals("zoomMenos70"))
divImagem.Attributes["class"] = "zoomMenos50";
else if
(divImagem.Attributes["class"].Equals("zoomMenos50"))
divImagem.Attributes["class"] = "zoomMenos30";
else
divImagem.Attributes["class"] =
"zoomMenos70";
}
O clique do botão verifica na primeira linha se o atributo class está nulo, se tiver, ele atribui uma classe a div chamada zoomMenos70. Senão, verifica se for o zoomMenos70 e então atribui o zoomMenos50 e assim por diante. A imagem 2 mostra que depois de cilcar no botão, a imagem diminuiu bem.
Imagem 2 – Zoom menos
Zoom mais
O próximo passo é mostrar como dar zoom na imagem ou no div adicionados anteriormente. Vou colocar 3 níveis de zoom, com o objetivo aumentar a imagem mantendo a qualidade. Acrescentei mais 3 métodos no CSS para os níveis de zoom. Veja a listagem 4.
Listagem 4 – Aumentando imagem
< style >
.zoomMais100
{
zoom: 100%;
-moz-transform: scale(1.00);
-webkit-transform: scale(1.00);
}
.zoomMais149
{
zoom: 149%;
-moz-transform: scale(1.49);
-webkit-transform: scale(1.49);
}
.zoomMais210
{
zoom: 210%;
-moz-transform: scale(2.10);
-webkit-transform: scale(2.10);
}
< /style >
Note que em cada classe style existe um número de zoom, usado do mesmo jeito que o zoom menos, só que pra mais. Lembro que dessa forma a imagem não desconfigura e não perde a qualidade. Se você colocar o zoom na imagem usando width, pode acontecer de perder a qualidade sem volta ou só depois que carregar a imagem novamente.
Depois do style, falta o botão para acionar os comandos. Adicionei mais um imageButton dentro do div. Veja a listagem 5.
Listagem 5 – Adicionando o botão de zoom mais
< div align="center" style="text-align:center;" >
< asp:ImageButton ImageUrl="botoes/zoomout_d.png" ID="cmdZoom" OnClick="cmdZoom_Click" runat="server" / >
< asp:ImageButton ImageUrl="botoes/zoomin_d.png" ID="cmdZoomM" OnClick="cmdZoomM_Click" runat="server" / >
< /div >
O comando OnClick gerou um método chamado “cmdZoomM_Click”. Toda vez que clicar nesse botão, o método será chamado. Veja a listagem 6.
Listagem 6 – Método de zoom mais
protected void cmdZoomM_Click(object sender, ImageClickEventArgs e)
{
if
(divImagem.Attributes["class"] == null)
divImagem.Attributes["class"] = "zoomMais100";
else if
(divImagem.Attributes["class"].Equals("zoomMais100"))
divImagem.Attributes["class"] = "zoomMais149";
else if
(divImagem.Attributes["class"].Equals("zoomMais149"))
divImagem.Attributes["class"] = "zoomMais210";
else
divImagem.Attributes["class"]
= "zoomMais100";
}
Na listagem 6, a primeira linha verifica se o atributo class é nulo, se for ele atribui para a div a classe “zoomMais100”. Se for o “zoomMais100”, então o ele chama o 149 e depois o 210. Cada método desse aumenta o tamnho da div e consequentemente a image. Veja a imagem 3.
Imagem 3 – Dando zoom na imagem
Rotacionar
Agora é a vez do último botão, o que rotaciona a imagem. Para isso criei um botão na parte html (imageButton) e algumas classes em style. Vou começar mostrando a primeira parte do style. Veja a listagem 7.
Listagem 7 – Style para rotacionar
.rotacionar270
{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-transform: rotate(270deg);
}
.rotacionar180
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-transform:
rotate(180deg);
}
.rotacionar90
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-ms-transform: rotate(90deg);
}
.rotacionar0
{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
-ms-transform: rotate(0deg);
}
Para rotacionar um objeto em tela, no nosso caso uma imagem, são usados outros comandos como rotate, rotation e ms-transform. A última linha de cada classe, o chamado filter e ms-transform serve para o browser Internet Explorer. Dessa forma temos outras linhas de funcionamento em todos os browsers.
Agora falta adicionar o objeto imageButton e programá-lo para chamar as classes style. Veja a listagem 8.
Listagem 8 – Último botão de rotacionar
< div align="center" style="text-align:center;" >
< asp:ImageButton ImageUrl="botoes/zoomout_d.png" ID="cmdZoom" OnClick="cmdZoom_Click" runat="server" / >
< asp:ImageButton ImageUrl="botoes/zoomin_d.png" ID="cmdZoomM" OnClick="cmdZoomM_Click" runat="server" / >
< asp:ImageButton ImageUrl="botoes/rotate-clockwise_d.png" ID="cmdRotacionar" OnClick="cmdRotacionar_Click" runat="server" / >
< /div >
O nome do objeto colocado chama “cmdRotacionar” e ao clicar o método criado é o “cmdRotacionar_Click”. Note que cada botão existe uma imagem associada de acordo com o nosso HTML/C#. Veja a listagem 9.
Listagem 9 – Botão rotacionar
protected void cmdRotacionar_Click(object sender, ImageClickEventArgs e)
{
if (img1.Attributes["class"] == null)
img1.Attributes["class"] = "rotacionar90";
else if (img1.Attributes["class"].Equals("rotacionar90"))
img1.Attributes["class"] = "rotacionar180";
else if (img1.Attributes["class"].Equals("rotacionar180"))
img1.Attributes["class"] = "rotacionar270";
else if (img1.Attributes["class"].Equals("rotacionar270"))
img1.Attributes["class"] = "rotacionar0";
else if (img1.Attributes["class"].Equals("rotacionar0"))
img1.Attributes["class"] = "rotacionar90";
else
img1.Attributes["class"] = "rotacionar90";
}
A listagem 9 mostra a mesma ideia dos outros métodos, só que agora chamando as classes styles que rotacionam. Cada clique o atributo é verificado da classe e depois a mudança é realizada. Se for a de 90 ele chama a 180, se for for 270 ele chama outra e assim sucessivamente. Bom, fico por aqui.
A imagem 4 mostra que a imagem rotacionou sem qualquer problema.
Imagem 4 – Rotacionando imagem
Lembro a todos que, com a mudança constante dos browsers, esse comandos em CSS podem mudar. Nem todos os browsers utilizam o padrão W3C e esses comandos devem ser testados.
Espero que tenha gostado e entendido, qualquer dúvida pode entrar em contato pelo site
www.mauriciojunior.org.