Имеет ли смысл создавать компоненты пользовательского интерфейса на основе холста?

Question

Несмотря на то, что DOM по-прежнему полностью доминирует в способе создания пользовательских интерфейсов, имеет ли смысл создавать набор полностью основанных на холсте компонентов пользовательского интерфейса, таких как кнопки, списки, горизонтальные / вертикальные группы и т. Д.?

Я точно знаю, что недостатков будет много, но каковы будут возможные преимущества этого?

Во-первых, я бы сказал, что в целом визуальная интеграция с canvas будет намного теснее.

Answer 1

Проект Zebra создал полный набор компонентов, который отображается в элементе HTML5 canvas. Вот скриншот сэмплера компонента. Я не использовал фреймворк, но он должен дать вам представление о том, насколько хорошо разные браузеры могут отображать компоненты пользовательского интерфейса.

Вращайте компоненты и проверяйте качество рендеринга линий (сглаживание), которое сильно зависит от используемого вами браузера. Вот еще немного информации относительно этой проблемы:

• HTML5 Canvas позволяет избежать субпиксельного рендеринга
• Плохое сглаживание текста, нарисованного на холсте
• Субпиксельный сглаженный текст в элементе HTML5 canvas

Другим проектом является Makepad, библиотека на основе рабочих webGL и редактор реального кода. Каждая видимая часть пользовательского интерфейса отображается в WebGL, включая весь текст на экране, с помощью встроенного механизма визуализации текста.

Это все еще ранняя фаза проекта, но вы можете попробовать живую демонстрацию здесь . Makepad с открытым исходным кодом, репозиторий Git можно найти по адресу github.com / makepad / makepad.github.io .

Answer 2

Использование Canvas в качестве основы пользовательского интерфейса - отличная идея, если у вас более 200 элементов. Это гораздо, гораздо быстрее, чем при использовании элементов DOM.

В iPhone Safari 300 анимированных DOM-элементов работают со скоростью 3 кадра в секунду (кадров в секунду), очень медленно.

Если вы используете холст, вы можете визуализировать> 300 элементов и при этом достичь 30 кадров в секунду, что означает плавную анимацию и переходы. Я проверял это подробно, поэтому я знаю, что это работает.

Недостатком Canvas (как кто-то еще упомянул) является то, что поисковые системы не могут видеть ваш контент. Но если вы создаете приложение, которое не должно проигрываться и должно работать на мобильных устройствах, тогда Canvas - это то, что вам нужно.

Answer 3

Нет.

Помните начало 2000-х?Когда все подумали, что было бы круто устроить гонку, чтобы изобрести самую отвратительную навигацию по сайту с помощью Flash?

Давайте не будем делать это снова.

Можно иметь некоторые Элементы пользовательского интерфейса, которые предварительно оптимизированы с помощью canvas, но помните, что эти элементы не будут доступны сканерам (например, Google) или пользователям, у которых отключены скрипты и т. Д.

Стоит также отметить, чтоВ спецификации HTML Canvas есть раздел, в котором настоятельно рекомендуется не пытаться создавать элементы управления для редактирования текста в Canvas.

Я точно знаю, что будет много недостатков,но каковы возможные преимущества этого?

Есть много красивых элементов, которые вы можете добавить на страницу с помощью Canvas.Некоторые вещи могут стать действительно красивыми, не будучи навязчивым и не изменяя навигацию страницы каким-либо образом.Возможно, логотип веб-сайта будет «расти» процедурно или светиться или иным образом усложняться.Другие эффекты фоновой анимации могут быть действительно аккуратными.

Существуют также интерактивные изображения, например, на сайтах, где вы хотите получить диаграмму, разбивку или изображение в разобранном виде, по которому вы будете перемещаться для проверки различных частей чего-либо (химической структуры,биологический организм, новая машина).Визуальные интерактивные мультимедиа, такие как создание диаграмм и игры, являются одними из лучших вариантов использования Canvas.

С точки зрения акцентирования пользовательского интерфейса страницы, страница должна также отлично работать, если ее элементы Canvas не работают.там.

а заменить кнопки?Заменить текстовые поля?Заменить списки?Точно нет.Они никогда не должны принадлежать Холсту.

Answer 4

В течение последних четырех лет я строил компоненты для холста, включая кнопки, циферблаты, ползунки, флажки, переключатели, палитры цветов, панели, окна, индикаторы, официанты, степперы, вкладки, пэды и т. Д. См. http://zimjs.com/components/ для рабочих примеров.

Преимущества заключаются в следующем:

1. Компоненты могут быть настроены на заказв большей или иной степени, чем традиционные компоненты HTML / CSS, и мы можем создавать больше типов компонентов.См. http://zimjs.com/docs.html для примеров.
2. Часто при создании интерактивных работ важно встраивать компоненты прямо в приложение или игру.Это трудно сделать путем наложения компонентов HTML с учетом масштабирующих приложений.
3. Определенно более тесная интеграция при перетаскивании панелей, анимации компонентов, масштабировании компонентов, работе с событиями библиотеки холста (ZIM и CreateJS используют on ()этот метод имеет свои преимущества - компоненты Canvas могут использовать его).

Мне нравится работать с компонентами Canvas - он сохраняет строки кода и мне не нужно переключаться между системами.Просто напоминание ... формат CSS в основном совпадает с литералом объекта в коде.Я предпочел бы отформатировать свои компоненты в коде в любой день, а не в CSS - лично мне гораздо проще работать в одной системе.

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

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

Answer 5

Мы попробовали что-то подобное, но наконец пришли к мысли, что мир еще не готов)

Вы должны помнить, что

• js всегда должно бытьвключен.В настоящее время это можно считать незначительным, но, тем не менее, стоит упомянуть.
• html / css на самом деле традиционный и постоянно развивающийся стек стандартов, рано или поздно вы почувствуете необходимость в некотором описательном языкеуменьшить количество повторяющихся кодов в визуализированных на вашем холсте UI-компонентах.И здесь есть два варианта - попытаться изобрести что-то запатентованное, что на самом деле может быть весело и интересно, но может иметь очень печальные последствия.Второй способ - переопределить html / css, чтобы не запутывать сторонних разработчиков.Но, подождите минуту, у нас уже есть движок html / css)))
• события и, следовательно, пользовательский опыт.Джонас прав.Попытка переопределить даже подмножество модели событий js, чтобы было удобнее разрабатывать компоненты, отображаемые на холсте, сложно.Некоторые проблемы даже неразрешимы.

Итак, это действительно интересный опыт, но я бы не советовал.

Answer 6

Звучит как плохая идея.Вы потеряете большую доступность, которую пользователь ожидает, например, фокус и вкладки.Или вам придется много работать для реализации всего этого.

Гораздо лучше использовать HTML5 и CSS3 для таких вещей.Доступно множество рамок JavaScript GUI, например, см. 15 Библиотеки веб-интерфейса Javascript, рамки и наборы инструментов .

Answer 7

Вот почему я решил сделать это:

1. Мое резюме будет отображаться одинаково во всех браузерах.

2. Я могу повторно использовать код в своем проекте Go (Google Go).Я использую SFML для установки пикселей, поэтому до тех пор, пока я не попробую ничего сверхъестественного, код будет легко транскрибировать.

3. Это хорошая практика, и хотя это плохо-изобретите колесо, кто-то должен знать, как это сделать.