Спидометр на JS. Как проще реализовать?

Question

[Lorrenzo]

Господа, наверняка кто-то сталкивался с подобной задачей. Хотелось бы узнать, как можно сверстать подобный спидометр на JS (можно с помощью jQuery). Видел реализацию с Canvas, но в нём не силён, поэтому хотелось бы сделать попроще.

Сегменты круга и стрелка в PS даны виде шейпов, т.е. можно сохранить их в SVG. Числовой результат должен анимироваться. Примеры кода можно не показывать, достаточно было бы небольшой последовательности шагов, дабы просто понять суть, либо ссылки на tutorial с чем-то похожим.

Answer 1

[Андрей Хохлов]

Если уж совсем просто, то:
1. Вставляем шкалу как картинку
2. Вставляем стрелку картинкой, причем с центром в месте "крепления" стрелки
3. Просто крутим картинку свойством transform на нужный градус.

4. Плавно изменяем текст в блоке с числами, tween.js какой-нибудь можно взять.
5. Придумываем как сделать зависимость значения скорости и угла поворота картинки со стрелкой.

Comments

[Lorrenzo]

Спасибо!

Answer 2

[xmoonlight]

https://github.com/hongkiat/svg-meter-gauge

Comments

[Lorrenzo]

Благодарю!

Answer 3

[GreatRash]

Пропорции в школе учили? 4 или 5 класс, если не ошибаюсь.

180° = 100%
30°  = x%

=>

180 * x = 30 * 100
x = (30 * 100) / 180
x ~= 16.7°

Далее трансформ ротэйт на нужное кол-во градусов.

Answer 4

[SKRSKR]

можно записать на видео как надо и потом рендерить в ffpmji на сервере в реальном времени с ускорением или замедлением и передавать видео поток клиенту

Answer 5

[rvpyrv]

Решение есть?