Добавление отступов к CSS-спрайтам с помощью ImageMagick

Question

У меня есть таблица спрайтов CSS с одинаковыми по размеру спрайтами. Я хочу добавить 1-пиксельное поле для каждого спрайта и расширить самый внешний пиксель каждого спрайта в этом поле - в основном, полный эффект спекания для каждого спрайта. Например, если я начал со следующей таблицы спрайтов из четырех спрайтов 8x8:

Я хотел бы закончить с этим: (желтые прямоугольники добавлены, чтобы вызвать исходный размер спрайта)

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

Я думал о добавлении пустого поля вокруг каждого спрайта, а затем скомпоновал результат с собой с различными смещениями. Но это не сработает, когда некоторые из спрайтов прозрачны, потому что это добавит пиксели внутри исходного спрайта (делая верхние два спрайта жирным шрифтом), и я хочу добавить только дополнительные пиксели вокруг внешней стороны.

Теперь, очевидно, я могу взять кусочки вручную, а затем -append/+append . Например, я мог бы сделать это, чтобы добавить горизонтальные поля кровотечения:

convert in.png[1x16+0+0] in.png[8x16+0+0] in.png[1x16+7+0]
        in.png[1x16+8+0] in.png[8x16+8+0] in.png[1x16+15+0]
        +append temp.png

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

Есть ли более простой способ добавить отступ спрайта - желательно тот, который не требует от меня написания скрипта для программной генерации параметров командной строки для convert ?

Answer 1

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

Начиная с этого изображения 32x32 пикселей: к этой версии 70x70:

convert tree.gif  -set option:distort:viewport 70x70-19-19 \
      -virtual-pixel Edge -filter point -distort SRT 0 \
      +repage  virtual_edge.gif

Вы можете видеть, что это в основном добавляет 19 пикселей по краю (потому что ((70-32) / 2) = 19 )

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