Всем привет! Сегодня я расскажу Вам, как создавать динамически такую картинку, как выше с использованием PHP. Все наверное задумывались, как такое реализовать. Мне кажется, если очень хорошо подумать, то нам на ум придет новая технология, которая сейчас внедряется, особенно с приходом HTML5. Это, как наверное многие уже догадались — SVG. Для тех, кто не знает, по сути, это — всего-лишь обыкновенная картинка, но записанная в виде подобия XML. Картинку можно получить двумя способами: нарисовать самому например в Inkscape или скачать уже готовую. Я воспользуюсь вторым методом, так как ни времени, ни художественного таланта у меня нет. Я буду делать на примере личных сообщений/почты, поэтому мне понадобяться две картинки, первая — сообщений нет, вторая — мы имеем некоторое количество новых сообщений. Скачаем картинки вот тут. old.svg — сообщений нет, new.svg сообщение есть.
Итак, перейдем к реализации. Нам понадобиться:
- Некоторые знания PHP и HTML
- Понимание, что такое шаблонизатор
- Понимание, что такое SVG
Качаем вот отсюда шаблонизатор.
Как работает шаблонизатор? Работает он довольно легко. Указываем классу шаблон, инициализируем переменные, парсим, получаем готовый к выводу код.
Если в коде, то работает примерно так:
require_once('template.php'); // Подключаем шаблонизатор
$var = "Text";
$tpl->get_tpl('file.html');
$tpl->set_value('Var',$var);
$tpl->tpl_parse();
Таким же образом мы и будем работать с нашими картинками. Для начала откроем каринку new.svg например в блокноте. Найдем в самом конце файла строки:
<tspan
sodipodi:role="line"
id="tspan5273"
x="71.75"
y="11.791">1</tspan>
И поменяем на:
<tspan
sodipodi:role="line"
id="tspan5273"
x="71.75"
y="11.791">{MSG}</tspan>
Этими действиями мы добавили переменную в шаблон. Теперь, когда у нас есть шаблон картинки, мы переходим к самой функцией. Перед написанием, нужно осознавать, что у нас две картинки и нам нужно подумать какую вывести в зависимости от значения переменной. Потом подставить это значение в шаблон и получим простенький код:
// Подключаем шаблонизатор
require_once('template.php'); // Подключаем шаблонизатор
$number = 1;
if ($number == 1){ // Новое сообщение
$tpl->get_tpl('imgs/new.svg');
$tpl->set_value('MSG',$number);
$tpl->tpl_parse();
echo $tpl->html;
}
else{ // Сообщений нет
$tpl->get_tpl('imgs/old.svg');
$tpl->tpl_parse();
echo $tpl->html;
}
Учтем, что картинки лежат в поддериктории imgs, а шаблонизатор рядом со скриптом, в котором он подлючается.
Вот и все! Простое решение, простой проблемы.
P.S: Простите за картинку new.svg. Рисовать не умею, если не понравиться подправьте.