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.