Всем привет. Я не выдержал и решил поделиться со всеми тем, чем сейчас более-менее активно занимаюсь.
Примерно месяц назад я продолжил экспериментировать с Canvas'ом и зачем-то мне понадобилась кнопочка. Да, самая обычная кнопочка, которую можно было бы затолкать на страничку обычным тегом, но это ведь не путь истинного самурая. В итоге были обшарены все закрома github'a и gitorious'a, гугл затерт до дыр, а подходящего инстумента так и не нашлось. Разве что libCanvas хвастался подобными примерами… Но их я обнаружил уже после начала работы, так что решил не забрасывать.
В общем и целом FiveGUI — это набор виджетов графического интерфейса, который позволяет отрисовывать на canvas'e красивые кнопочки, слайдеры, кусочки текста и прочие плюшки обычных интерфейсов, при этом совершенно не ломая логику работы того, что уже отрисовывается на нашей канве. Все, что нужно для начала работы — это создать на странице объект GUI, прибить его к существующей канве, добавить к нему элементов и вызвать метод .draw(). Примерно вот так:
В итоге получим блок с кнопочкой. На страничке библиотеки так же есть пример, как заставить кнопочку выполнять какие-то полезные действия.
Прошу прощения за отсутствие внятной документации и толкового howto. В самое ближайшее время постараюсь все это закончить, но такак сами исходники сейчас в довольно сыром состоянии (так и не удалось добиться работы с Опере, IE даже не смотрел, т.к. не на чем) — адеюсь все это сделать как можно быстрее не в ущерб всему остальному.
На текущий момент есть достаточно полные реализации кнопок, чекбоксов и радиобоксов, есть однострочное и многострочное поля для ввода текста, есть списки, как выпадающие, так и плоские. Так же есть идикатор прогресса и слайдер.
Конечно недочетов еще очень много и библиотека настолько далека от серьезного использования, что даже и заикаться не хочется. Например, в текстовых полях нельзя выделить текст и клацнуть мышью в случайное место набранного текста, и сам текст в Label'ах в том же FF и Chrome заметно отличается… И это далеко не все, что даже я успел заметить. Но я надеюсь не забрасывать библиотеку на полку и буду стараться ее развивать по мере сил и возможностей.
В общем, если она окажется для вас полезным и приятным дополнением во время экспериментов с canvas'ом — я буду очень рад.
Работающие примеры можно посмотреть здесь:
http://fivegui.elhsmart.net.ru
Github:
https://github.com/elhsmart/FiveGUI
P.S. Как я отмечал выше — стабильно работает в последних версиях FF и Chrome. IE9 у меня нет (если кто может проверить — пожалуйста, расскажите мне, что там происходит), а Oper'у еще не довел до ума.
P.S.S. Вся графика в примерах заимствована из игры Battle for Wesnoth. Надеюсь, ребята на меня не будут сильно обижаться, ибо дизайнер интерфейсов из меня никакущий и попытки нарисовать красивую кнопочку были бы долгими, болезненными и мучительными.
Примерно месяц назад я продолжил экспериментировать с Canvas'ом и зачем-то мне понадобилась кнопочка. Да, самая обычная кнопочка, которую можно было бы затолкать на страничку обычным тегом, но это ведь не путь истинного самурая. В итоге были обшарены все закрома github'a и gitorious'a, гугл затерт до дыр, а подходящего инстумента так и не нашлось. Разве что libCanvas хвастался подобными примерами… Но их я обнаружил уже после начала работы, так что решил не забрасывать.
В общем и целом FiveGUI — это набор виджетов графического интерфейса, который позволяет отрисовывать на canvas'e красивые кнопочки, слайдеры, кусочки текста и прочие плюшки обычных интерфейсов, при этом совершенно не ломая логику работы того, что уже отрисовывается на нашей канве. Все, что нужно для начала работы — это создать на странице объект GUI, прибить его к существующей канве, добавить к нему элементов и вызвать метод .draw(). Примерно вот так:
<html>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
<script>
G = new FiveGUI.GUI({
canvas: "canvas",
fontColor: "#fff"
});
Region = new FiveGUI.GUIRegion({
x: 50,
y: 50,
width: 400,
height: 325,
});
Button = new FiveGUI.GUIButton({
x: 10,
y: 30,
width: 108,
height: 22,
caption: "GUIButton",
value: null,
borderWidth: 2,
borderColor: "#aaa",
hoverBorderColor: "#ccc",
clickBorderColor: "#eee"
});
Region.addElement(Button);
G.addElement(Region);
G.drawGUI();
</script>
</html>
В итоге получим блок с кнопочкой. На страничке библиотеки так же есть пример, как заставить кнопочку выполнять какие-то полезные действия.
Прошу прощения за отсутствие внятной документации и толкового howto. В самое ближайшее время постараюсь все это закончить, но такак сами исходники сейчас в довольно сыром состоянии (так и не удалось добиться работы с Опере, IE даже не смотрел, т.к. не на чем) — адеюсь все это сделать как можно быстрее не в ущерб всему остальному.
На текущий момент есть достаточно полные реализации кнопок, чекбоксов и радиобоксов, есть однострочное и многострочное поля для ввода текста, есть списки, как выпадающие, так и плоские. Так же есть идикатор прогресса и слайдер.
Конечно недочетов еще очень много и библиотека настолько далека от серьезного использования, что даже и заикаться не хочется. Например, в текстовых полях нельзя выделить текст и клацнуть мышью в случайное место набранного текста, и сам текст в Label'ах в том же FF и Chrome заметно отличается… И это далеко не все, что даже я успел заметить. Но я надеюсь не забрасывать библиотеку на полку и буду стараться ее развивать по мере сил и возможностей.
В общем, если она окажется для вас полезным и приятным дополнением во время экспериментов с canvas'ом — я буду очень рад.
Работающие примеры можно посмотреть здесь:
http://fivegui.elhsmart.net.ru
Github:
https://github.com/elhsmart/FiveGUI
P.S. Как я отмечал выше — стабильно работает в последних версиях FF и Chrome. IE9 у меня нет (если кто может проверить — пожалуйста, расскажите мне, что там происходит), а Oper'у еще не довел до ума.
P.S.S. Вся графика в примерах заимствована из игры Battle for Wesnoth. Надеюсь, ребята на меня не будут сильно обижаться, ибо дизайнер интерфейсов из меня никакущий и попытки нарисовать красивую кнопочку были бы долгими, болезненными и мучительными.