0

给定一个精灵，例如StackOverflow 精灵和 CSS 属性，例如：

background-position: 0px 0px;
width: 250px;
height: 61px;

我可以使用 Chunky PNG 库裁剪精灵的徽标。但是，某些站点具有负背景位置，例如此站点：ccs - which sprite is http://shop.ccs.com/ns/images/ccs-sprite-master-v4.png并具有以下内容徽标的 CSS 属性：

   background-position: -300px -100px;
   width: 166px;
   height: 80x;

由于在我的裁剪方法中我需要传递一个起始 (x,y) 坐标和结束 (x,y) 坐标，所以我看不到如何将这些负值转换为裁剪方法可以理解的值。我怎样才能做到这一点？

4

1 回答 1

1

在 CSS 中，您使用负背景位置坐标，因为图像相对于元素的矩形向左和向上移动，因此预期区域在元素边界内可见。

如果您的库希望获得要提取的图像内的坐标，则只需否定背景位置坐标。因此，在您的示例中，您将在坐标 (300, 100) 处提取图像，宽度和高度为 (166, 80)。

现在，我还没有查看您库的 API。您正在讨论的裁剪方法可能期望有另外两种类型的坐标。

如果是执行绝对坐标（即x1，y1，x2，y2），则只需将宽度和高度添加到左侧和顶部坐标。那将是 (300, 100, 300+166, 100+80)。

如果图书馆期望“距每个边界的裁剪距离”，事情会稍微复杂一些。在这种情况下，您需要图像全宽和全高（我们称名称为 imageWidth 和 imageHeight，然后从图像的尺寸中减去上一段中的 x2/y2 值。即 (300, 100, fullWidth-(300+ 166)，全高-(100+80))。

希望有帮助。

于 2013-10-21T18:15:04.263 回答