Как я создал приложение для Магазина Windows с HTML5 и SVG

В предыдущей части статьи рассказывалось о стандартном SVG, который в конечном итоге мог работать непосредственно в современном браузере. Теперь мы будем смешивать некоторые API-интерфейсы Магазина Windows, которые можно использовать для создания приложения Магазина Windows, которые относятся к платформе Windows 8 и могут в конечном итоге вызываться из других поддерживаемых языков.

Поскольку Paint 4 Kids использует много рисунков, один рисунок загружается асинхронно при необходимости из файла appx и затем помещается в DOM страницы. Асинхронная загрузка выполняется с использованием Windows 8, загружающего асинхронный API, как показано в коде. Приложение Магазина Windows не позволяет нам загружать динамический код в DOM, потому что в общем случае этот код может исходить от внешнего вызова и в конечном итоге создавать некоторые проблемы безопасности в вашем приложении, если код является злокачественным. Однако код, который мы загружаем, является доверенным, поскольку он уже находится в файле appx и предоставлен нами. Вы можете безопасно вызывать функцию WinJS.Utilities.setInnerHTMLUnsafe, которая позволяет при необходимости загружать чертеж в DOM.

  svgfolder.getFileAsync ("drawing.svg"). then (function (file) {

     file.openAsync (Windows.Storage.FileAccessMode.read) .then (function (stream) {

         inputStream = stream.getInputStreamAt (0);

         reader = новый Windows.Storage.Streams.DataReader (inputStream);

         size = stream.size;

         reader.loadAsync (размер) .then (function () {

             svg = reader.readString (размер);

             WinJS.Utilities.setInnerHTMLUnsafe (document.getElementById ("s1"), svg);

         });

     });

 }); 

SvgFolder — это объект типа StorageFolder , вы можете вызвать асинхронный метод для поиска объекта storageFile — здесь обработка ошибок здесь опущена — для которого мы можем открыть поток и объект dataReader для чтения содержимого. В конце переменная svg содержит строку, которая представляет весь чертеж SVG. Как объяснено выше, мы можем вызвать setInnerHTMLUnsafe, чтобы добавить чертеж к элементу DOM s1.

Приятно, что SVG можно проверить в DOM Explorer в Visual Studio 2012, как показано ниже:

Например, вы можете выбрать конкретную фигуру из приложения во время выполнения — она ​​также работает в симуляторе — и DOM Explorer покажет вам связанный SVG во время выполнения, тот, который может быть результатом динамической загрузки и последующего преобразования применяется к нему. Очень классные вещи!

Преобразование рисунка SVG в Canvas и сохранение в изображение

Что-то, что вам нужно в формате JPEG чертежа, например, если вы хотите сохранить рисунок в файловой системе или если вы хотите использовать Windows 8 Share Charm или вообще в других частях приложения. Для этого мы использовали библиотеку canvg, которая преобразует файл SVG в объект Canvas . Преобразование может занять несколько раз, в зависимости от размера файла SVG и вашей аппаратной платформы, поэтому вы можете уведомить пользователя, что что-то происходит, мы используем всплывающее окно с индикатором хода выполнения, который отображается при запуске преобразования.

Теперь, когда у вас есть объект Canvas, вы можете получить ссылку на весь байтовый массив, а затем вы можете использовать API кодирования Windows, чтобы получить изображение нужного формата и размера. Ниже образец функции:

  function doSaveDrawingToFileEnd (fil) {

     var Imaging = Windows.Graphics.Imaging;

     var stream, encoderId, cc, offset, outputPixelData;

     fil.openAsync (Windows.Storage.FileAccessMode.readWrite) .then (function (_stream) {

         поток = _stream;

         return Imaging.BitmapEncoder.createAsync (jpegEncoderId, stream);

     }). then (function (encoder) {

         cc = document.getElementById ('canvas');

         // игнорируем переменную realBRectHeight ниже

         // это не важно для понимания логики

         смещение = (высота - realBRectHeight) / 2;

         outputPixelData =

 cc.getContext ("2d"). getImageData (0, смещение, cc.width, cc.height - смещение);

         encoder.setPixelData (Imaging.BitmapPixelFormat.rgba8, Imaging.BitmapAlphaMode.straight, width, realBRectHeight, 90, 90, outputPixelData.data);

         return encoder.flushAsync ();

     }). then (null, function (error) {

     console.log (Error.message);

     }). then (function () {

     if (stream) stream.close ();

     })

 } 

Сначала вы получаете ссылку на объект storageFile — не выделенный в коде — переменную fil, которая будет нашим окончательным изображением в формате jpeg; чем открыть поток для записи и создать объект BitmapEncoder, устанавливающий тип кодировки jpegEncoderId, это используется для кодирования массива байтов в требуемое изображение. Переменная cc является ссылкой на объект canvas, который содержит преобразованный файл SVG. Используя стандартный метод getImageData, мы получаем байты, которые мы хотим преобразовать — в коде вы можете увидеть значение смещения, используемое для обрезания определенной части чертежа, но вы можете игнорировать это значение здесь, потому что это не особенно полезно для понимания логика Теперь, используя API setPixelData с кодировщиком, вы можете установить некоторые значения для изображения, которое будет сгенерировано, изображение фактически генерируется при вызове flushAsync.

Завершение

В этой статье мы видели некоторые технические соображения о SVG и о том, как он использовался в Paint 4 Kids. SVG — очень интересная и мощная веб-технология, которую вы можете использовать для создания удивительных приложений для Магазина Windows с помощью JavaScript. Вы также можете поиграть с SVG прямо в браузере, найдя несколько забавных примеров на сайте IE Test Drive . Я надеюсь, что это поможет, если у вас есть похожий сценарий.

Если вы хотите узнать больше о том, как создать приложение для Магазина Windows, посмотрите приложение Generation .