65.9K
CodeProject 正在变化。 阅读更多。
Home

图像精灵和 CSS 类创建器

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (22投票s)

2011年1月11日

CPOL

3分钟阅读

viewsIcon

92495

downloadIcon

2798

即时创建图像精灵及其 CSS 类

尽管实际上没有人抱怨,但我添加了一个没有编译的可执行文件的下载选项,以供那些可能遇到防病毒或其他安全策略问题的人使用

新版 v2.0  

我决定增加此工具的主要版本号,因为它实现了新的核心功能,并且实际上打破了与以前命令行命令的向后兼容性。

那么...有什么新功能?

  • 3 种 Bin Packing 算法可供选择,以优化精灵图像大小
  • 新的和重构的命令行命令,让您可以自动化生成过程
  • 支持内部文件夹
  • 允许设置输出文件名

简介  

图片精灵是为您的应用程序提供一些图片的一个很好的方法。 基本上,它包括将一组图片组合成一个更大的图片,然后只需缓存它。 当您需要其中一个小图像时,您只需要知道它在大图像上的坐标。 使用此技术,您只需要为整个应用程序加载一张图片并重复使用它,而不是一次加载每张图片。

在这里,我将介绍在网站上使用的 CSS 实现,但您可以在任何需要的地方使用此技术。

为什么选择这个?

当然,您可以在 Google 上搜索,找到很多告诉您如何使用精灵和 CSS 的匹配项,但构建它们及其 CSS 的“无痛”方法在哪里? 它们都会告诉您使用 Photoshop 或任何其他照片编辑工具,但这总会花费很多时间。 这时,这个可爱的小应用程序就派上用场了。 它将立即生成精灵图像及其 CSS,您可以稍后添加图像并重新生成它,而无需担心破坏您的代码!

Using the Code

在包中,您将找到一个已编译的版本及其源代码。

只需将SpriteCreator.exe 文件放到包含要包含在精灵中的图片的文件夹中并运行它。 完成!

假设、限制和功能

  • 无论大小如何,文件夹中的所有图像文件都将添加到精灵中。
  • 文件夹中的所有图像都将包含在精灵中。  
  • 仅支持 jpg、jpeg、png 和 bmp 扩展名。
  • 图片的名称用于 CSS 类名。
  • 图片文件名中的空格将被替换为 -
  • 结果 3 个文件,一个 *.png(精灵)、*.css 和 *.html(演示用法页面),其中 * 是您指定的名称或随机 GUID。 
  • CSS 文件包含一个将背景图像应用于元素的类
  • 图像使用 3 种不同的算法排序(更多关于它们的说明)。

Bin Packing 算法

为了优化精灵上图像的分布,我使用了这里的代码: Nuclex Game 

 Bin Packing 算法在其页面上有很好的文档说明。

所有 Bin Packing 算法的功劳都必须归功于这些家伙,他们通过完美地用 C# 实现这三种好的 bin packing 算法为我节省了很多时间。 在我这边,我只删除了 XNA 依赖项,并用纯 System.Drawing 对象替换了它们。

选项  

这是一个控制台应用程序,因此您可以传递一些自定义参数。

  1. /h, /?, /help :: 帮助 
  2. /s :: 指定图像源目录路径
  3. /d :: 目标目录路径 
  4. /D :: 与 /d 相同,但如果目录不存在则创建该目录
  5. /f :: 目标文件名 
  6. /F :: 与 /f 相同,但如果文件已存在则覆盖它们
  7. /cp :: CSS 类名前缀
  8. /pl :: 指定 Bin Packaging 级别 (1, 2 (默认) 或 3)

示例:SpriteCreator.exe /s Images /F SiteImages /cp "app-ui-"

历史 

  • v1.0 - 一开始 
  • v1.1 - 支持不同大小的图像和小改进。 
  • v2.0 - 参数重构和 Bin Packing 算法的使用。 
© . All rights reserved.