HomePage Biblioteca Aprender Downloads Suporte Comunidade
Entrar | United States - English | |
1 de 1 pessoas classificaram isso como útil Avalie este tópico

Criando mapas usando Canvas ou SVG

.NET Framework 3.0

Este tópico compara como é possível usar Canvas e SVG para criar mapas interativos que podem ser exibidos em uma página da Web.

Ela contém dois códigos de exemplo independentes anotados que demonstram as formas diferentes como Canvas e SVG desenvolvem imagens de mapa. Esses códigos de amostra são escritos em HTML5 e JavaScript. Eles explicam os princípios básicos de como criar um mapa interativo para uma página da Web e processar eventos quando se clica no mapa. Ambas as amostras mostram como: desenhar um mapa de contorno do Lago Michigan usando coordenadas x, y e definir uma função para responder a um clique exibindo uma mensagem e alterando a cor do mapa. O primeiro código de explica explica como Canvas cria os componentes do mapa ao usar pixels no immediate mode. O código de exemplo SVG a seguir demonstra como SVG cria os mesmos componentes ao usar técnicas gráficas com base em forma no retained mode. A discussão técnica após cada amostra explica como o código funciona e fornece links para mais informações. O material de comparação final resume as principais diferenças do desenvolvimento de um mapa em cada tecnologia.

Código de amostra do Canvas

Copiar 

<!DOCTYPE html>
<html>
  
  <head>
    <script type="text/javascript">
      // Global variables
      var canvas;
      var ctx;

      // This function is called when the page loads.


      function init() {

        // Initialize canvas and get context.
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");

        // Draw on the context.
        draw(ctx);
      }

      function draw(ctx) {

        // Draw on the canvas.
        // Get the drawing coordinates.
        makeLake();

        // Then fill and stroke the shape.
        // The fill is white.
        ctx.fillStyle = "white";
        ctx.fill();

        // The stroke is blue.
        ctx.strokeStyle = "blue";
        ctx.stroke();
      }

      function paintLake() {

        // If the shape is clicked, display a fact
        // and paint the lake.
        // Display a fact.
        alert("Lake Michigan is one of the five Great Lakes of America.");

        // Fill the lake with blue.
        ctx.fillStyle = "blue";
        ctx.fill();
      }

      function makeLake() {

        // These methods draw the shape of the lake.
        ctx.beginPath();
        ctx.moveTo(263.3, 11.3);
        ctx.lineTo(252, 28);
        ctx.lineTo(217.3, 28);
        ctx.lineTo(184, 74);
        ctx.lineTo(154, 123.3);
        ctx.lineTo(142, 170);
        ctx.lineTo(127.3, 214);
        ctx.lineTo(112.7, 252);
        ctx.lineTo(124, 284.7);
        ctx.lineTo(120, 318.7);
        ctx.lineTo(124, 356);
        ctx.lineTo(154, 389.3);
        ctx.lineTo(196.5, 356.7);
        ctx.lineTo(218.7, 318);
        ctx.lineTo(206, 240);
        ctx.lineTo(212.7, 182);
        ctx.lineTo(230.7, 121.3);
        ctx.lineTo(253.3, 103.3);
        ctx.lineTo(288, 74);
        ctx.lineTo(288, 23.3);
        ctx.closePath();
      }
    </script>
  </head>
  
  <body onload="init()">
    <h1>
      Lake Michigan
    </h1>
    <canvas id="canvas" width="400" height="400" onclick="paintLake()">
    </canvas>
    <p>
      Click on the lake to learn a fact about Lake Michigan.
    </p>
  </body>

</html>

Discussão do código de amostra do Canvas

Esse código de amostra do Canvas usa um cabeçalho HTML5 padrão: <!doctype html>, para que os navegadores possam diferenciá-lo como parte da especificação HTML5.

A marca <canvas> está incluída no corpo. Você deve especificar a largura e a altura. Um ID é atribuído à marca para que faça parte do modelo de objeto de documento. Você também deve especificar a função chamada quando se clica na tela.

A parte <script> da página tem duas seções; uma para desenhar o mapa e outra para processar o evento click no mapa.

Desenhando o mapa

Canvas usa pixels no immediate mode para criar as imagens do mapa. Quando você começa a desenhar o contorno do mapa do Lago Michigan, a função init é chamada quando a página é carregada. Ela desenha o mapa em duas etapas.

A primeira etapa adiciona o elemento canvas ao modelo de objeto de documento e inicializa o contexto de desenho. Em seguida, a função draw é chamada.

A segunda etapa é desenhar o contorno do Lago Michigan na tela. Isso é feito iniciando-se em um ponto e desenhando-se linhas até os outros pontos definidos por um conjunto de coordenadas x, y. A função makeLake é chamada para criar um caminho que consiste nos métodos moveTo e lineTo que descrevem a forma do lago. Em seguida, a forma é preenchida com branco e a borda, azul.

Nessa amostra, o Adobe Illustrator CS5 foi usado para calcular as coordenadas. Isso facilita a transferência das formas de mapa para uma forma que possa ser usada por Canvas. Para usar essa técnica, você deve carregar o plug-in AI2Canvas, disponível em http://visitmix.com/labs/ai2canvas/.

. Inicialmente, um mapa satélite do Lago Michigan foi carregado no Illustrator e uma nova camada foi criada sobre ele. Em seguida, o lago foi traçado manualmente. Em seguida, a camada foi exportada (sem o mapa satélite) usando-se AI2Canvas para uma página HTML. Nesse documento HTML, os dados foram copiados e colados na função makeLake do exemplo.

Processando o evento Click

A função paintLake é chamada quando o usuário clica no elemento canvas. Uma caixa de alerta é exibida e a forma da tela é preenchida com azul. Lembre-se de que isso pressupõe que a última forma criada através de closePath não foi alterada. Sempre que você cria um novo caminho, o caminho anterior deixa de ser o atual. fill e stroke se aplicam somente ao caminho atual.

Código de amostra SVG

Copiar 

<!DOCTYPE HTML>
<html>
  
  <head>
    <script type="text/javascript">
      // This function is called when the lake is clicked.


      function lakeColor() {

        // Display a fact.
        alert("Lake Michigan is one of the five Great Lakes of America.");

        // Get the SVG polygon element.
        var myLake = document.getElementById("lake");

        // Color it by changing the fill attribute.
        myLake.setAttribute("fill", "blue");
      }
    </script>
  </head>
  
  <body>
    <h1>
      Lake Michigan
    </h1>
    <!-- Create the main SVG element. -->
    <svg x="0" y="0" width="400" height="400">
      <!-- Add the polygon element. -->
      <polygon fill="white" stroke="blue" id="lake" onclick="lakeColor()" points="263.3,11.3 252,28 217.3,28 184,74 154,123.3 142,170 
      127.3,214 112.7,252 124,284.7 120,318.7 124,356 154,389.3 196.5,356.7 218.7,318 206,240 212.7,182 230.7,121.3 253.3,103.3 
      288,74 288,23.3 " />
    </svg>
    <p>
      Click on the lake to learn a fact about Lake Michigan.
    </p>
  </body>

</html>

Discussão do código de amostra SVG

Esse código de amostra do SVG usa um cabeçalho HTML5 padrão: <!doctype html>, para que os navegadores possam diferenciá-lo como parte da especificação HTML5. Lembre-se de que nem todos os navegadores dão suporte a esse aspecto de HTML5, em que as marcas SVG são tratadas como se fossem marcas HTML. Esse tratamento é chamado de inline SVG.

Desenhando o mapa

O SVG usa o retained mode para criar o contorno do mapa baseado na forma. Para começar, coloque uma marca svg no corpo da página da Web. Você também deve especificar a largura e a altura do contêiner de desenho do SVG. Em seguida, um polygon é inserido no contêiner SVG. O polígono tem um preenchimento branco, um stroke azul e um ID de lake para que seja incluído no modelo de objeto de documento. O atributo onclick do polígono deve especificar a função lakeColor como o destino caso o elemento seja clicado. Diferentemente da amostra Canvas, com SVG é possível responder a eventos click em cada elemento separado. Um clique fora do polígono não é processado

Na amostra, o Adobe Illustrator CS5 foi usado para calcular as coordenadas do polígono. Inicialmente, um mapa satélite do Lago Michigan foi carregado no Illustrator e uma nova camada foi criada sobre ele. Em seguida, o lago foi traçado manualmente. A camada foi salva como um documento SVG. No documento SVG, foi fácil copiar e colar a sequência de coordenadas no elemento de polígono do exemplo.

Processando o evento Click

A seção de script tem uma função que processa o evento click quando você clica no lago. A função lakeColor exibe uma mensagem de alerta quando se clica na forma do lago. Ela também pinta o lago de “azul” alterando o atributo polygon.

Resumo comparativo

A principal diferença entre os dois códigos de amostra descritos aqui é a maneira como eles criam imagens e as colocam na tela. O sistema de exibição gráfico no retained mode do SVG permite criar todos os detalhes do mapa em marcas semelhantes a HTML no corpo e modificá-los no script alterando atributos de forma. Canvas exige mais códigos para realizar a mesma tarefa, porque as formas devem ser desenhadas no script e o corpo só contém a marca Canvas básica. Nesse exemplo, o preenchimento é feito através do método fillStyle, mas se uma forma intermediária tivesse sido usada, a forma do lago precisaria ser redesenhada. Além disso, como Canvas usa o immediate mode, a forma não pode ser modificada com a mesma facilidade de uma forma SVG.

Em geral, o SVG pode criar mapas usando menos linhas do que Canvas. Nos códigos de amostra usados nessa comparação, o código do mapa SVG tem 40 linhas e o código do mapa Canvas, 91 linhas. Ambas as tecnologias são suportadas pelo Adobe Illustrator CS5, o que permite criar o mapa no Illustrator e, em seguida, copiar os dados diretamente no código HTML.

Tópicos relacionados

Como escolher entre Canvas e SVG para criar gráficos da Web

 

 

Isso foi útil para você?
(1500 caracteres restantes)
A Microsoft está realizando uma pesquisa online para saber sua opinião sobre o site do MSDN. Se você optar por participar, a pesquisa online lhe será apresentada quando você sair do site do MSDN.

Deseja participar?
Politica de Privacidade