Home

Lecture

Разработка гибридных приложений для мобильных устройств под Windows Phone

:

Development of hybrid applications for mobile devices running Windows Phone
[+]
Created: 19.03.2014 | Level: for all | Access: paid
Практическая работа 6:

Использование возможностей DOM в мобильных разработках
A
|
версия для печати
< Lecture 8 || Практическая работа 6: 12 || Lecture 9 >
Annotation: На этом занятии разрабатывается мобильный виджет с JavaScript - кодом, использующим свойства и методы объектной модели документа для представления графической информации. Демонстрируются возможности тега <canvas>.

Ход выполнения работы:

  1. Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> DomAndCanvas.
  2. В папке проекта www откройте файл index.html. Это будет главная страница, с доступом к страницам Graphic.html и Dom.html. Удалите её содержание, соответствующее шаблону проекта, и вставьте следующий код: 
    <!DOCTYPE html>
<html>
    <head>
        <title>Dom and Canvas</title>
    </head>
    <body>
        <div class="app">
            <h1>Dom and Canvas</h1>
                <menu>
             <li>
              <h1>
                <a href ="Graphic.html">Страница с Canvas</a> - ссылка на страницу Graphic.html
              </h1>
            </li>   
            <li>
              <h1>
                <a href ="Dom.html">Страница с DOM</a> - ссылка на страницу Dom.html
              </h1>
            </li>               
               </menu>
            </div>
    </body>
</html>

    Главная страница имеет две гиперссылки на другие страницы которые пока отсутствуют.

  3. Создайте в папке www новую страницу Graphic.html, демонстрирующую возможности тега <canvas>.

    Код страницы:

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
      minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Graphic</title>
      <script type="text/javascript">
        CanvasMaster=new Object();
        CanvasMaster.showCanvas=function()
        {
        canvasNow  = document.getElementById("sunset");
        contextNow = canvasNow.getContext('2d');
        sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
        sunsetGradient.addColorStop(0, "yellow");
        sunsetGradient.addColorStop(1, "#cc0000")
        contextNow.fillStyle = sunsetGradient;
        contextNow.beginPath();
        contextNow.arc(100,100,75,0,Math.PI*2,false);
        contextNow.closePath();
        contextNow.fill()
        }
      </script>

  <style type="text/css">
    <body>
      {
      font-family:Verdana, Geneva, sans-serif;
      color:#cc0000;
      }
     </style>
      
        <title>Sunset</title>
        </head>
        <body onLoad="CanvasMaster.showCanvas()">
          <figure>
            <canvas id="sunset" width="400" height="400" > Как жаль, 
что вы не можете увидеть прекрасный закат из-за того, 
что ваш браузер не поддерживает HTML 5!</canvas>
            <figcaption>
              <p>Закат</p>
            </figcaption>
          </figure>
    </body>
</html>

    Пояснения к JavaScript - коду, содержащему свойства и методы объекта Canvas:

    • CanvasMaster=new Object(); - создание пользовательского объекта CanvasMaster;
    • CanvasMaster.showCanvas=function() - объявление функции showCanvas;
    • canvasNow = document.getElementById("sunset"); - определение объекта, как метода объекта document, имеющего имя sunset;
    • contextNow = canvasNow.getContext('2d'); - canvas используется в плоскости;
    • sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379); - создание градиента.

      Метод createLinearGradient() имеет четыре компоненты. Первые две отвечают за начало заливки - Хн, Ун. Вторые две - за конец заливки - Хк, Ук.

      Еще один пример заливки:

      var gradient=ctx.createLinearGradient(0,0,0,170);
gradient.addColorStop(0,"black");
gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

      Результат заливки:


    • sunsetGradient.addColorStop(0, "yellow"); -цвет начинающий заливку;
    • sunsetGradient.addColorStop(1, "#cc0000") - цвет завершающий заливку;
    • contextNow.fillStyle = sunsetGradient; - применение параметров стиля;
    • contextNow.beginPath(); - отрисовка окружности;
    • contextNow.arc(200,200,150,Math.PI*2,false);
    • contextNow.closePath().

      Пояснения метода arc():

      • Первые два параметра являются центром окружности;
      • третий параметр отвечает за радиус;
      • четвертый параметр отвечает за длину нарисованной окружности в радианах;
      • пятый параметр определяет выбор отрисовки четвертого параметра.

      Пример 1 рисования дуги:

      ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI*2,false);
ctx.stroke();

      Результат:


      Пример 2 рисования дуги:

      ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI*1.5,false);
ctx.stroke();

      Результат:


    • contextNow.fill() - выполнение заливки.

    Вызов JavaScript - кода выполняется при загрузке страницы, этому событию соответствует тег

    <body onLoad="CanvasMaster.showCanvas()">

    Пример тестирования страницы Graphic.html:

Next >>
< Lecture 8 || Практическая работа 6: 12 || Lecture 9 >