28. 图像旋转

28.Image Rotation

This post is a quick diversion, on request from a user on the Greenfoot site. They asked how to rotate an image, which is actually quite a simple task, given what we have already covered about rotation andpolar coordinates.

这篇帖子是一个小插曲，为了回答Greenfoot网站一个用户的提问。他们问到如何旋转一个图像，它实际上这是一个非常简单的任务，因为我们已经讨论了旋转和极坐标。

The idea behind rotating an image is this: create a new image, and go through every pixel on the new image. For that destination pixel, calculate a source position by rotating the position backwards. Then pick out that pixel from the original image, and use that colour to fill in the new pixel.

旋转图像背后的思路是：创建一个新图像，遍历新图像的每一个像素。对于目标像素，通过反向旋转其位置来计算源位置。接着从源图像取出那个像素，并使用它的颜色去填充新的像素。

Assume you want to rotate an image clockwise by 140 degrees. You go through the pixels: for example, the coloured pixel on the new image on the left, below. To work out what colour to use, you convert the centre of that pixel into polar coordinates, relative to the centre of the image (assuming you want to rotate around the centre). Then subtract 140 degrees from the rotation, but keep the distance from the centre the same. Wherever this new coordinate is (once you’ve converted back to cartesian coordinates), use that pixel as the colour:

假设你希望将一个图像顺时针旋转140度。你检查像素：比如，下图中左边新图像的彩色像素。为了算出要使用什么颜色，你将那个像素的中点转换为极坐标，相对于图像的中心而言（假设你希望围绕中点旋转）。接着让角度减去140度，而距离中点的距离保持不变。无论这个新的坐标在哪（一旦你已经转换回笛卡尔坐标），使用那个像素作为颜色。

That leads to the following source code:

这可以用如下代码表示：

    public void rotateImage(int rotateBy)
    {
        GreenfootImage rotated = new GreenfootImage(original.getWidth(), original.getHeight());
        
        double centreX = (double)original.getWidth() / 2;
        double centreY = (double)original.getHeight() / 2;
        
        for (int x = 0; x < rotated.getWidth(); x++)
        {
            for (int y = 0; y < rotated.getHeight(); y++)
            {
                double dir = calculateDirection(x - centreX, y - centreY);
                double mag = calculateMagnitude(x - centreX, y - centreY);
                
                dir = dir - rotateBy;
                
                int origX = (int)(centreX + calculateX(dir, mag));
                int origY = (int)(centreY + calculateY(dir, mag));
                
                if (origX >= 0 && origX < original.getWidth() &&
                    origY >= 0 && origY < original.getHeight())
                {
                    rotated.setColorAt(x, y, original.getColorAt(origX, origY));
                }
            }
        }
        
        setImage(rotated);
    }

This is what is known as a nearest-neighbour rotation: for each pixel we are picking the single closest pixel to use as the colour. Better rotation algorithms (especially for small images) do a blend of pixels from the original image. But you canhave a play with this simple image rotation code via the scenario on the Greenfoot site.

这是被称为最近相邻旋转：对于每个像素我们获取单一最接近的像素去作为颜色使用。更好地旋转算法（特别对于小图像）实行了源图像像素的混合。但是你可以通过Greenfoot网站的游戏剧本玩一下这个简单的图像旋转代码。

Exercises

Our image rotation isn’t perfect — here’s some challenge exercises for you to improve it:

1. The image has its corners cut off when it is rotated. Think about why this is, and work out how large you need to make the destination image to avoid this ever happening (hint: the longest dimension across a rectangle is from one corner to the other)?
2. Rather than make the image as large as possible, can you work out exactly how big it needs to be, given the degrees to rotate by?
3. Currently the image rotates around the centre of the original. Can you modify the code to rotate around an arbitrary point in the original image? (Note: this will mess with the previous adjustments to make the destination image be large enough!)