Как сделать спидометр на js с получением данных с сервера(php)?

Question

[Max Payne]

Не нужно выкладывать готовое решение -- подскажите мысль.

Answer 1

[Евгений Калибров]

1. Взять готовую картинку со шкалой спидометра.
   
2. Взять картинку со стрелкой, png с прозрачным фоном
   
3. Повернуть картинку со стрелкой php скриптом на нужный угол, в зависимости от значения.
   
4. Наложить картинку стрелки по верх картинки со шкалой.
   
5. Добавить на картинку текстом нужные значения
   
6. Сохранить полученное изображение
   

Comments

[Max Payne]

Всё это понятно -- кроме третьего пункта :) Именно по этой причине я и интересуюсь.

[Евгений Калибров]

Функция imagerotate.
Но тут ещё либо по какой-то формуле рассчитывать положение картинки, кроме его угла.
Либо я бы сделал так, взял картинку со стрелкой такого размера, что бы её основание с низу как бы всегда в одной точке было фиксировано, пусть та область стрелки что находится ниже шкалы будет просто прозрачной визуально, но по высоте картинки она как бы есть и вращать картинку всегда относительно этой фиксированной точки.

[Max Payne]

rework: Хорошо, спасибо.

Answer 2

[index0h]

Если одним словом: геморно.
У вас должен быть уже готовый фон (без стрелки и цифр).
Отдельно изображение стрелки с черным кругом над ней. И центром в этом круге.
Отдельно изображение свечения над черным кругом (тот который над стрелкой).
--
При рендеринге:
Стрелку с кругом повернуть на рассчитанный градус шкалы.
У изображения свечения позиция фиксированная, у заднего плана тоже.
Цифры отрендерить в изображение и уже его спозиционировать по горизонтали и вертикали.

Как-то так.

Answer 3

[George Jr]

Так проще)

Comments

[Max Payne]

Мне нужно это реализовать именно на PHP -- для юзербара.

Answer 4

[Оптимус Пьян]

Сам спидометр делается на JS а не на PHP

Comments

[Max Payne]

Сделать подобный спидометр изображением на PHP -- так правильней поставить вопрос.

Answer 5

[Александр Евгеньевич]

Пользуй Imagick