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



Примерно месяц назад я продолжил экспериментировать с 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. Надеюсь, ребята на меня не будут сильно обижаться, ибо дизайнер интерфейсов из меня никакущий и попытки нарисовать красивую кнопочку были бы долгими, болезненными и мучительными.