конструктивные предложения для анимированного линейного графика на основе HTML5 - PullRequest
Новая
       14

конструктивные предложения для анимированного линейного графика на основе HTML5

0 голосов
/ 14 июня 2011

Я планирую разработать прокручиваемый / в реальном времени / анимированный линейный график для работы в браузерах (с использованием HTML5).Он будет интегрирован в приложение, которое выполняет сложные вычислительные операции (DSP), поэтому мне нужно, чтобы график / анимация были быстрыми и имели минимальные накладные расходы.Я создал такое приложение в Silverlight, но из-за ограниченного числа платформ, которые будут поддерживать это, я думаю, что мне лучше сосредоточиться на HTML5, предполагая, что оно может быть достаточно быстрым.

- Есть предложения о том, будет ли более подходящим canvas / svg или есть какие-нибудь существующие библиотеки / приложения, на которые я мог бы взглянуть?

- Есть какие-то специфичные для платформы соображения (особенно для мобильных устройств / планшетов)?

Спасибо!

1 Ответ

0 голосов
/ 14 июня 2011

SVG будет самым простым кодированием - в основном, просто сделайте линии в разметке и используйте объект или iframe, чтобы открыть линейный график 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>

Вычислительные вещи можно выполнять на сервере и в стилеможет обрабатываться с классом, как стили в html.

Ограничение SVG заключается в поддержке браузером тега animation.А SVG еще не полностью поддерживается встроенным в HTML, поэтому вам нужно обращаться с ним как с изображением.

Canvas требует рисования линий с помощью Javascript.Опять же, вычислительные ресурсы могут быть выполнены на сервере, а Javascript доставлен только с тем, что нужно нарисовать.Но может потребоваться больше времени, чтобы сделать это с помощью canvas.

Вы также можете использовать скрипт с SVG, вот несколько примеров: http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/

...