使用CGContextDrawImage旋转图像 [英] rotate image using CGContextDrawImage

问题描述

如何在中心旋转由 CGContextDrawImage（）绘制的图像？

How can I rotate an image drawn by CGContextDrawImage() at its center?

在 drawRect：

                CGContextSaveGState(c);


                rect = CGRectOffset(rect, -rect.size.width / 2, -rect.size.height / 2);
                CGContextRotateCTM(c, angle);
                CGContextDrawImage(c, rect, doodad.CGImage);
                CGContextRotateCTM(c, -angle);
                CGContextTranslateCTM(c, pt.x, pt.y);

                prevRect = rect;

                CGContextRestoreGState(c);

我在原点绘制图像，并在其中心旋转图像，然后转换到它应该的位置被画下来。不工作。

I draw the image at the origin, and rotate it at its center, then translate to where it should be drawn. Not working.

推荐答案

要记住关于坐标变换的事情 - 好吧，一个记住 - 你不是在操纵对象，比如图形编辑器中的Transform命令;你正在操纵空间本身。

The thing to remember about coordinate transformations—well, one of the things to remember—is that you are not manipulating objects, like the Transform command in a graphics editor; you are manipulating space itself.

想象一下，该设备被鹅颈臂悬挂在桌子上，并固定在位。坐标转换会使桌面移动（平移），然后以一种方式或另一种方式转动（旋转），甚至挤压和拉伸它（缩放）。

Imagine that the device is suspended over a desk by a gooseneck arm, and is fixed in position. Coordinate transformations move the desk around (translation), and turn it one way or the other (rotation), and even squash and stretch it (scaling).

另一个关于坐标变换要记住的事情是变换总是相对于原点。想象一下，您的桌子的一个角落 - 对应于您视角的一角 - 直接位于您的视图最终在屏幕上的角落下方。翻译移动桌子的角落，桌子的其余部分随之移动，在屏幕下方以某种方式滑动。旋转会使桌子绕过那个角落。

Another of the things to remember about coordinate transformations is that transformation is always relative to the origin. Imagine that your desk starts out with one of its corners—corresponding to a corner of your view—directly underneath the corner of where your view ends up on the screen. Translating moves the corner of the desk, and the rest of the desk with it, sliding it one way or another underneath the screen. Rotating turns the desk around that corner.

还有一件事：转型影响未来，而不是过去。绘制一些内容然后尝试对其进行转换将无法正常工作，因为您不会转换已绘制的内容，而是转换要绘制的空间。因此，我们需要移动桌面才能将图像放在正确的位置。

One more thing: Transformations affect the future, not the past. Drawing something and then trying to transform it won't work, because you don't transform what you've drawn, you transform the space you're going to draw into. So, we need to move the desk before we can place the image in the right spot.

（我提到最后一部分，因为你有几个转换命令是立即通过你的 CGContextRestoreGState 调用恢复。它们之间没有任何图画可供它们影响。）

(I mention that last part because you have a couple of transformation commands that are immediately reverted by your CGContextRestoreGState call. There is no drawing in between for them to affect.)

所以，让我们看看从未旋转的图像矩形开始。

So, let's start with the unrotated rectangle of the image.

CGRect imageRect = { pointWhereYouWantTheImageCentered, doodad.size };

现在， CGContextDrawImage 采用矩形，但，如你所知，它将从该矩形的左下角绘制图像，而不是中心。 （因此整个练习。）

Now, CGContextDrawImage takes a rectangle, but, as you know, it's going to draw the image from the lower-left corner of that rectangle, not the center. (Hence this whole exercise.)

所以，这就是你要做的事情。在这结束时，你将不是在上面显示的那一点绘制图像，而是在零点处绘制 - 也就是说，在桌子的角落。 （不是在角落的中心，而是桌面角落的图像角落。）

So, here's what you're going to do. At the end of this, you're going to draw the image not at that point shown above, but at the zero point—that is, on the very corner of the desk. (Not centered on the corner, but with the image's corner on the desk's corner.)

这将如何运作？这需要一些设置。你将不得不移动你的办公桌。

How will that work? It takes some set-up. You're going to have to move your desk.

首先，你需要移动你的办公桌向上和正确直到桌面的原点位于所需的中心点：

First, you need to move your desk up and right until the origin corner of your desk is at the desired center point:

CGContextTranslateCTM(context, imageRect.origin.x, imageRect.origin.y);

然后你进行轮换（将桌子转到原点角落）：

Then you do the rotation (turning the desk around its origin corner):

CGContextRotateCTM(context, angleInRadians);

然后您将桌面移回向下并向左图像宽度和高度的一半：

Then you move the desk back down and left by half of the image's width and height:

CGContextTranslateCTM(context, imageRect.size.width * -0.5, imageRect.size.height * -0.5);

然后，最后，将图像放在桌子的一角。

And then, finally, place the image on the corner of the desk.

CGContextDrawImage(context, (CGRect){ CGPointZero, imageRect.size }, [doodad CGImage]);

当您的办公桌移动时，该矩形的中心位于您屏幕上的点的正下方希望图像居中，因此图像居中。

With your desk so moved, the center of that rectangle lies directly under the point on the screen where you want the image centered, so the image is so centered.

这篇关于使用CGContextDrawImage旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！