Mauricio Junior
Zoom e rotacionar imagem usando C# e ASP.NET
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.
Subscribe ecode10.com
Receive our latest updates about programming languages, software, database, books, ebooks, classes, jobs and more.
You can cancel anytime.
Log In
