Рисуем векторной графикой в браузере (SVG/VML с помощью Google Web Toolkit + Dojo GFX)

    svg/vml demo on gwt + dojo
    Мы разрабатывали несколько тестовых проектов с использованием векторной графики в интерфейсе и после просьб поделиться опытом разработки написали пример для изучения. На самом деле, это очень просто, и в качестве примера предлагаем небольшое демо из документированным кодом, разработанное на GWT, с использованием библиотеки Dojo для работы с SVG (VML) графикой. Работает в большинстве браузеров, разработка практически только на Java.

    Для начала ознакомьтесь с самим демо: gwt.org.ua/demos/gwt-dojo-drawdemo/DojoSimpleDemo.html

    В исходный кодах найдете:
    – подключение dojo.js;
    – создание gfx surface на странице;
    – базовые классы для работы с DojoX сущностями (gfx, shape, color, stroke);
    – пример обёртки визуального объекта circle;
    – комментарии к классам и их членам;
    – и, собственно, пример использования разработанных классов — анимация цветных колец.

    Если заинтересовались — загрузите архив проекта для Eclipse. Для корректной работы с проектом под Eclipse, необходимо настроить переменную GWT_HOME (мы используем ее для коммандной работы).

    Крос-пост с нашего GWT блога: gwt.org.ua/ru/blog/2008/04/03/gwt-dojo-draw-demo
    Поделиться публикацией

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 29

      0
      Вектор в интернете - революция
        0
        odb-ui prototype
        вот также прототипчик, более юзабельный с кривыми, следущюю версию пока не выложили: http://gwt.org.ua/ru/odb-ui-demo/
          0
          Это под opera 9.26 отказалось работать +)
            0
            никак gwt дебагать на опере :\ местами разработки на gwt выходят за предусмотренную "совместимость" с оперой, мы наловили и другие мифические баги в ней... если бы услышать варианты почему не работает? Web Developer Toolbar & Menu for Opera - неюзабелен :\
              0
              зачем проходить всякие асиды, если на практике стандартов не поддерживают?
              риторический вопрос
                0
                А какой стандарт применяется в данном случае?
                0
                В Фоксе 3 пашет. Вы, кстати, в Опере 9.5 попробуйте.
                  0
                  попробовал - тоже ничего не отображается... где-то что-то кого-то перекрывает, немножко пробовал потелепатировать, но так и не угадал. Опере не хватает средств отладки, чтобы быть хорошо поддерживаемым браузером.
              0
              революции что-то не увидел, вразумите, если чего не понял: уже есть, к примеру, mootools + moocanvas
                0
                также вот это очень занимательно: http://greghoustondesign.com/demos/mocha…
                  0
                  ну и когда canvas будет работать в InternetExplorer? )

                  не совсем верно сравнивать растровый канвас с векторной графикой - он не включается в дом модель, нет отслеживания событий по отдельным элементам - только вручную... это просто другой, параллельный путь развития, пока хуже поддерживаемый.
                    0
                    уже работает, реализация в moocanvas как раз кроссбраузерна. и в dom все полноценно включается.

                    насчет отслеживания событий фигур (если я правильно понял) и т.д. - к сожалению не могу ничего сказать, т.к. не знаю, как это реализовано в dojo, возможно там тоже просто обертка. как-нибудь потом изучу и, возможно, напишу статейку.
                0
                Вы так считаете? VRML был ещё когда я начинал (~1997-й год), VML был ещё в IE 5.5.
                0
                Пример похож на гипножабу — я пять минут пялился :-)
                  0
                  Удивительно - вроде бы ничего нового, такого типа анимация и под DOS могла бы быть, но реализация в браузере заставляет восхищаться ;-)
                  0
                    0
                    но... блог для поста приходиться выбирать только один )
                    0
                    > Для начала ознакомьтесь с самим демо...

                    При просмотре демо загрузка процессора 100%, точнее 50% на Core 2 Duo.
                      0
                      у меня тоже :) это ведь просто демка, у которой обновление стоит с интералом 30-45мс - браузер не успевает отдавать 25 кадров в секунду. Сделай больше в коде (второй параметр) - будет легче, уже проверено - интервал подобран неудачно )
                      –1
                      Да уж, загрузка процессора неслабая. Покамест продолжим делать аналогичное на флеше.
                        +2
                        Понравилось +1 вам. Вопрос к аффтарам. Можно ли подобное реализовать просто на svg и dojo . Какова роль в этих сэмплах вашего фреймворка "GWT Pleso framework"?
                          0
                          спасибо. Можно реализовать такое исключительна на Dojo - оно как раз и занимается рисованием SVG/VML, GWT - мы используем для удобного написания более сложных веб приложений, чудесная вещь с дебагом! непосредственно java-кода.

                          к этому семплу GWT-PF не имеет отношения - это наша другая разработка созданная в проектах разработки пользовательского веб-интерфейса к решениям на базе данных. Позволяет легко скручивать и поддерживать типичные формы -справочники со вложенностью: поиск - таблица - просмотр - редактирование, пока нишевое решение - следующая версия как бы есть, но очень поломанная под проект, нужно найти время отрефакторить и выложить, в этой интерфейс плохо гнется, если нужно больше типического справочника.

                          в персональном блоге был пост: http://235.habrahabr.ru/blog/39085.html
                          0
                          ох,техника на грани фонтастики:)
                            0
                            > Работает в большинстве браузеров, разработка практически только на Java.

                            Нет. Оно Java не использует. Всё рисуется посредством банального JavaScript из dojo.js и других .js-файлов.

                            На Java написаны GLIPS Graffiti editor и продукты на основе открытой библиотеки Batik SVG Toolkit.
                              0
                              добро пожаловать к технологиям от гугла - да, dojo - внешний компонент для рисования, но сама разработка на Java - сорец возможно скачать по линку в посте. После окончания разработки GWT транслирует Java в JavaScript, также беспокоясь в меру ний о кросбраузерной совместимости, и в браузере Java непосредственно не используется.
                                0
                                Зачем это нжно, если JavaScript торозит хуже Java?

                                Чтобы работать в браузере, да и с нормальной скоростью, сравнимой с нативными приложениями, достаточно загрузить JRE (около 13МБ) и применять апплеты, а не мучить себя и пользователей созерцанием слайдшоу на активных страничках, у которых >1000 визуальных элементов.

                                Ну если вычислительную мощь Core2Duo некуда девать, кроме как на очередную интерпретацию JavaScript и несолько одновременно открытых вкладок браузера, то пожалуйста... :)
                                  0
                                  рисовать - возможно, но джава везде заблокирована в браузере, проблемы безопасности. В браузере работает только javascript.

                                  ребята ошиблись написав gmaps, gmail на GWT? (хотя они возможно там используют там далеко не только gwt)
                                    0
                                    Проблемы безопасности не в Java, а в головах разработчиков IE. JavaScript уж конечно небезопаснее апплетов, в этом скриптовом языке постоянно находят бреши.
                                    Апплеты выполняются в песочнице, им не видна файловая система и работать они могут только с тем сервером, с которого они были загружены.
                                      0
                                      это опять сравнение яблок и апельсин. с таким же успехом могу сказать, что лучше взять flash - если уже и качать что-то к браузеру - он куда меньше по объему и куда лучше поддерживаться. просто подумаем, что мир не ограничен технологиями, которые выбрал сам для себя

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое