Создание PDF средствами PHP. Часть 1

Класс FPDF является чистым PHP кодом и легко подключается к скриптам командой include() или require(). Скачать класс и ознакомиться с документацией (в том числе на русском языке) можно на сайте www.fpdf.org.

Основная проблема при использовании класса — файлы кириллических шрифтов. Одним из основных форматов шрифтов является TTF (True Type Font). Но для правильной работы FPDF необходим и еще один формат — AFM (файл метрики шрифта). В этом нам поможет утилита ttf2pt1, которая позволяет создать файл метрики для True Type.

Запускаем утилиту из командной строки (Пуск->Выполнить->cmd):

C:\ttf2pt1 -A C:\fonts\arial.ttf arial

где ключ -A указывает на необходимость сформировать файл AFM, C:\fonts\arial.ttf — адрес файла True Type шрифта и, наконец, arial — это имя файла метрики.

Следующий шаг — генерация файла описания шрифта. Вместе с классом FPDF поставляется скрипт font/makefont/makefont.php для решения этой задачи. Использовать его просто. Для этого создаем РНР файл (скажем, mf.php):

<?php
require('font/makefont/makefont.php');
MakeFont('arial.ttf','arial.afm','cp1251');
MakeFont('arialbd.ttf','arialbd.afm','cp1251');
MakeFont('ariali.ttf','ariali.afm','cp1251');
MakeFont('arialbi.ttf','arialbi.afm','cp1251');
?>

Функция MakeFont имеет следующий формат:

MakeFont(string fontfile, string afmfile [, string enc [, array patch [, string type]]])

где fontfile — путь к TTF или PFB файлу, afmfile — путь к AFM файлу, enc — имя используемой кодировки (по умолчанию это cp1252), patch — опциональное изменение кодировки и type — тип шрифта (по умолчанию True Type).

Запустив скрипт mf.php в браузере, получим файлы arial.php, arialbd.php, ariali.php, arialbi.php и arial.z, arialbd.z, ariali.z, arialbi.z. Все эти файлы вместе с файлами arial.ttf, arialbd.ttf, ariali.ttf, arialbi.ttf надо поместить в директорию font класса. Впрочем, можно самому указать директорию, которая будет хранить шрифты. Для этого нужно определить константу FPDF_FONTPATH:

define('FPDF_FONTPATH','font/');

Продолжение следует…

Создание зеркального отражения для изображений

Скрипт reflection.js позволяет добавлять эффект зеркального отражения к изображениям на странице. Результат выглядит следующим образом:

Подключаем скрипт reflection.js в разделе head HTML-страницы

<script src="reflection.js" type="text/javascript"></script>

а для изображений добавляем класс reflect

<img src="image.jpg" class="reflect" alt="" />

По умолчанию размер зеркального отражения равен половине высоты изображения, а уровень прозрачности равен 50%. Чтобы изменить эти параметры, нужно добавить классы rheight и ropacity со значениями высоты и прозрачности:

<img src="image.jpg" class="reflect rheight40 ropacity60" alt="" />

Зеркальным отражением можно управлять из скрипта:

  • добавить или изменить существующее отражение; height и opacity могут принимать значения от 0 до 1
Reflection.add(document.getElementById("imageID"), { height: 3/4, opacity: 2/3 });
  • удалить существующее зеркальное отражение
Reflection.remove(document.getElementById("imageID"));
  • изменить значения по умолчанию для высоты и прозрачности отражения; по умолчанию оба равны 0.5
Reflection.defaultHeight = height;
Reflection.defaultOpacity = opacity;

Слайдшоу с анимацией: плагин CrossSlide для jQuery

CrossSlide - jQuery плагин для демонстрации слайдшоу с эффектами анимации, которые доступны только в Adobe Flash. Посмотреть, как это работает, можно здесь. Как обычно, подключаем библиотеку jQuery и плагин в разделе head HTML-документа:

<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.cross-slide.js' type='text/javascript'></script>

Размещаем на странице div-элемент, который будет служить контейнером для элементов, участвующих в слайд-шоу:

<div id='test1'>Loading...</div>

CSS:

#test1 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 550px;
    height: 200px;
}

JavaScript:

$(function() {
  $('#test1').crossSlide({
    speed: 45, //in px/sec
    fade: 1    //in sec
  }, [
    { src: 'images/sand-castle.jpeg', dir: 'up'   },
    { src: 'images/sunflower.jpeg',   dir: 'down' },
    { src: 'images/flip-flops.jpeg',  dir: 'up'   },
    { src: 'images/rubber-ring.jpeg', dir: 'down' }
  ]);
});

Здесь

  • speed - скорость движения картинки, пикселей в секунду
  • fade - продолжительность эффекта перехода при смене картинок
  • src - адрес файла с картинкой
  • dir - направление движения картинки (’up’, ‘down’, ‘left’ или ‘right’)

Кроме перечисленных, плагин поддерживает множество других опций.