Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is the change of iOS Transform coordinates". In the daily operation, I believe that many people have doubts about what the change of iOS Transform coordinates is. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "what is the change of iOS Transform coordinates?" Next, please follow the editor to study!

When using CGContext, because the coordinates of Quartz 2D and UIKit are inconsistent, it is necessary to change the context again to achieve the desired results.

1. Introduction to the origin of different coordinates

In Quartz 2D, the coordinate origin is in the lower-left corner of the canvas, while in UIKit, it is consistent with the screen coordinates, with the upper-left corner as the coordinate origin.

If F is drawn at the origin of (0B0), the following results will be obtained in different coordinate systems. 2. Conversion between Quartz 2D and UIKit coordinate system

2.1 UIImage drawing

In the UI development of iOS, take UIImage as an example, draw a picture and set the frame of image to (0,0,320,320), you will get the picture on the right of the image above.

If you use the following code to read the transform of Context, you can see that the transform is not a unit matrix.

CGRect frame = CGRectMake (0.0,0.0,720, 1280); UIGraphicsBeginImageContext (frame.size); CGContextRef context = UIGraphicsGetCurrentContext (); CGAffineTransform contextTransform = CGContextGetCTM (context)

The transform setting here will make the coordinate origin of Quartz 2D coincide with that of UIKit, and it is also convenient for the drawing of controls in UIKit. Coordinate system changes can be referred to the following figure. This is why you get an inverted image if you call CGContextDrawImage directly on the acquired context.

But if you use UIImage's drawInRect method, the document goes like this: Instance Method draw (in:) Draws the entire image in the specified rectangle, scaling it as necessary to fit. Declaration func draw (in rect: CGRect) Parameters rect The rectangle (in the coordinate system of the graphics context) in which to draw the image. Discussion This method draws the entire image in the current graphics context, respecting the image's orientation setting. In the default coordinate system, images are situated down and to the right of the origin of the specified rectangle. This method respects any transforms applied to the current graphics context, however. This method draws the image at full opacity using the CGBlendMode.normal blend mode.

In other words, the coordinates used in UIImage drawing are still the internal coordinates of UIKit, so there is no need to make any changes to the coordinate system to draw the same picture as the rect position, of course, this method will also draw according to the orientation of the picture.

2.2 CGContextDrawImage drawing

When changing the transform of context, it is actually the coordinate system itself that is changing.

When we call the drawing method, we still use the internal coordinates of the coordinate system, so when we want to draw a picture such as UIKit based on the acquired context, we also need to adjust the coordinate system before drawing.

/ / Y axis flip CGContextScaleCTM (context, 1,-1)

/ / the origin of the picture needs to be aligned with the upper left corner, and the image height CGContextTranslateCTM (context, 0,-imageSize.height) needs to be translated downward on the Y axis.

/ / draw CGContextDrawImage (context, frame, image.CGImage)

3 transform Anchor Point change

For example, on the picture editing page, we often encounter changes such as zooming, rotating and shifting the picture using gestures, and then generate a new picture.

Depending on the gesture callback, we can modify the view.transform so that the view on the interface changes corresponding to the gesture.

Here, UIKit in order to facilitate us to modify the UI interface, the transform of view is anchored by the center of view.

The description in UIView's transform is to use center to modify position.

Use this property to scale or rotate the view's frame rectangle within its superview's coordinate system. To change the position of the view, modify the center property instead. The default value of this property is CGAffineTransformIdentity.

When many other methods are called, transform needs to use the upper left corner as the anchor point, so there is a need to make a conversion, as shown in the following figure. In the modification of the UI interface, we can use the callback values of zoom and rotation gestures to directly modify the transform of view, as well as the callback of displacement to modify center, and we can achieve the desired results. But this transform cannot be used in context drawing because the change of coordinate system is done with the origin as the anchor point.

Therefore, according to the position of the existing coordinate system of context, the anchor point is in the upper left corner, which needs to be modified by transform.

As you can see from the image above, the anchor point only affects the position information and does not change the scaling and rotation.

UIImage * image; / / initialize the picture

UIView * view;// the size of the changed view,view should be consistent with the image to ensure that the scaling is correct.

CGAffineTransform transform = view.transform; CGSize imageSize = image.size; transform.tx = view.center.x; transform.ty = view.center.y; transform = CGAffineTransformTranslate (transform,-imageSize.width * 0.5,-imageSize.height * 0.5)

Where tx,ty is the position of the anchor point in the coordinate system

The current anchor is at the center of the view, and we need to change it to the upper-left corner of the view so that it coincides with the origin of the coordinate system. Where * (imageSize.width * 0.5, imageSize.height * 0.5) * is the position of the anchor point in the image, and transform is the change matrix of the anchor point in the upper left corner of the view.

4. Combined Transform

In order to get the results in the middle of the image above on CGContext, you not only need to apply the change of reducing 1 to 2 and rotating 45 degrees, but also need to adjust.

As mentioned earlier, CGContext applies rotation to the coordinate system, which is consistent with the way the view applies rotation. Therefore, when the CGContext is obtained directly, and the optimized coordinate system is also the origin of the upper left corner, we can directly apply the calculated transform to the CGContext.

After that, it is still because the drawing of the coordinate system is calculated by its own coordinate system, and then do a round of flipping and displacement of the coordinate system to get the final result, similar to the operation of the following figure.

It should be noted here that each new change is based on the previous change, so both the view and the transform of context are modified sequentially, which is consistent with matrix multiplication, and the order affects the result.

At this point, the study of "what is the change of iOS Transform coordinates" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.