@Lorrenzo

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

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

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

8d82a8d2135c443e85b67948e26c80b1.jpg
  • Вопрос задан
  • 4576 просмотров
Решения вопроса 2
Если уж совсем просто, то:
1. Вставляем шкалу как картинку
2. Вставляем стрелку картинкой, причем с центром в месте "крепления" стрелки
3. Просто крутим картинку свойством transform на нужный градус.
268956b08b954c1ca7d145cef2314fa2.png
4. Плавно изменяем текст в блоке с числами, tween.js какой-нибудь можно взять.
5. Придумываем как сделать зависимость значения скорости и угла поворота картинки со стрелкой.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@GreatRash
Пропорции в школе учили? 4 или 5 класс, если не ошибаюсь.

180° = 100%
30°  = x%

=>

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

Далее трансформ ротэйт на нужное кол-во градусов.
Ответ написан
Комментировать
@SKRSKR
можно записать на видео как надо и потом рендерить в ffpmji на сервере в реальном времени с ускорением или замедлением и передавать видео поток клиенту
Ответ написан
Комментировать
@rvpyrv
Решение есть?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы