Обрезать логотип из Sprite с помощью атрибутов CSS

Question

Для данного спрайта, например, спрайт Stackru и атрибуты CSS, такие как:

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

Я могу обрезать логотип спрайта с помощью библиотеки Chunky PNG. Однако некоторые сайты имеют отрицательную фоновую позицию, как, например, этот сайт: ccs - какой спрайт является http://shop.ccs.com/ns/images/ccs-sprite-master-v4.png и имеют следующее CSS атрибуты для логотипа:

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

Так как в моем методе кадрирования мне нужно передать начальную (x,y) координату и конечную (x,y) координату, я не вижу, как я могу перевести эти отрицательные значения в то, что метод культуры может понять. Как я могу это сделать?

Answer 1

В CSS вы используете отрицательные координаты background-position, потому что изображение перемещается влево и вверх относительно прямоугольника элемента, так что ожидаемая область видна внутри границ элемента.

Если ваша библиотека ожидает получения координат внутри изображения, которое нужно извлечь, просто отмените координаты положения фона. Итак, в вашем примере вы должны извлечь изображение в координатах (300, 100) с шириной и высотой (166, 80).

Я не смотрел API вашей библиотеки. Существует еще два типа координат, которые может ожидать метод обрезки, который вы обсуждаете.

Если он выходит за абсолютные координаты (то есть x1, y1, x2, y2), просто добавьте ширину и высоту к левой и верхней координатам. Это будет (300, 100, 300+166, 100+80).

Все немного сложнее, если библиотека ожидает "расстояние обрезки от каждой границы". В этом случае вам понадобится изображение полной ширины и полной высоты (давайте назовем имена imageWidth и imageHeight, затем вычтем значения x2/y2 в предыдущем абзаце из размера изображения. Это будет (300, 100, fullWidth-(300+166), fullHeight-(100+80)).

Надеюсь, это поможет.