Dynamic Sprite Framework с PHP

11 января 2018

В этом учебнике по Nettuts + PLUS вы узнаете, как создать динамический «Image Sprite Framework» из набора значков по вашему выбору. Структура будет состоять из изображения спрайтов, таблицы стилей спрайтов, имена и свойства которых соответствуют значкам внутри нашего спрайт-изображения, а также страницу предварительного просмотра HTML, в которой мы можем использовать краткое справочное руководство по структуре.

«Dynamic Sprite Framework» позволит вам использовать любой значок из спрайта, указав его относительное имя класса, которое будет напрямую соответствовать имени файла значка.

В конце этого урока вы должны чувствовать себя комфортно, создавая динамические спрайты изображений самостоятельно и должны быть в состоянии реализовать и в полной мере воспользоваться многими преимуществами, предоставляемыми этой системой.

Прокрутите страницу вниз, чтобы найти полный превью!


Сбор информации

Чтобы создать спрайт изображения, нам сначала нужно собрать некоторую базовую информацию. Для начала нам нужно знать следующее:

Каталог, содержащий значки, которые мы хотели бы использовать для спрайта, - с завершающей косой чертой в конце. Ширина значков. Высота значков. Х-смещение, которое мы хотели бы для каждого значка - это будет их горизонтальное расстояние. Умещение смещения, которое мы хотели бы для каждого значка - это их вертикальное расстояние. Тип изображения для значков - png, gif или jpgn. Многие значки, которые мы хотели бы отображать в строке в нашем спрайте. целевой каталог для нашего спрайта - с конечной косой чертой в конце. Название цели для нашего нового спрайта.

. Мы собираемся создать HTML-страницу с простой ФОРМ для сбора этих данных. Давайте посмотрим на эту ФОРМУ:

<!doctype html> 
<html lang="en">
<head>
     <title>Sprite Builder</title>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="main.css">
</head>
    <body>
         <div id="content">
               <form action="sprite_builder.php" method="POST">
                    <fieldset>
                         <legend>Sprite Builder</legend>
                         <label for="icon_source" class="label">Image Directory:</label>
                         <input id="icon_source" class="ui-corner-all" type="text" name="icon_source" value="">
                         <label for="icon_width" class="label">Icon Width:</label>
                         <input id="icon_width" class="ui-corner-all" type="text" name="icon_width" value="">
                         <label for="icon_height" class="label">Icon Height:</label>
                         <input id="icon_height" class="ui-corner-all" type="text" name="icon_height" value="">
                         <label for="x_offset" class="label">Icon X Offset:</label>
                         <input id="icon_width" class="ui-corner-all" type="text" name="x_offset" value="">
                         <label for="y_offset" class="label">Icon Y Offset:</label>
                         <input id="y_offset" class="ui-corner-all" type="text" name="y_offset" value="">
                         <div class="radio">
                              <label for="icon_type" class="label">Image Type:</label>
                              <div class="radioWrap"><input type="radio" name="icon_type[]" value="png">PNG</div>
                              <div class="radioWrap"><input type="radio" name="icon_type[]" value="jpg">JPEG</div>
                              <div class="radioWrap"><input type="radio" name="icon_type[]" value="gif">GIF</div>
                         </div><!-- DIV.radio -->
                         <label for="icons_per_row" class="label">Icons per Row:</label>
                         <input id="icons_per_row" class="ui-corner-all" type="text" name="icons_per_row" value="">
                         <label for="target_directory" class="label">Target Directory:</label>
                         <input id="target_directory" class="ui-corner-all" type="text" name="target_directory" value="">
                         <label for="target_name" class="label">Target Name:</label>
                         <input id="target_name" class="ui-corner-all" type="text" name="target_name" value="">
                         <button type="submit">Submit</button>
                    </fieldset>
               </form>
          </div>
    </body>
</html>

Как вы можете видеть выше, мы создали простую страницу HTML5 с FORM.

ФОРМА ОТПРАВЛЯЕТ свои результаты на нашу страницу sprite_builder.php.

У самой FORM есть девять полей для сбора необходимой нам информации:

icon_sourcenicon_widthnicon_heightnx_offsetny_offsetnicon_typenicons_per_rowntarget_directoryntarget_name


Подготовка наших данных

1. Проверка массива POST

Теперь, когда у нас есть наша ФОРМА, мы будем способный собрать все необходимые нам данные...

В нашем PHP мы начнем с проверки наличия всех полей FORM со значением.

Если какой-либо из VALUES не установлен, мы просто перенаправим пользователя обратно на страницу FORM.

Обратите внимание, что в производственной среде вы захотите закрепить эту ФОРМУ еще раз и предоставить некоторую обратную связь пользователю.

Теперь создадим новый php-файл с именем «sprite_builder.php» и отметьте, чтобы все поля FORM, которые мы указали, были отправлены с VALUE.

<?php 
    if (isset($_POST['icon_source']) &&isset($_POST['icon_width']) &&isset($_POST['icon_height']) &&isset($_POST['icon_type']) &&isset($_POST['icons_per_row']) &&isset($_POST['target_directory']) &&isset($_POST['target_name']))
    {
     }
     else
     {
          header('Location: http://localhost/Sprite/index.html');
     }

2. Санитаризация

Если выполнено вышеописанное условие, то есть все элементы в массиве POST имеют значение, мы будем санировать и готовить эти значения VALUES.

Давайте создадим функцию для подготовки наших данных для нас.

function prep($post) 
{
     $post = htmlspecialchars(trim($post));
     return $post;
}

Функция prep () выполняет следующие действия:

htmlspecialchars - все данные, переданные функции «prep», будут иметь «ключевые» HTML-теги, любые символы внутри которых преобразуются в HTML-сущностиtrim. Затем мы обрезаем все пробелы с начала и конца string

3. Построение массива с нашими подготовленными данными

Мы будем готовить данные из нашего массива POST при построении нового массива «спрайт» с этими предварительно подготовленными значениями.

Во-первых, мы инициализируем наш массив спрайтов.

Затем мы начнем повторять все массивы array_keys для массива POST.

При повторении с помощью ключей массива POST мы проверим, что каждое значение POST VALUE является строкой.

Если VALUE является строкой, мы добавим ее в наш массив спрайтов, используя ключ массива, так как это имя в массиве спрайтов.

После этого цикла foreach мы будем хранить наш «выходной путь» в массиве «спрайт».

Мы определим 'output_path', объединив var 'target_directory' с переменной 'target_name' var.

Обратите внимание, что мы не будем добавлять расширение файла здесь, мы это определим позже.

Поскольку поле «icon_type» FIELD является массивом, мы будем проходить через него, чтобы получить предоставленное значение VALUE, а затем запустить это значение через нашу функцию prep () и добавить его в наш массив спрайтов.

Затем мы инициализируем массив «icon_name», который будет содержаться в нашем массиве спрайтов.

Примечание. Мы будем строить массив «icon_name» после того, как мы открыли и читаем целевой каталог...

<?php 
     function prep($post)
     {
          $post = htmlspecialchars(trim($post));
          return $post;
     }
    if (isset($_POST['icon_source']) &&isset($_POST['icon_width']) &&isset($_POST['icon_height']) &&isset($_POST['icon_type']) &&isset($_POST['icons_per_row']) &&isset($_POST['target_directory']) &&isset($_POST['target_name']))
    {
          $sprite = array();
          $array_key = array_keys($_POST);
          foreach($array_key as $key)
          {
               if(is_string($_POST[$key]))
               {
                    $sprite[$key] = prep($_POST[$key]);
               }
          }
          $sprite['path'] = $sprite['target_directory'].$sprite['target_name'];
          foreach($_POST['icon_type'] as $key => $value)
          {
               $sprite['icon_type'] = prep($value);
          }
          $sprite['icon_name'] = array();
     }
     else
     {
          header('Location: http://localhost/Sprite/index.html');
     }

4. Получение и добавление правильных имен изображений в наш массив

Теперь, когда мы построили массив, который содержит все значения из массива POST, мы создадим массив имен изображений.

Вот что мы будем делать в следующих нескольких строках кода:

Начнем, открыв каталог значков, указанный в нашем FORM.nТогда мы установим общее количество изображений в ноль и как мы прочитайте этот каталог, добавив имена изображений в наш массив, мы увеличим это значение для каждого из них. Это даст нам общее количество изображений в нашем каталоге array.ext, мы прочитаем каталог, используя простой while loopnWhile, читающий каталог, мы получим информацию о пути для каждого файла и проверим его расширение. Мы преобразуем расширение в нижний регистр и сравним его с «image_type», указанным в Sprite Builder FORMnIf, если совпадают расширения, мы снова будем использовать path_info, чтобы получить имя файла изображения и добавить его в наш массив «icon_name». Затем мы увеличим количество наших значков на 1.nOnce, когда мы закончили чтение содержимого этого каталога, мы отсортируем массив «icon_name» в алфавитном порядке и добавим общую сумму значков в наш массив спрайтов.

$sprite_directory = opendir( $sprite['icon_source'] ); 
$image_total = 0;
while ($file_name = readdir( $sprite_directory ))
{
     $path_info = pathinfo( $file_name );
     if ( strtolower($path_info['extension']) === $sprite['icon_type'] )
     {
          $sprite['icon_name'][] = $path_info['filename'];
          $image_total++;
     }
}
sort($sprite['icon_name']);
$sprite['icon_total'] = $image_total;

С полным массивом «спрайт» мы можем перейти к созданию нашего объекта «sprite_builder».


Объект строителя Sprite

1. Обзор объекта

Чтобы делать то, что мы хотели бы сделать упорядоченным и эффективным образом, мы собираемся создать объект.

Этот объект будет делать три вещи:

Create image spritenCreate CSS-файл для спрайт-изображения с классами и фоновыми позициями, соответствующими отдельным именам и местоположениям пиктограмм в spritenСоздание страницы предварительного просмотра HTML для спрайта и соответствующего CSS rules

2. Построение нашего объекта

Первое, что мы сделаем, это определить наш класс объектов и его свойства.

Поскольку мы работаем только с одним объектом, и нам не нужно получать доступ к каким-либо его свойствам вне класса, мы сделаем их частными.

class Sprite_builder 
{
     private $icon_source;
     private $icon_width;
     private $icon_height;
     private $icons_per_row;
     private $target_directory;
     private $target_name;
     private $path;
     private $icon_type;
     private $icon_total;
     private $icon_name;
     private $x_offset;
     private $y_offset;
}

3. Конструктор классов

Теперь мы создадим наш конструктор классов.

Внутри нашего конструктора мы определим каждый из свойств нашего объекта, используя соответствующие значения в нашем массиве спрайтов.

Это сделает все эти свойства доступными для каждого метода внутри нашего класса.

class Sprite_builder 
{
     private $icon_source;
     private $icon_width;
     private $icon_height;
     private $icons_per_row;
     private $target_directory;
     private $target_name;
     private $path;
     private $icon_type;
     private $icon_total;
     private $icon_name;
     private $x_offset;
     private $y_offset;
     function Sprite_builder($sprite)
     {
          $this->icon_source= $sprite['icon_source'];
          $this->icon_width= $sprite['icon_width'];
          $this->icon_height= $sprite['icon_height'];
          $this->icons_per_row= $sprite['icons_per_row'];
          $this->target_directory= $sprite['target_directory'];
          $this->target_name= $sprite['target_name'];
          $this->path= $sprite['path'];
          $this->icon_type= $sprite['icon_type'];
          $this->icon_total= $sprite['icon_total'];
          $this->icon_name= $sprite['icon_name'];
          $this->x_offset= $sprite['x_offset'];
          $this->y_offset= $sprite['y_offset'];
     }
}

Стоит повторять: мы определяем каждое свойство с его соответствующим значением в массиве спрайтов: исходный каталог, ширина значка, высота, смещение x и т. Д....


Sprite Builder Method One - Создание спрайта

1. Обзор метода

Нашим первым методом будет функция create_sprite ().

Этот метод создаст новый спрайт, состоящий из всех допустимых изображений, указанных в нашем массиве 'image_name'.

Вот общий обзор шагов, которые мы предпримем для достижения этого:

Первая, мы определим свойства x_position и y_position. Эти свойства будут определять положение значка вдоль оси x и y соответственно. Мы будем использовать настройки «x_offset» и «y_offset», указанные в нашем Sprite Builder FORM.ext, мы установим наш «icon_per_row_count» равным 0. Мы увеличим это на 1 для каждого значка, добавляемого в spriteow, используя данные мы можем получить из спрайта Formite Builder, мы вычислим общую высоту и ширину для нового изображения spriten. При заданных размерах спрайта мы создадим «базовый» образ: First, мы создадим «общий» образ, используя команда imagecreatetruecolor. Мы укажем его размеры с результатами наших вычислений высоты и ширины, упомянутых aboveext, мы настроим это изображение, чтобы сохранить прозрачность. Для этого мы будем использовать команду imagesavealpha. Это установит флаг «сохранить прозрачность» для этого изображения. Если будет помечено наше изображение для прозрачности, мы теперь определим его значения цвета и прозрачности с помощью команды imagecolorallocatealpha. Мы установим для всех значений канала RGB значение 0 и канал прозрачности до 127, который является полной прозрачностью. Позже мы «наводнения» заполним изображение нашими значениями «imagecolorallocatealpha», используя команду imagefill. Теперь изображение спрайта готово к работе. Следующий шаг - начать повторение через наш массив «icon_name». Когда мы будем проходить через этот массив, мы сделаем следующее: Depending по типу изображения, указанному в нашей программе создания спрайтов Sprite Builder, мы создадим новое изображение для каждого значка, используя одну из следующих команд: imagecreatefrompng, imagecreatefromgif или imagecreatefromjpeg. Мы свяжем «icon_name» с свойством «icon_type», чтобы указать источник изображения.ow, используя команду imagecopy, мы скопируем этот значок на наш спрайт. Мы компенсируем это с помощью наших свойств «x_position» и «y_position», и мы будем устанавливать его размеры, используя наши свойства «icon_width» и «icon_height». Добавив значок в наш спрайт, мы теперь увеличим наш «icon_per_row_count», по 1ext, нам нужно определить, достигли ли мы префикса «icons_per_row», указанного в шаблоне Sprite Builder. Если у нас есть, мы сделаем следующее: First, нам нужно будет пересчитать позицию значков по вертикали, когда мы начнем новую строку. Мы сделаем это, взяв текущую «y_position» и добавив к нему «icon_height» и «y_offset». NNext, мы переустановим «x_position» обратно до его значения по умолчанию, которое является свойством «x_offset», определенным в нашем СПРАВОЧНАЯ ФОРМА ПРОИЗВОДИТЕЛЯ. Таким образом, следующий значок будет скопирован в левую часть нашего спрайта. Теперь мы сбросим наш «icon_per_row_count» на 0, так как в этой строке нет изображений. Но теперь мы увеличиваем наш «row_count» на 1 как мы только что закончили rowIf, если счетчик «icon_per_row_count» не соответствует нашему пределу «icons_per_row», нам нужно будет только пересчитать «x_position», чтобы следующий значок был расположен дальше по оси xNNN, чтобы этот значок 'был скопирован в наш спрайт, мы можем уничтожить его с помощью команды imagedestroy. Мы прекратим нашу петлю foreach loop. Итерализируя все наши «значки» и копируя каждую из них в спрайт, мы продолжим и выводим sprite image в файл. Во-первых, мы снова проверим тип изображения, чтобы использовать соответствующий метод для вывода спрайта. Для этого мы будем использовать команду imagepng, imagegif или imagejpeg. Используя наш спрайт-образ, сохраненный в файле, мы можем продолжить и уничтожить изображение GD, которое мы работали с помощью команды imagedestroy.

function create_image() 
{
     $this->x_position = $this->x_offset;
     $this->y_position = $this->y_offset;
     $this->icon_per_row_count = 0;
     $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
     $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
     $this->new_sprite = imagecreatetruecolor($this->sprite_width, $this->sprite_height);
     imagesavealpha($this->new_sprite, true);
     $this->new_sprite_opacity= imagecolorallocatealpha($this->new_sprite, 0, 0, 0, 127);
     imagefill($this->new_sprite, 0, 0, $this->new_sprite_opacity);
     foreach ($this->icon_name as $image)
     {
          if($this->icon_type == 'png')
          {
               $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
          }
          else if($this->icon_type == 'gif')
          {
               $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
          }
          else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
          {
               $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
          }
          imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
          $this->icon_per_row_count++;
          if ($this->icon_per_row_count == $this->icons_per_row)
          {
               $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
               $this->x_position = $this->x_offset;
               $this->icon_per_row_count = 0;
               $this->row_count++;
          }
          else
          {
               $this->x_position = $this->x_position + $this->icon_width + $this->x_offset;
          }
          imagedestroy($this->icon);
     }
     if($this->icon_type == 'png')
     {
          imagepng($this->new_sprite, "{$this->path}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          imagegif($this->new_sprite, $this->path.'.'.$this->icon_type);
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          imagejpeg($this->new_sprite, $this->path.'.'.$this->icon_type);
     }
     imagedestroy($this->new_sprite);
}

2. Базовые настройки

Прежде чем мы рассмотрим этот метод, мы должны сначала определить несколько параметров.

x_position. Когда мы перебираем «icon_names», нам нужно вычислить смещение x для каждого нового значка в строке. Мы начнем с использования свойства «x_offset», которое было определено в нашем Sprite Builder FORM.ny_position. Мы будем использовать свойство «y_offset», которое также было определено в нашей программе создания спрайтов, чтобы установить начальную позицию значка вдоль y- ось. Как только мы достигнем предела значков для этой «строки», мы пересчитаем «y_position», чтобы переместить следующий и следующий значки вниз на 1 row.nicon_per_row_count. Изначально это будет установлено равным 0. Когда мы повторяем нашу 'icon_names' и добавьте их в спрайт, мы увеличим это на 1 для каждого icon.nsprite_width. Здесь мы вычислим ширину спрайта, используя некоторые из значений, которые мы собрали в нашем Sprite Builder FORMnsprite_height. Кроме того, мы Также вычислим высоту изображения спрайта, используя те же значения, которые мы собрали в FORM

function create_image() 
     {
          $this->x_position = $this->x_offset;
          $this->y_position = $this->y_offset;
          $this->icon_per_row_count = 0;
          $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
          $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
     }

3. Базовые вычисления

WIDTH. Чтобы определить ширину изображения Sprite, мы добавим ширину каждого значка к x_offset, указанному в FORM.

Затем мы умножим это значение на наше общее количество значков на ограничение строки, указанное нами в FORM.

Наконец, мы добавим x_offset в это целое число. Это даст справке с правой стороны справа или, если хотите, проложите изображения вдоль правой стороны спрайта.

ВЫСОТА. Чтобы вычислить высоту изображения Sprite, мы добавим высоту каждого значка в y_offset, заданную в FORM.

Затем мы умножим это на общее количество значков, которые мы имеем, разделенные на количество значков, которые мы имеем за строку, округленную до следующего целого, используя метод ceil.

Наконец, мы добавим y_offset к этому этому целому числу, чтобы дать Sprite значение поля внизу, или, если хотите, «поместите» изображения в нижней части спрайта.

4. Создание изображения с прозрачностью

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

Для этого мы будем использовать команду imagecreatetruecolor.

Эта команда принимает два аргумента, ширину и высоту. Мы будем использовать значения sprite_width и sprite_height, которые мы только что вычислили.

function create_image() 
     {
          $this->x_position = $this->x_offset;
          $this->y_position = $this->y_offset;
          $this->icon_per_row_count = 0;
          $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
          $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
          $this->new_sprite = imagecreatetruecolor($this->sprite_width, $this->sprite_height);
     }

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

Мы делаем это с помощью команды imageavealpha.

Эта команда принимает два аргумента: источник изображения и логическое значение, определяющее, хотите ли вы сохранить прозрачность для этого изображения.

Мы укажем true для второго параметра.

function create_image() 
     {
          $this->x_position = $this->x_offset;
          $this->y_position = $this->y_offset;
          $this->icon_per_row_count = 0;
          $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
          $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
          $this->new_sprite = imagecreatetruecolor($this->sprite_width, $this->sprite_height);
          imagesavealpha($this->new_sprite, true);
     }

5. Определение цвета и прозрачности нашего Sprite

С помощью нашего изображения, созданного и помеченного для прозрачности, мы теперь определим его значения цвета и прозрачности.

Мы сделаем это, используя команду imagecolorallocatealpha.

Эта команда принимает пять аргументов, источник изображения, красный канал, зеленый канал, синий канал и альфа-канал (прозрачность).

Мы укажем источник изображения и установим для всех цветных каналов значение 0 при установке альфа-канала, который используется для прозрачности, до 127, который является максимальным или полностью прозрачным.

function create_image() 
     {
          $this->x_position = $this->x_offset;
          $this->y_position = $this->y_offset;
          $this->icon_per_row_count = 0;
          $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
          $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
          $this->new_sprite = imagecreatetruecolor($this->sprite_width, $this->sprite_height);
          imagesavealpha($this->new_sprite, true);
          $this->new_sprite_opacity= imagecolorallocatealpha($this->new_sprite, 0, 0, 0, 127);
     }

Определив цвет и прозрачность наших спрайтов, мы теперь заливаем изображение этими значениями, используя команду imagefill.

Эта команда принимает четыре аргумента, источник изображения, координату x, чтобы начать заполнение, координату y, чтобы начать заполнение, и параметры прозрачности цвета, которые мы указали на предыдущем шаге.

Мы начнем заполнение в позиции 0,0, чтобы заполнить все изображение.

function create_image() 
     {
          $this->x_position = $this->x_offset;
          $this->y_position = $this->y_offset;
          $this->icon_per_row_count = 0;
          $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
          $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
          $this->new_sprite = imagecreatetruecolor($this->sprite_width, $this->sprite_height);
          imagesavealpha($this->new_sprite, true);
          $this->new_sprite_opacity= imagecolorallocatealpha($this->new_sprite, 0, 0, 0, 127);
          imagefill($this->new_sprite, 0, 0, $this->new_sprite_opacity);
     }

6. Итерация через наши «icon_names»

Теперь, когда мы создали базовое изображение для нашего спрайта с прозрачностью, нам нужно итерировать иконки в нашем массиве «icon_names», получить их соответствующие изображения и скопировать их индивидуально на наш спрайт.

Ниже приведен общий план шагов, которые мы предпримем в нашем цикле foreach:

Попробуйте все «icon_names» в массиве «icon_name», используя инструкцию foreach Определите тип файла значка и создайте новый образ изображения для него с использованием соответствующего метода «imagecreatefrom». Используйте команду imagecopy для копирования значка на наш спрайт при указании его смещения внутри спрайта с использованием свойств «x_position» и «y_position». Увеличивайте наш «icon_per_row_count» на 1, как мы только что добавили. новый значок в SpritenDetermine, если мы достигли предела «icons_per_row», сравнив значение нашего предела «icons_per_row» с личным значением текущего «icon_per_row_count'». Если количество значков, которые мы повторяли до сих пор, соответствует значению «icon_per_row_count» предел 'icons_per_row', нам нужно будет перемещаться по строке, пересчитывая наши x_position и y_position. Мы скорректируем y_position, чтобы мы копировали наши значки в следующую строку spritenWe'l l 'переустановите' x_position обратно в начало новой строки - в левую сторону spriteAdarily, мы сбросим наш 'icon_per_row_count' на 0 и увеличим наш 'row_count' на 1If, если мы не достигли предела 'icons_per_row', мы просто пересчитаем свойство «x_position», чтобы мы копировали следующий значок дальше по оси x. Продолжаем цикл fornach loopow, мы будем использовать команду imagedestroy для уничтожения текущего «значка», с которым мы работаем в GD, поскольку нам это не понадобится anymore

Вот как будет выглядеть код до сих пор, начиная с цикла foreach:

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
     if ($this->icon_per_row_count == $this->icons_per_row)
     {
          $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
          $this->x_position = $this->x_offset;
          $this->icon_per_row_count = 0;
          $this->row_count++;
     }
     else
     {
          $this->x_position = $this->x_position + $this->icon_width + $this->x_offset;
     }
     imagedestroy($this->icon);
}

Внутри цикла вы увидите, что мы начнем с определения типа изображения.

Затем мы создаем соответствующее изображение для «icon_name», с которым мы работаем.

Мы получаем фактическое изображение, объединяя свойство «icon_source» с свойствами «icon_name» и «icon_type».

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
}

Вы заметите выше, что мы используем фигурные скобки.

Это известно как сложный фигурный синтаксис.

При определении строки с двойными кавычками вы можете обернуть переменные в фигурные скобки, которые отделяют их от других символов в строке.

Это позволяет использовать имя переменной рядом с любым символом, сохраняя различие в var.

Это также более читаемо, чем регулярное конкатенация, и особенно полезно при работе с правилами CSS, где буквы, такие как «px» или «em», будут немедленно следовать за значением свойства.

Например: background-position: {$ foo} px {$ bar} px.

Затем мы скопируем этот значок на наш спрайт-образ с помощью команды imagecopy.

Команда imagecopy принимает восемь параметров, целевое изображение, исходное изображение, координату x на цели, координату y на цели, координату x исходного изображения, координату y исходного изображения, ширину исходного изображения и высоту исходное изображение.

Мы укажем наш «new_sprite» в качестве цели для копии.

Мы будем использовать свойства «x_position» и «y_position», соответственно, чтобы определить размещение значков в спрайте.

Мы установим исходные координаты для нашего значка в 0, 0, чтобы мы скопировали весь значок.

Наконец, мы будем использовать свойства «icon_width» и «icon_'height», соответственно, чтобы установить размеры значков в Sprite.

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
}

Скопировав иконку в Sprite, мы увеличим наш «icon_per_row_count» на 1

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
}

Теперь мы проверим, достигли ли мы максимального предела изображения вдоль оси х (по горизонтали).

Мы делаем это, сравнивая количество строк изображения с пределом 'images_per_row', указанным в нашей ФОРМОВОЙ ФОРМАТИРОВАНИИ.

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
     if ($this->icon_per_row_count == $this->icons_per_row)
     {
     }
     else
     {
     }
}

Если значения совпадают, мы достигли предела для значков в этой строке. Нам нужно будет сделать следующее:

Recalculate y_position для наших значков, чтобы переместить их в новую строку на изображении спрайта. NВыберите x_position для следующего правила значка в его положение по умолчанию, которое является исходной левой стороной нашего спрайта imagenReset our 'icon_per_row_count' до 0, так как в этой строке нет изображений. nonIncrement наш 'row_count' на 1, поскольку мы теперь переместились вниз по w

_. Чтобы вычислить новую позицию для наших значков вдоль оси y, мы нужно взять текущую y_position, добавить y_offset к ней, а затем добавить к ней высоту значков.

Это эффективно перемещает изображение вниз до новой строки при сохранении y_offset, заданного в FORM.

Кроме того, мы снова установим свойство 'x_position', равное нашему свойству 'x_offset'

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
     if ($this->icon_per_row_count == $this->icons_per_row)
     {
          $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
          $this->x_position = $this->x_offset;
          $this->icon_per_row_count = 0;
          $this->row_count++;
     }
     else
     {
     }
}

Если значения «icon_per_row_count» и «icons_per_row» не совпадают, мы не достигли конца значков в этой строке, и нам просто нужно пересчитать свойство «x_position», чтобы переместить следующий значок дальше вниз ось х.

Мы делаем это, беря текущую x_позицию и добавляя к ней свойство «x_offset», а затем добавляя к ней ширину значков.

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
     if ($this->icon_per_row_count == $this->icons_per_row)
     {
          $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
          $this->x_position = $this->x_offset;
          $this->icon_per_row_count = 0;
          $this->row_count++;
     }
     else
     {
          $this->x_position = $this->x_position + $this->icon_width + $this->x_offset;
     }
}

Теперь, когда значки добавлены в спрайт, мы можем продолжить и уничтожить значок, с которым мы работаем в GD, и завершить цикл foreach.

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
     if ($this->icon_per_row_count == $this->icons_per_row)
     {
          $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
          $this->x_position = $this->x_offset;
          $this->icon_per_row_count = 0;
          $this->row_count++;
     }
     else
     {
          $this->x_position = $this->x_position + $this->icon_width + $this->x_offset;
     }
     imagedestroy($this->icon);
}

7. Завершение

Когда все значки, наконец, скопированы на Sprite, последнее, что нам нужно сделать, это вывести его в файл изображения.

Опять же, мы сделаем это в соответствии с типом файла изображения.

Нужно использовать либо команду imagepng, imagegif, либо imagejpeg соответственно.

Как только мы выведем Sprite в файл, мы сможем уничтожить образ спрайта, с которым мы работали в GD.

foreach ($this->icon_name as $image) 
{
     if($this->icon_type == 'png')
     {
          $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
     }
     imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
     $this->icon_per_row_count++;
     if ($this->icon_per_row_count == $this->icons_per_row)
     {
          $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
          $this->x_position = $this->x_offset;
          $this->icon_per_row_count = 0;
          $this->row_count++;
     }
     else
     {
          $this->x_position = $this->x_position + $this->icon_width + $this->x_offset;
     }
     imagedestroy($this->icon);
}
if($this->icon_type == 'png')
{
     imagepng($this->new_sprite, "{$this->path}.{$this->icon_type}");
}
else if($this->icon_type == 'gif')
{
     imagegif($this->new_sprite, $this->path.'.'.$this->icon_type);
}
else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
{
     imagejpeg($this->new_sprite, $this->path.'.'.$this->icon_type);
}
imagedestroy($this->new_sprite);

7. Полный метод

Вот полный метод create_image () в целом:

function create_image() 
{
     $this->x_position = $this->x_offset;
     $this->y_position = $this->y_offset;
     $this->icon_per_row_count = 0;
     $this->sprite_width = (($this->icon_width + $this->x_offset) * $this->icons_per_row) + $this->x_offset;
     $this->sprite_height = (($this->icon_height + $this->y_offset) * ceil($this->icon_total / $this->icons_per_row)) + $this->y_offset;
     $this->new_sprite = imagecreatetruecolor($this->sprite_width, $this->sprite_height);
     imagesavealpha($this->new_sprite, true);
     $this->new_sprite_opacity= imagecolorallocatealpha($this->new_sprite, 0, 0, 0, 127);
     imagefill($this->new_sprite, 0, 0, $this->new_sprite_opacity);
     foreach ($this->icon_name as $image)
     {
          if($this->icon_type == 'png')
          {
               $this->icon = imagecreatefrompng("{$this->icon_source}{$image}.{$this->icon_type}");
          }
          else if($this->icon_type == 'gif')
          {
               $this->icon = imagecreatefromgif("{$this->icon_source}{$image}.{$this->icon_type}");
          }
          else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
          {
               $this->icon = imagecreatefromjpeg("{$this->icon_source}{$image}.{$this->icon_type}");
          }
          imagecopy($this->new_sprite, $this->icon, $this->x_position, $this->y_position, 0, 0, $this->icon_width, $this->icon_height);
          $this->icon_per_row_count++;
          if ($this->icon_per_row_count == $this->icons_per_row)
          {
               $this->y_position = $this->y_position + $this->icon_width + $this->y_offset;
               $this->x_position = $this->x_offset;
               $this->icon_per_row_count = 0;
               $this->row_count++;
          }
          else
          {
               $this->x_position = $this->x_position + $this->icon_width + $this->x_offset;
          }
          imagedestroy($this->icon);
     }
     if($this->icon_type == 'png')
     {
          imagepng($this->new_sprite, "{$this->path}.{$this->icon_type}");
     }
     else if($this->icon_type == 'gif')
     {
          imagegif($this->new_sprite, $this->path.'.'.$this->icon_type);
     }
     else if($this->icon_type == 'jpg' || $this->icon_type == 'jpeg')
     {
          imagejpeg($this->new_sprite, $this->path.'.'.$this->icon_type);
     }
     imagedestroy($this->new_sprite);
}

Sprite Builder Метод второй - Создание таблицы стилей

1. Обзор метода

Наш второй метод будет функцией create_stylesheet (). Этот метод выведет новую таблицу стилей для нашего спрайта изображений.

Наш первый селектор будет селектором класса, который будет соответствовать «target_name», указанному в нашей форме спрайта Builder.

Мы преобразуем это «target_name» в нижний регистр, так как имена классов всегда должны начинаться с строчной буквы.

Этот класс будет иметь только одно свойство, фоновое изображение, а значение этого свойства будет изображением спрайта, которое мы только что создали.

Мы будем проходить через наш массив «icon_name» и создавать новое правило для каждого «icon_name», используя это имя в качестве селектора классов.

Каждое из этих правил будет иметь только одно свойство, background-position и значение этого свойства будет относиться к размерам значка, смещениям x y и количеству значков, отображаемых в строке.

Свойство background-position CSS будет соответствовать значению x y в изображении спрайта.

2. Базовые настройки

Прежде чем идти дальше, нам нужно будет определить несколько параметров в этом методе.

icon_per_row_count. Изначально это будет установлено в 0. Когда мы перебираем наши «icon_names» и добавляем их в спрайт, мы увеличиваем это на 1 для каждого значка. nrow_count. Подобно «icon_per_row_count», мы будем нужно отслеживать, в какой строке мы находимся. Мы будем увеличивать количество строк на 1 каждый раз, когда мы достигаем предела «icons_per_row» в нашем цикле foreach и перемещаемся вниз по rownx_position. Когда мы итерации по «icon_names», нам нужно будет вычислить положение фона для каждого значка в пределах спрайт. Это будет сервер как позиция «x» в CSS rule.ny_position. Подобно «x_position», как только мы достигнем предела «icons_per_row» в нашем цикле, нам нужно будет вычислить новую позицию «y» для нашего правила класса.

function create_stylesheet() 
{
     $this->icon_per_row_count = 0;
     $this->row_count = 0;
     $this->x_position = ($this->x_offset * (-1));
     $this->y_position = ($this->y_offset * (-1));
}

3. Базовые вычисления XY

Чтобы определить наши базовые xy-координаты, мы возьмем нашу настройку x_offset и нашу настройку y_offset, которые были указаны в FORM, и умножьте каждый из них на отрицательный 1.

Position 0px 0px на самом спрайте будет левым верхним углу изображения.

Нам нужно переместить изображение «вверх» и «влево» - отсюда и отрицательные значения.

Кроме того, поскольку каждый значок смещен по вертикали и по горизонтали смещениями x и y, указанными в нашей программе создания спрайтов, мы будем использовать эти настройки, чтобы соответственно установить наше фоновое положение.

4. Создание таблицы стилей

Теперь, когда у нас есть наши базовые настройки и вычисления, мы можем продвигаться вперед и создавать нашу таблицу стилей.

В PHP это можно сделать с помощью команды fopen в режиме «a», которая создаст файл, если он еще не существует, и напишите любые новые данные в конец файла.

Мы объединим нашу настройку «путь» из Формата Builder FORM с расширением файла для таблиц стилей, который является «css».

function create_stylesheet() 
{
     $this->icon_per_row_count = 0;
     $this->row_count = 0;
     $this->x_position = ($this->x_offset * (-1));
     $this->y_position = ($this->y_offset * (-1));
     $create_css = fopen($this->path.'.css', 'a');
}

5. Написание нашего базового правила CSS

С созданием и открытием нового файла css теперь мы можем определить наше базовое правило CSS.

Это правило будет своего рода мета-правилом для всех наших спрайтов.

Его единственным свойством будет «background-image». Этот класс будет использоваться вместе с правилами класса для каждого отдельного значка в нашем спрайте.

Мы будем использовать «target_name», указанное в нашей Форме Spite Builder, преобразованную в нижний регистр, в качестве базового класса. Нам нужно только определить свойство background-image как новое созданное изображение спрайта.

function create_stylesheet() 
{
     $this->icon_per_row_count = 0;
     $this->row_count = 0;
     $this->x_position = ($this->x_offset * (-1));
     $this->y_position = ($this->y_offset * (-1));
     $create_css = fopen($this->path.'.css', 'a');
     $base_class = strtolower($this->target_name);
     $base_css_rule =
".$base_class {
     background-image: url({$this->target_name}.{$this->icon_type});
}n";
";
}

Вы заметите выше, что мы используем фигурные скобки.

Это известно как сложный фигурный синтаксис.

При определении строки с двойными кавычками вы можете обернуть переменные в фигурные скобки, которые отделяют их от других символов в строке.

Это позволяет использовать имя переменной рядом с любым символом, сохраняя различие в var.

Это также более читаемо, чем регулярное конкатенация, и особенно полезно при работе с правилами CSS, где буквы, такие как «px» или «em», будут немедленно следовать за значением свойства.

Например: background-position: {$ foo} px {$ bar} px.

Теперь, когда мы определили наше базовое правило, мы можем записать это в наш файл CSS с помощью команды fwrite.

Эта команда принимает два параметра, исходный файл, который мы пишем, и контент, который мы будем писать.

function create_stylesheet() 
{
     $this->icon_per_row_count = 0;
     $this->row_count = 0;
     $this->x_position = ($this->x_offset * (-1));
     $this->y_position = ($this->y_offset * (-1));
     $create_css = fopen($this->path.'.css', 'a');
     $base_class = strtolower($this->target_name);
     $base_css_rule =
".$base_class {
     background-image: url({$this->target_name}.{$this->icon_type});
}n";
";
     fwrite($create_css, $base_css_rule);
}

6. Написание определенных правил класса CSS в цикле foreach

С помощью нашего базового правила мы теперь будем перебирать каждое индивидуальное «имя».

Выше, вы заметите, что мы еще не закрыли наш файл CSS.

Это хорошо, поскольку нам не нужно будет изменять его разрешения с помощью chmod, поскольку он уже открыт.

В продолжении каждый значок будет иметь другое положение вдоль оси X, поэтому нам нужно будет пересчитать позицию X перед каждым новым правилом.

Кроме того, как только мы достигнем предела «icons_per_row», указанного в нашей программе создания Sprite Builder, нам нужно будет пересчитать положение значков вдоль оси Y.

Вот общий план шагов, которые мы предпримем здесь:

Встроить цикл foreach для всех «icon_names» в нашем массиве «icon_name» и немедленно преобразовать имя файла в нижние символы case.Определить новое правило CSS для текущего элемента в нашей итерации, используя свойства x_position и y_position. Запишите новое правило CSS в наш CSS-файл, который по-прежнему остается открытым для нашего свойства «icon_per_row_count» на 1nDetermine, если мы достигли предела «icons_per_row», сравнивая значение наших «icons_per_row» 'атрибут нашего свойства «icon_per_row_count». Если число значков, которые мы выполнили, «icon_per_row_count», соответствует пределу «icons_per_row», мы доходим до конца изображений для этой строки. Таким образом, нам нужно будет пересчитать наши x_position и y_positions соответственно. Мы изменим y_position, чтобы перейти к следующей строке - мы делаем это, «перемещая изображение вверх», «Мы сбросим» x_position обратно в начало значки для этой строки - крайняя левая часть спрайта. Кроме того, мы сбросим наш «icon_per_row_count» на 0 и увеличим наш «row_count» на 1If, если мы не достигли предела «icons_per_row», мы пересчитаем нашу «x_position», свойство для перемещения положения фона по оси x к следующему значку. Построить цикл foreach. Закройте файл CSS, поскольку мы закончили писать все новые правила класса

. Вот как код будет выглядеть до сих пор, начиная с цикл foreach:

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $new_css_rule);
               $this->icon_per_row_count++;
               if ($this->icon_per_row_count == $this->icons_per_row)
               {
                    $this->y_position = $this->y_position - $this->y_offset - $this->icon_height;
                    $this->x_position = ($this->x_offset * (-1));
                    $this->icon_per_row_count = 0;
                    $this->row_count++;
               }
               else
               {
                    $this->x_position = $this->x_position - $this->x_offset - $this->icon_width;
               }
          }
          fclose($create_css);

Внутри цикла вы увидите, что мы начнем с определения нашего нового правила CSS. Мы будем использовать базовые «x_position» и «y_position», которые мы определили ранее.

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
          }

Затем мы напишем эту строку в файл CSS, используя команду fwrite

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $base_css_rule);
          }

Затем мы увеличим наш «icon_per_row_count» на 1

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $base_css_rule);
               $this->icon_per_row_count++;
          }

Затем мы проверим, достигли ли мы конца изображений вдоль оси x (по горизонтали).

Мы делаем это, сравнивая текущее количество изображений с свойством 'images_per_row', которое было определено в нашей ФОРМОВОЙ ПРОГРАММЕ «Спрайт».

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $base_css_rule);
               $this->icon_per_row_count++;
               if ($this->icon_per_row_count == $this->icons_per_row)
               {
               }
          }

Если значения совпадают, мы достигли конца значков для этой строки, и нам нужно будет сделать следующее:

Recalculate y_position для наших правил, поскольку нам нужно перейти к следующей строке на изображении спрайта. nУстановите x_position для следующего правила CSS, поскольку мы сейчас работаем с левой стороны spritenReset нашего 'icon_per_row_count', поскольку мы не написали никаких правил для изображений в этой строке. nonIncrement наш 'row_count' на 1, поскольку мы теперь перемещены вниз по

__ Расчет, который мы используем для определения значка нового положения вдоль оси y (по вертикали), будет зеркальным отображением расчета, используемого для определения положения x для каждого значка.

Нам просто нужно взять текущую y_position, вычесть y_offset из нее, а затем вычесть высоту иконок из нее.

Это эффективно переместит изображение вверх, доведя следующую строку до области просмотра.

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $base_css_rule);
               $this->icon_per_row_count++;
               if ($this->icon_per_row_count == $this->icons_per_row)
               {
                    $this->y_position = $this->y_position - $this->y_offset - $this->icon_height;
                    $this->x_position = ($this->x_offset * (-1));
                    $this->icon_per_row_count = 0;
                    $this->row_count++;
               }
          }

Если значения не совпадают, мы не достигли конца значков в этой строке.

Нам нужно будет пересчитать свойство «x_position», чтобы переместить положение фона вниз по оси x в положение следующего значка.

Мы делаем это, беря текущую «x_position» и вычитая свойство «x_offset», которое было определено в нашей Форме скриптов Sprite, и затем вычитаем ширину значков, также определенную в нашей программе создания спрайтов.

Это, в основном, прокрутит наш образ до «левой», в результате чего следующий значок появится в области «видимый».

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $base_css_rule);
               $this->icon_per_row_count++;
               if ($this->icon_per_row_count == $this->icons_per_row)
               {
                    $this->y_position = $this->y_position - $this->y_offset - $this->icon_height;
                    $this->x_position = ($this->x_offset * (-1));
                    $this->icon_per_row_count = 0;
                    $this->row_count++;
               }
               else
               {
                    $this->x_position = $this->x_position - $this->x_offset - $this->icon_width;
               }
          }

7. Завершение

Теперь, когда мы выполнили все наши «записи» и определили новое имя и правило класса CSS для каждого из них, мы можем продолжить и закрыть этот файл.

Это для нашего метода create_stylesheet!

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $base_css_rule);
               $this->icon_per_row_count++;
               if ($this->icon_per_row_count == $this->icons_per_row)
               {
                    $this->y_position = $this->y_position - $this->y_offset - $this->icon_height;
                    $this->x_position = ($this->x_offset * (-1));
                    $this->icon_per_row_count = 0;
                    $this->row_count++;
               }
               else
               {
                    $this->x_position = $this->x_position - $this->x_offset - $this->icon_width;
               }
               fclose($create_css);
          }

7. Полный метод

Вот полный метод create_stylesheet () в целом:

     function create_stylesheet() 
     {
          $this->icon_per_row_count = 0;
          $this->row_count = 0;
          $this->x_position = ($this->x_offset * (-1));
          $this->y_position = ($this->y_offset * (-1));
          $create_css = fopen($this->path.'.css', 'a');
          $base_class = strtolower($this->target_name);
          $base_css_rule =
".$base_class {
     background-image: url({$this->target_name}.{$this->icon_type});
}n";
          fwrite($create_css, $base_css_rule);
          foreach($this->icon_name as $icon_name)
          {
        $icon_name = strtolower($icon_name);
        $new_css_rule =
".{$icon_name} {
     background-position: {$this->x_position}px {$this->y_position}px;
}
";
               fwrite($create_css, $new_css_rule);
               $this->icon_per_row_count++;
               if ($this->icon_per_row_count == $this->icons_per_row)
               {
                    $this->y_position = $this->y_position - $this->y_offset - $this->icon_height;
                    $this->x_position = ($this->x_offset * (-1));
                    $this->icon_per_row_count = 0;
                    $this->row_count++;
               }
               else
               {
                    $this->x_position = $this->x_position - $this->x_offset - $this->icon_width;
               }
          }
          fclose($create_css);
     }

Sprite Builder Метод третий - Создание предварительного просмотра HTML

1. Обзор метода

Нашим последним методом будет функция create_html.

Этот метод выведет предварительный просмотр HTML для нашего спрайта изображений и перечислит соответствующие имена классов для каждого изображения.

Мы начнем с определения нескольких базовых настроек. Затем мы создадим HTML HEAD, а также часть BODY.

В HEAD мы определим несколько правил CSS для содержимого страницы. Некоторые из этих правил будут динамичными относительно размеров наших значков.

Как только мы запишем эти базовые данные в наш HTML-файл, мы начнем выполнять итерацию через наш массив «icon_name» с циклом foreach.

В этом цикле мы создадим новый DIV, SPAN и P ELEMENT для каждого значка.

Наш SPAN ELEMENT будет присвоен именам CLASS, соответствующим «icon_name», с которыми мы работаем, а также целевому имени для нашего спрайт-образа, оба преобразованы в нижний регистр.

Как только мы напишем все эти данные в наш HTML-файл, мы добавим новую строку в файл, который закроет все открытые TAGS.

Затем мы закроем сам файл HTML.

2. Базовые настройки

Прежде чем идти дальше, мы собираемся определить свойство в этом методе.

div_width. Проще говоря, мы определяем ширину контейнера для значка и текста. Мы добавим 245px к ширине значка, с которым мы работаем. В большинстве случаев этого будет достаточно, чтобы содержать как значок, так и текст. Оглядываясь назад, можно получить длину каждого «icon_name» в массиве и установить ширину этого DIV равным длине самого длинного имени плюс ширина значков. Но, ради простоты, давайте просто использовать 245px.

function create_html() 
{
     $this->div_width = $this->icon_width + 245;
}

3. Создание страницы HTML

С этой целью мы создадим новый HTML-файл с командой fopen в режиме «a».

Это создаст файл, если он еще не существует, и записать все новые данные в конец файла.

Мы объединим нашу настройку «путь» из Формата Builder FORM с расширением файла «html».

function create_html() 
{
     $this->div_width = $this->icon_width + 245;
     $sprite_html = fopen($this->path.'.html', 'a');
}

4. Начало работы с нашим документом HTML

С созданным и открытым новым файлом HTML мы теперь можем создать наш элемент HEAD.

Кроме того, мы откроем наш ТЕГ ТЕЛА, DIV для всего нашего контента, а также HEADER ELEMENT уровня 1, который будет использоваться как заголовок страницы.

Ниже вы заметите, что мы отсылаем наше свойство target_name как часть названия страницы, наше свойство «icon_height» как высоту для DIV.icon и нашего свойства div_width как ширину DIV.icon,

Кроме того, мы будем использовать наши свойства «icon_height» и «icon_width» как значения высоты и ширины для SPAN, которые будут содержать фоновое изображение.

Наконец, мы снова выберем наше «target_name» на нашем уровне HEADER.

     function create_html() 
     {
          $this->div_width = $this->icon_width + 245;
          $sprite_html = fopen($this->path.'.html', 'a');
          $html_head =
"<!doctype html>
<html lang='en'>
<head>
     <title>{$this->target_name} sprite classes</title>
     <meta charset='utf-8'>
     <link rel='stylesheet' type='text/css' href='{$this->target_name}.css'>
     <style type='text/css'>
          H1
          {
               color: #434343;
               font: small-caps bold 33.1pt Helvetica;
               margin-left: 20px;
               text-align: left;
          }
          DIV#content
          {
               margin: 0 auto;
          }
          DIV.icon
          {
               float: left;
               height: {$this->icon_height}px;
               margin: 0px 0px 25px 20px;
               width: {$this->div_width}px;
          }
          DIV.icon SPAN
          {
               float: left;
               height: {$this->icon_height}px;
               width: {$this->icon_width}px;
          }
          DIV.icon P
          {
               font: 10pt/{$this->icon_height}px Helvetica;
               margin: 0 0 0 45px;
          }
     </style>
</head>
<body>
     <div id='content'>
         <h1>{$this->target_name} sprite classes</h1>
";
     }

Вы заметите выше, что мы используем фигурные скобки.

Это известно как сложный фигурный синтаксис.

При определении строки с двойными кавычками вы можете обернуть переменные в фигурные скобки, которые отделяют их от других символов в строке.

Это позволяет использовать имя переменной рядом с любым символом, сохраняя различие в var.

Это также более читаемо, чем регулярное конкатенация, и особенно полезно при работе с правилами CSS, где буквы, такие как «px» или «em», будут немедленно следовать за значением свойства.

Например: background-position: {$ foo} px {$ bar} px.

Теперь, когда мы определили наш HEAD и открыли нашу ТЕЛА TOD, а также контейнер DIV, мы можем записать эти данные в наш файл HTML с помощью команды fwrite.

Нам просто нужно указать файл, который мы пишем, а также содержание, которое мы пишем.

     function create_html() 
     {
          $this->div_width = $this->icon_width + 245;
          $sprite_html = fopen($this->path.'.html', 'a');
          $html_head =
"<!doctype html>
<html lang='en'>
<head>
     <title>{$this->target_name} sprite classes</title>
     <meta charset='utf-8'>
     <link rel='stylesheet' type='text/css' href='{$this->target_name}.css'>
     <style type='text/css'>
          H1
          {
               color: #434343;
               font: small-caps bold 33.1pt Helvetica;
               margin-left: 20px;
               text-align: left;
          }
          DIV#content
          {
               margin: 0 auto;
          }
          DIV.icon
          {
               float: left;
               height: {$this->icon_height}px;
               margin: 0px 0px 25px 20px;
               width: {$this->div_width}px;
          }
          DIV.icon SPAN
          {
               float: left;
               height: {$this->icon_height}px;
               width: {$this->icon_width}px;
          }
          DIV.icon P
          {
               font: 10pt/{$this->icon_height}px Helvetica;
               margin: 0 0 0 45px;
          }
     </style>
</head>
<body>
     <div id='content'>
         <h1>{$this->target_name} sprite classes</h1>
";
          fwrite($sprite_html, $html_head);
     }

5. Создание динамических элементов HTML для каждого значка

Теперь мы можем начать итерацию через наш массив «icon_name» с помощью цикла foreach.

В этом цикле мы сначала преобразуем имя значка в нижний регистр.

Затем мы создадим DIV, который будет содержать SPAN для нашего изображения значков, а также P для имен классов, связанных с этим изображением.

Класс SPAN, а также текст абзаца будут использовать свойства имени «target_name» и «icon_name».

Помните, что «target_name» было указано в нашей программе создания спрайтов.

Он будет использоваться как имя нашего спрайт-изображения, а также имя класса по умолчанию для всех изображений в этом спрайте.

Единственным свойством CSS, связанным с «target_name», будет свойство «background-image», и его значение будет само изображение спрайта.

Все остальные имена классов, которые мы будем извлекать из массива «icon_name», будут иметь одно свойство CSS - «фоновое положение» спрайта, где находится изображение, соответствующее этому классу SPAN.

Вот как будет выглядеть цикл foreach:

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_paragraph =
"
          <div class='icon'>
               <span class='{$this->target_name} {$icon_name}'></span>
.{$this->target_name} .{$icon_name}
          </div>
";
          }

После того, как мы определили наш контент в строке, мы перейдем и напишем его в наш HTML-файл, используя команду fwrite.

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_paragraph =
"
          <div class='icon'>
               <span class='{$this->target_name} {$icon_name}'></span>
.{$this->target_name} .{$icon_name}
          </div>
";
               fwrite($sprite_html, $new_paragraph);
          }

Со всем нашим новым контентом, записанным в файл, мы завершим цикл foreach, а затем создадим новую строку, содержащую закрывающие TAGS для нашего HTML-файла.

Мы напишем эти данные на страницу HTML, а затем закроем страницу и все!

          foreach($this->icon_name as $icon_name) 
          {
        $icon_name = strtolower($icon_name);
        $new_paragraph =
"
          <div class='icon'>
               <span class='{$this->target_name} {$icon_name}'></span>
.{$this->target_name} .{$icon_name}
          </div>
";
               fwrite($sprite_html, $new_div);
          }
          $close_html =
'    </div>
</body>';
          fwrite($sprite_html, $close_html);
          fclose($sprite_html);

6. Полный метод

Вот полный метод create_html () в целом:

     function create_html() 
     {
          $this->div_width = $this->icon_width + 245;
          $sprite_html = fopen($this->path.'.html', 'a');
          $html_head =
"<!doctype html>
<html lang='en'>
<head>
     <title>{$this->target_name} sprite classes</title>
     <meta charset='utf-8'>
     <link rel='stylesheet' type='text/css' href='{$this->target_name}.css'>
     <style type='text/css'>
          H1
          {
               color: #434343;
               font: small-caps bold 33.1pt Helvetica;
               margin-left: 20px;
               text-align: left;
          }
          DIV#content
          {
               margin: 0 auto;
          }
          DIV.icon
          {
               float: left;
               height: {$this->icon_height}px;
               margin: 0px 0px 25px 20px;
               width: {$this->div_width}px;
          }
          DIV.icon SPAN
          {
               float: left;
               height: {$this->icon_height}px;
               width: {$this->icon_width}px;
          }
          DIV.icon P
          {
               font: 10pt/{$this->icon_height}px Helvetica;
               margin: 0 0 0 45px;
          }
     </style>
</head>
<body>
     <div id='content'>
         <h1>{$this->target_name} sprite classes</h1>
";
          fwrite($sprite_html, $html_head);
          foreach($this->icon_name as $icon_name)
          {
        $icon_name = strtolower($icon_name);
        $new_paragraph =
"
          <div class='icon'>
               <span class='{$this->target_name} {$icon_name}'></span>
.{$this->target_name} .{$icon_name}
          </div>
";
               fwrite($sprite_html, $new_div);
          }
          $close_html =
'    </div>
</body>';
          fwrite($sprite_html, $close_html);
          fclose($sprite_html);
     }

Конец

Это заканчивает учебник PHP Sprite Framework! Надеюсь, вы научились чему-то новому от этого, и с легкостью можете создавать и использовать свои собственные «Sprite Frameworks»!

ПРИМЕЧАНИЕ. Копия наборов значков Quartz и DF Aqua Gloss будет включена в исходный код для демонстрационных целей.