css - 如何轻松旋转灰度图像

Question

我正在应用两个旋转方程来轻松旋转灰度图像。然而，它并没有旋转。

这两个方程是:

x' = x *cos (theta) - y *sin (theta)

和

y' = x *sin (theta) + y *cos (theta)

我访问了这个网站上的一些问答，但解释不清楚。

IMG imgRotate(IMG output, float deg)
{

  IMG lalo;
  lalo.degree = deg;


  float radian = ((2 *pi*output.degree) / 360);

  float cosine = cos(radian);
  float sine = sin(radian);
  int x1 = (output.height * sine);
  int y1 = (output.height * cosine);
  int x2 = (output.width * cosine + output.height* sine);
  int y2 = (output.height* cosine -output.width * sine);
  int x3 = (output.width * cosine);
  int y3 =(-output.width * sine);
  int minx = min(0, min(x1, min(x2, x3)));
  int miny = min(0, min(y1, min(y2, y3)));
  int maxx = max(0, max(x1, max(x2, x3)));
  int maxy = max(0, max(y1, max(y2, y3)));

  int w = maxx - minx;
  int h = maxy - miny;
  int x, y,nx,ny;


  lalo.pixel = (unsigned char*)calloc(lalo.height*lalo.width, sizeof (unsigned char));

    for (y = 0; y < h; y++)
    {
        for (x = 0; x <w; x++)
        {
            nx = ceilf(x*cos(radian) - y*sin(radian));
            ny = ceilf(x*sin(radian) + y*cos(radian));

            lalo.pixel[w*ny + nx] = output.pixel[w*ny + nx];
        }
    }
    return lalo;

}

我添加了以下代码，但它给出的图像不完整

IMG imgRotate(IMG output,float deg, int height, int width)
{

  IMG lalo;
  lalo.degree = deg;
  lalo.width = width;
  lalo.height = height;
  lalo.pixel=(unsigned char*)calloc (lalo.height*lalo.width, sizeof (unsigned char));

  float radian = ((2 *pi*lalo.degree) / 360);
  int x, y, x1, y1;

  for (y = 0; y < lalo.height; y++)
  {
    for (x = 0; x <lalo.width; x++)
    {
      x1 = ceilf(x*cos(radian)-y*sin(radian));
      y1 = ceilf(x*sin(radian) + y*cos(radian));
      lalo.pixel[lalo.width*y1+x1] = output.pixel[output.width*x1+y1];
    }
  }
  return lalo;
}

Answer 1

这是我们用 css 做的，不确定是否有帮助

.image-class {
   
    /* Rotate div */
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

<img class="image-class" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/images/behavioral-css/transform_rotate.png"/>