jdcloud-sprite - 图片合并(精灵图制作)工具

最后更新:2016-12-13

Modules

jdcloud-sprite (module)


Keywords

jdcloud-sprite (module)


@module jdcloud-sprite

精灵图(sprite)生成工具。

将多个小图标竖向拼合成一张大图片, 并生成相应的css描述文件.
使用竖向拼合可减少图片大小。一般建议将相同宽度的图片一起生成竖图,效率更高。

  1. 安装imagemagick软件, 确认命令行中可以运行convert等命令.

  2. 开发时, 创建css描述文件, 假如名为 icon.css:

    / * 24x24 @2x图 * /
    .icon-tree {
        background-image: url(icon/24/tree2.png);
    }
    .active .icon-tree {
        background-image: url(icon/24/tree.png);
    }
    
    / * 16x16 @2x图 * /
    .icon-back {
        background-image: url(icon/16/back.png);
    }
    .icon-menu {
        background-image: url(icon/16/menu.png);
    }

    注意:

  3. 使用本工具生成新的sprite图(拼合后的大图)以及相应的css文件

用法:

php jdcloud-sprite.php icon.css

它在icon.css相同目录下生成 icon.out.css文件以 icon.png 图.
一般建议按不同宽度的图分组生成多个sprite,可以加参数 -group 支持按指定宽度分组,这样宽度为16px(如果是@2x图,实际宽度是32)的图拼合到 icon-16.png中, 宽度为24px的图拼合到icon.24.png中, 等等。

php jdcloud-sprite.php icon.css -group

若要控制生成的文件名,可以用-out, -sprite等参数:

php jdcloud-sprite.php icon.css -2x -out icon/icon@2x.css -sprite icon@2x.png

运行命令后, 生成 icon/icon@2x.png, icon@2x.css; 如果加-group参数,则生成的图片文件名为 icon/icon@2x-16.png等。

参数表:

php jdcloud-sprite.php {icon}.css [-group] [-2x] [-o {icon}.out.css] [-sprite {icon}.png]

注意:


Generated by jdcloud-gendoc @ 2016-12-13T16:14:46+08:00