Рисование половинного датчика / спидометра (необходим пример JavaScript Canvas или Java Swing)
У кого-нибудь есть холст javascript или пример java swing?
Примерно так: http://www.fmsinc.com/microsoftaccess/controls/components/gauges/gauge-half.gif
Как мне нарисовать линии "разделитель"?
5 ответов
Если вам нужен простой датчик на основе холста JavaScript, вы можете использовать небольшую библиотеку, которую я создал сам. Он прост в использовании и имеет конфигуратор wyswig для простой настройки датчика. Я отправил его на GitHub по адресу http://bernii.github.com/gauge.js
Небольшой предварительный просмотр того, что вы можете получить:
Я рекомендую заглянуть в графическую библиотеку Raphael Javascript. Он работает во всех браузерах (включая старые версии IE!) И использует векторную графику, поэтому создаваемая графика масштабируется и вращается без потери качества изображения и даже включает в себя функции анимации.
Вот ссылка на парня, который использовал Рафаэля для производства очень хороших датчиков: http://techoctave.com/c7/posts/17-jquery-dashboard-gauges-using-raphael-xhtml-and-css
Но если вы хотите нарисовать свой собственный, это не должно быть трудно сделать с помощью Рафаэля: у него есть способность рисовать циклы и формы, а также анимировать их. Нечто похожее на ваш пример не должно быть трудным для достижения.
Вот пример кода, который я быстро собрал в качестве примера:
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var gauge = Raphael('mydiv', 200, 100);
var semicircle = gauge.circle(100, 100, 100).attr({"fill": "#FF0000"});
var indicator = gauge.rect(0, 99, 100, 2);
indicator.animate({rotation: "30 100 100"}, 1000, "<>");
</script>
....
<div id='mydiv'></div>
Я протестировал этот код, и он выдает рабочий диск. Это не так красиво, как, скажем, в другом примере, который я привел выше, но он не использует никакой внешней графики и полностью сделан с использованием Javascript. Единственная внешняя зависимость - это библиотека Рафаэля.
Очевидно, что потребуется некоторая работа по его улучшению, чтобы сделать его пригодным для использования в вашем сценарии, но это должно быть довольно хорошим началом для вас.
Надеюсь, это поможет.
[РЕДАКТИРОВАТЬ]
Вышеприведенный скрипт работает на Raphael v1.5. Однако Raphael v2 немного меняет синтаксис.
Строка для анимации должна использовать новый transform синтаксис, а не устарел rotate синтаксис. Таким образом, отредактированная строка будет выглядеть следующим образом:
indicator.animate({transform: "r30,100,100"}, 1000, "<>");
Остальная часть кода остается такой же, как указано выше.
См. Руководство Raphael для получения дополнительной информации о синтаксисе transform функция.
Этот калибр либ хорошо выглядеть и хорошо работать
Вы видели этот компонент датчика с открытым исходным кодом? Есть около 10 различных стилей, которые вы можете использовать.
Для Swing взгляните на SteelSeries с открытым исходным кодом (разработанный Gerrit Grunwald, псевдоним @hansolo). Он содержит много типов красивых датчиков (и других забавных компонентов).