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

Tela HTML

Figura 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.

Zoom menos

Figura 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.

Dando zoom na imagem

Figura 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.

Rotacionando imagem

Figura 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 usando so comentários abaixo ou pelo site www.mauriciojunior.org.