Добрый день, хабровчане!Сегодня я хочу поделиться своей небольшой разработкой, которую я делал для одного из своих проектов. На самом деле, в сети множество реализаций gauge, как платных, так и бесплатных. Но найти хоть одно решение с использованием именно canvas мне не удалось, поэтому было принято решение написать свое.
Почему именно canvas?
Во-первых, это работает во всех современных браузерах. Во-вторых — это таки работает на мобильных платформах Android и iOS без ограничений. Тот же SVG, к примеру не работает по-умолчанию на Android 2.x, а Flash не работает в iOS.
Код CanvGauge можно забрать здесь. Там же можно найти небольшое описание API. А здесь посмотреть пример работы.
При использовании вам не нужны никакие сторонние библиотеки. Код распространяется по лицензии MIT, можете спокойно забирать, модифицировать, улучшать/ухудшать, делиться своими дополнениями и наработками. С радостью приму хорошие коммиты в свой репозиторий. Буду признателен за найденные баги и интересные предложения. К сожалению, я не художник, поэтому внешний вид, возможно, не идеален. Если кто-то может помочь с наведением «красоты» — welcome!
Особенности «из коробки»
Gauge относительно легко кастомизируется. Можно задавать параметрически цвета элементов прибора, его размер, шкалы градаций, заголовок и единицы измерения. Доступны различные функции анимации стрелки, а также есть возможность внедрять свою функцию анимации «на лету».
