图像精灵和CSS类创建者

分享于 

4分钟阅读

Web开发

  繁體 雙語

虽然没有人抱怨它,但是我添加一个没有编译的可以执行文件的下载选项。

新建 v2.0

我决定增加这个工具的主要版本,因为它实现了新的核心特性,并实际制动 background 与以前 命令行 命令的兼容性。

那么。

  • 3 种装箱算法从优化sprite图像尺寸中选择
  • 新增和重构的命令行 命令使你可以自动生成生成过程
  • 支持内部文件夹
  • 允许设置输出文件名

介绍

图像精灵是一种非常好的方法来给你的应用程序提供一些图像。 基本上是将一组图像组合在一个较大的图像中,然后只缓存它。 当你需要一个小图像时,你所需要知道的就是它在大型图像上的坐标。 使用这种技术,你只需要为整个应用程序加载一个图像并重用它,而不是每次加载一个图像。

在这里,我将用网站上使用的CSS覆盖实现,但是你可以在任何需要的地方使用这个技术。

为什么?

当然可以 Google,找到很多匹配,告诉你如何使用精灵和 CSS,但是在哪里构建它们和它们的CSS的方式? 所有他们将告诉你使用ps的任何它的他照片编辑工具,但这将总是花费很多时间。 就是这个可爱的小应用程序来的时候。 它将生成about图像及它的CSS,并且你可以在后面添加图像,而不必担心断开代码。

使用代码

在包中,你将找到编译版本及其源代码。

只需删除包含在子画面上的图片的文件夹,然后将它的运行。 已完成!

假设,限制和功能

  • 无论大小,文件夹上的所有图片文件都将被添加到sprite中。
  • 文件夹上的所有图片都将包含在sprite中。
  • 只支持 jpg,jpeg,png &扩展。
  • 图像的名称在CSS类名称上使用。
  • 图像文件名上的空格将替换为-
  • result 3个文件,一个 *.png ( sprite ),*.css 和 *.html ( 演示用法页面) 是你指定的名称或者随机 GUID。
  • CSS文件包含一个将 background 图像应用到元素的类
  • 图像按 3种不同的算法排序( 更多关于他们的信息)。

装箱算法

为了优化在sprite上的图像分布,我使用了下面的代码: Nuclex游戏

装箱算法在页面上有很好的文档记录。

所有的包装算法都必须给这些人提供大量的时间,完美实施这三个好的C# 包装算法。 在我旁边,我只删除了XNA依赖项,并用纯 System.Drawing 对象替换了它们。

选项

这是一个控制台应用程序,所以你可以传递一些定制参数。

  • /h,,帮助:? :帮助
  • /s:: 指定图像的源目录路径
  • /d: 目标目录路径
  • /d::: 与/d 相同,但如果它不存在则创建目录
  • /f:: 目标文件名
  • /f:: 与/f 相同,但如果它们已经存在,则覆盖这些文件
  • /cp:: CSS类名称前缀
  • /pl:: 指定纸盒包装级别( 1,2 ( 默认值) 或者 3 )

SpriteCreator.exe/s/f SiteImages/cp"app-ui-"

历史记录

  • v1.0 - 最开始
  • v1.1 - 支持不同尺寸和小尺寸的图像。
  • v2.0 - 参数重构和装箱算法的使用。