@kibizoidus4 дек 2011 в 04:50

FiveGUI — красивые кнопочки для canvas'a

3 мин

3.8K

Canvas *

+25

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

@BuriK666 4 дек 2011 в 05:12

а почему у checkbox не работает <label>?

@kibizoidus 4 дек 2011 в 05:15

Хм… Скорее всего потому что я изначально решил отделить мух от котлет и не привязывать к checkbox'у функционал, который ему, по большому счету, не нужен. Но если кому-то будет так уж необходимо это в обязательном порядке — попробую сделать, не проблема.

@dmitriid 4 дек 2011 в 08:49

Ну, вообще-то, label является чуть ли не основным элементом чекбокса ;)

@kibizoidus 4 дек 2011 в 11:47

Возможно моя позиция действительно выглядит как банальное ламерство и незнание и я оговорился. Я знаю, что в стандартной реализации HTML у чекбокса есть label. И он там не зря, да. Просто я его решил сделать отдельным элементом GUILabel.

@dmitriid 4 дек 2011 в 11:50

Просто в случае с чекбоксами и радиокнопками label выполняет очень важную функцию с точки зрения юзабилити — расширяет поле, куда надо ткнуть, чтобы соответсвующий контрол сработал.

@kibizoidus 4 дек 2011 в 11:52

Хм… От этом я не подумал, спасибо. Обязательно добавлю.
ЭТо еще раз говорит о том, что каждый элемент нужно очень подробно изучать.

@dmitriid 4 дек 2011 в 11:54

В целом, это — стандартное поведение label'ов — переводить фокус на связаный элемент. То есть даже если label у текстбокса, то щелчок по такому label'у должен фокусировать текстбокс. Просто в случае с чекбоксами и радиокнопками это наиболее заметно.

@datacompboy 4 дек 2011 в 05:54

И у радиобатона надо бы как-нибудь отличие от чекбокса — кружок вместо квадратика

@datacompboy 4 дек 2011 в 05:55

И еще — почему нельзя ткнуть в какое-либо положение на слайдере чтобы туда поставить сразу, без дёрганья крутилки?

@datacompboy 4 дек 2011 в 05:55

и что за фигня появляется в текстарее по нажатию стрелок?! и где скроллбар? :D

@datacompboy 4 дек 2011 в 05:57

Скины не работают:

Uncaught exception: TypeError: Second argument to 'instanceof' does not implement [[HasInstance]]



Error thrown at line 142, column 8 in <anonymous function: FiveGUI.GUISlider.prototype.initializePathPoints>() in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISlider.js:

 if(img instanceof Image && img.complete)

called from line 191, column 4 in <anonymous function: FiveGUI.GUISlider.prototype.initialize>(parent) in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISlider.js:

 this.initializePathPoints();

called from line 139, column 8 in <anonymous function: FiveGUI.GUIRegion.prototype.bindSubElements>(defaults) in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIRegion.js:

 this.elements[b].initialize(this);

called from line 356, column 8 in <anonymous function: FiveGUI.GUI.prototype.addElement>(element) in fivegui.elhsmart.net.ru/js/FiveGUI/src/GUI.js:

 element.bindSubElements(this.defaults);

called from line 725, column 12 in fivegui.elhsmart.net.ru/skinned-dynamic.html:

 G.addElement(Region);

Uncaught exception: TypeError: Cannot convert 'window.jam' to object



Error thrown at line 229, column 15 in <anonymous function: Preload.callback>() in fivegui.elhsmart.net.ru/skinned-dynamic.html:

 window.jam.load();

called from line 219, column 20 in <anonymous function: image.onload>() in fivegui.elhsmart.net.ru/skinned-dynamic.html:

 window[window.preloaderName].callback();

@kibizoidus 4 дек 2011 в 06:01

Опера? Я об этом писал в P.S. Поправлю на днях.

@RedOctoberCZ 4 дек 2011 в 06:04

В IE8 не работает:

Сведения об ошибке на веб-странице



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 38

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUILabel.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 37

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUICheckbox.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 37

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIRadiobutton.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 41

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUITextfield.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 41

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIDropdown.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 36

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISelect.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 46

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUITextarea.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 6

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIWindow.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 43

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIOption.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 41

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUISlider.js



Сообщение: 'FiveGUI.GUILib' - есть null или не является объектом

Строка: 39

Символ: 1

Код: 0

URI-код: fivegui.elhsmart.net.ru/js/FiveGUI/src/GUIProgressbar.js



Сообщение: Предполагается наличие идентификатора, строки или числа

Строка: 337

Символ: 13

Код: 0

URI-код: fivegui.elhsmart.net.ru/skinned-dynamic.html

@Infernal 4 дек 2011 в 08:15

а вас не смутило слово canvas в заголовке?

@bO_oblik 4 дек 2011 в 06:08

Дропдаун не закрывается если ничего не выбирать и продолжать работу с интерфейсом.

@kibizoidus 4 дек 2011 в 11:44

Спасибо, на днях поправлю.

@szKarlen 4 дек 2011 в 06:13

в IE9 не работает.
пишет ошибку:

SCRIPT438: Объект не поддерживает это свойство или метод 

GFX.js, строка 93 символ 5

@kibizoidus 4 дек 2011 в 11:45

Спасибо, обязательно поковыряюсь и исправлю, если найду IE9

@homm 4 дек 2011 в 06:34

В Опере обе версии со скинами не работают.

@kibizoidus 4 дек 2011 в 11:45

Я уже даже знаю, в чем причина. Спасибо, поправлю.

@Demetros 4 дек 2011 в 08:08

Не считайте это за придирку, просто как вектор развития — работает из рук вон плохо на iOS и Android.

@kibizoidus 4 дек 2011 в 11:27

Спасибо, я вообще удивлен, что работает на iOS и Android. Как только найду доступ к телефонам с этими операционками — постараюсь исправить.

@Evengard 4 дек 2011 в 12:25

Ну для Андроида можно эмулятор скачать…

НЛО прилетело и опубликовало эту надпись здесь

@Evengard 4 дек 2011 в 15:40

Да ладно, для тестов можно и попользовать

@TheShock 4 дек 2011 в 15:47

Я не знаю. У меня не хватило терпения дождаться пока запуститься браузер. Пару раз уже пробовал.

@AotD 4 дек 2011 в 17:24

Проще на тот же VirtualBox поставить android. Быстро, дёшево и сердито =)

@TheShock 4 дек 2011 в 17:26

А как же тач-интерфейс?

@volandkh 4 дек 2011 в 09:00

В опере хуже всего работают кнопки. Но вообще интересно.

@q0p 4 дек 2011 в 09:25

То, что radiobutton не круглый, а квадратный как checkbox — это убого и не правильно.

@kibizoidus 4 дек 2011 в 11:32

Посмотрите внимательно пример. Вид радиобаттона 1. Можно достаточно легко изменить. 2. нет никаких проблем изменить ctx.moveTo() на ctx.bezierCurveTo() или, в графическом варианте, еще легче — картинку checkbox'a на картинку radiobutton'a. Все это достаточно легко делается, у меня просто не было необходимой графики.

@rPman 4 дек 2011 в 09:42

я немного недоумеваю…

но разве нельзя поверх канваса разместить html контролы? а дальше уже давно отточенными средствами css настроить внешний вид… зато не придется реализовывать функционал работы с языками (ввод текста, лево/право сторонний, модификаторы и т.п.) устройствами ввода (скролл мыши, сенсорный экран планшетников,..) и многое другое.

@kibizoidus 4 дек 2011 в 11:42

www.quirksmode.org/html5/inputs.html
На quirksmode где-то была статья сравнения, где как и какие элементы рендерятся. Так что если мне, к примеру, нужна будет кнопка ровно 100х20 пикселей с текстом по центру — все может быть плохо. Да и не хотелось JS перемешивать с css/html.

@asci 4 дек 2011 в 12:01

Я долго думал как же отрисовывать UI в игре на канвасе, и пришел к выводу, что наиболее производительным будет использование HTML элементов поверх канваса.

Простой текст на канвасе, может жрать до 30% нагрузки и вашем примере это видно, если начать быстро печатать в текстфилде

@kibizoidus 4 дек 2011 в 12:07

На самом деле сейчас просто не оптимизированы события. Я думаю, нагрузку там можно значительно уменьшить.

@asci 4 дек 2011 в 12:17

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

кроме того, UI статичен и HTML элементы будут органично смотреться (естественно если будут хорошо выполнены графически). А вот когда не годиться использовать HTML, так это когда элемент интерфейса внутри игры может закрываться границами (например контекстная подсказка/меню объекта)

НЛО прилетело и опубликовало эту надпись здесь

@kibizoidus 4 дек 2011 в 11:51

Почему же плохая? Любой GUI под DirectX/OpenGL изначально занимается плохой идеей и переписывает стандартные контролы (посмотрите тот же CeGUI или Guichan), Qt/GTK изначально тоже занимаются плохой идеей и переписывают стандартные контролы. Что уж там говорить, вид стандартных контролов в разных браузерах разный.

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

@Evengard 4 дек 2011 в 12:26

Qt переписывает? оО как раз у них контролы нативные (или выглядят нативными)

@mefcorvi 4 дек 2011 в 13:11

Раньше переписывали, судя по вики. Теперь же «Recent versions of Qt use the native style APIs of the different platforms to query the platform for the desired appearance of the Qt controls, and so do not suffer from such issues as much». Как я понимаю, и сейчас они используют не нативные контролы целевой платформы, но теперь их внешний вид запрашивается у системы. Надо исходники посмотреть.

@markoffko 4 дек 2011 в 12:36

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

@kibizoidus 4 дек 2011 в 13:01

Спасибо, проверю и поправлю.

@asci 4 дек 2011 в 17:57

На самом деле независимо от направления — глючит когда курсор уходит с подложки интерфейса

@Zibx 4 дек 2011 в 14:53

Текстэрия работает странно. Бэкспейс и стрелки вставляют проценты и делают странные вещи. FF8.

@kibizoidus 4 дек 2011 в 15:01

В других браузерах не пробовали? Скорее всего нужно вставить проверну на onkeypress, во время того, как отрабатывает onkeydown.

@f0rmat1k 4 дек 2011 в 15:35

На самом деле такие вещи надо делать на svg (ие способен показать через рафаель) либо вообще картинками. Сильная сторона канваса в динамике. Имхо

@TheShock 4 дек 2011 в 15:37

Такие вещи могут быть частью какого-то большего проекта на Canvas…

@kibizoidus 4 дек 2011 в 15:56

Как уже сказал товарищ выше, это может быть проблемой, если над элементом GUI нужно отрисовать часть логики проекта, или какой-то набор объектов.

В общем, лучше иметь удобный GUI внутри canvas'a и использовать его как подобие 2D-слоя видеокарты, чем городить над канвасом стандартные элементы или сращивать canvas+svg.

@TheShock 4 дек 2011 в 15:36

Не без багов, но найс. Жаль, что не как плагин для LibCanvas, я бы использовал =)

@kibizoidus 4 дек 2011 в 15:58

Спасибо, ждал твоего комментария. Баги постараюсь в ближайшее время поисправлять, да, х таки очень много, нельзя было в таком состоянии показывать. А вот сделать порт под LibCanvas — это идея, да. И это не так уж сложно, попробую форкнуть и озадачиться портированием.

@TheShock 4 дек 2011 в 16:01

Та не. Кроме проблемы с Оперой (ох уж эта Опера) и Эксплорером (ох уж этот Эксплорер) остальные баги не так страшны даже для продакшна.

@TheShock 4 дек 2011 в 16:03

Кстати, основная проблема далеко не в том, чтобы «просто прикрутить его к приложению». Самое важное — это заставить его корректно работать с другими объектами на странице. Чтобы не проваливались события сквозь кнопки, чтобы их было легко показать и убрать. И так далее.