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

IOS how to draw in memory, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

All of the above is done by extending UIView and rewriting the drawRect: method, which draws all the graphics directly on the UIView control-- because every time the control is displayed, the drawRect: method is called, which means that every time the control is displayed, the program needs to redraw all the graphics, which obviously doesn't perform well. In addition, there are times when you need to draw pictures in memory so that they can be exported locally to the phone or uploaded to the network.

Unlike drawing directly on the UIView control, when drawing in memory, developers need to prepare their own drawing environment. Quartz 2D provides a very convenient function: UIGraphicsBeginImageContext (CGSize size), which is used to prepare the drawing environment. When the drawing is complete, you can call the UIGraphicsEndImageContext () function to end the drawing and close the drawing environment.

To sum up, the steps for drawing in memory are as follows.

Call the UIGraphicsBeginImageContext (CGSize size) function to prepare the drawing environment.

Call the UIGraphicsGetCurrentContext () function to get the drawing CGContextRef.

Draw the collection graph, use the path, and so on as described earlier.

Call the UIGraphicsGetImageFromCurrentImageContext () function to get the currently drawn graph, which returns a UIImage object.

Call the UIGraphicsEndImageContext () function to end the drawing and close the drawing environment.

In addition to drawing using the method described earlier that requires the CGContextRef parameter, you can also call the following function to draw.

UIRectFill (CGRect rect): fills a rectangle on a picture in memory created by the current drawing environment.

UIRectFillUsingBlendMode (CGRect rect, CGBlendMode blendMode): fills a rectangle on a picture in memory created by the current drawing environment, drawing using the specified blending mode.

UIRectFrame (CGRect rect): draws a rectangular border on a picture in memory created by the current drawing environment.

UIRectFrameUsingBlendMode (CGRect rect, CGBlendMode blendMode): draws a rectangular border on an in-memory picture created by the current drawing environment, using the specified blending mode.

The above four methods are drawn directly on the in-memory images created by the current drawing environment, so none of these methods need to pass in CGContextRef as a parameter.

The following program demonstrates drawing in memory and outputting pictures locally on the phone. First create a Single View Application that contains an application delegate class and a view control

Device and supporting Storyboard interface design file. This program does not need to modify the interface design file, nor does it need to customize the UIView control, the program only adds a UIImageView to the UIView and controls the UIImageView to display the pictures drawn in memory. Therefore, as long as the program modifies the view controller class, the implementation code of the view controller class is as follows.

Program list: codes/12/12.2/DrawImage/DrawImage/FKViewController.m

The first line of bold code in the program is used to create a drawing environment for pictures in memory, then call the UIGraphics- GetCurrentContext () method to get the CGContextRef of the drawing, and the rest of the drawing operation is exactly the same as the various drawing codes introduced earlier.

After the graphics are drawn, the second line of bold code calls the UIGraphicsEndImageContext () method to finish the drawing. After the drawing is finished, you can call the UIGraphicsGetImageFromCurrentImageContext () function to get the current picture. The program can not only display the picture using UIImageView (as shown in the viewDidLoad method of the program), but also output the picture to the phone locally.

The last line of bold code calls the UIImagePNGRepresentation () function to get the data for the UIImage image. This method returns the NSData object, and then you can use the NSData method to execute the output.

Tip:

The role of the UIImagePNGRepresentation () function is to obtain UIImage images converted into PNG format of picture data, there is a similar UIImageJPEGRepresentation () function, its role is to obtain UIImage images converted to JPEG format of picture data, UIImageJPEGRepresentation () function one more parameter, used to specify the compression quality of the picture.

Compile and run the program, and you can see the effect shown in figure 12.13.

The program also outputs the drawn pictures to the application sandboxie's Documents folder. For the simulator, the Documents folder is located under a hidden folder on the OS X system. To view the folder of sandboxie in the iOS application, follow these steps.

Tip:

In order to ensure the security of the system, iOS applications can only read and write files under the file area assigned by the system for the application, which is called sandboxie of the application. All non-code files for iOS applications are saved here, such as images, icons, sounds, images, property lists, text files, and so on. Each application of iOS has its own independent sandboxie, which cannot access sandboxie of other applications.

(1) Open the Finder of the Mac OS X system.

(2) Click the "go to" → to folder "menu item of the main menu in the Finder application, or click the command+Shift+G shortcut key, and the system pops up the dialog box shown in figure 12.14.

(3) enter / users/ login user name / library/application suport/iPhone Simulator in the dialog box shown in figure 12.14, and then click the "go" button to enter the folder, you can see 5.0,5.1,6.0,6.1,7.0and other folders, this is the iOS emulator folder that has been installed on the computer-different folders correspond to different versions of iOS emulator.

(4) enter the folder corresponding to the current version of iOS simulator, for example, if you are currently using iOS 7.0 simulator, then enter the simulator through the 7.0folder, and then you can see that the directory of the simulator includes folders such as Applications, Media, Root, tmp, resource library, etc., in which all the iOS applications installed on the simulator are saved under the Applications folder.

(5) enter the Applications folder, you can see a large number of subfolders under the folder, each subfolder corresponds to an application, find the corresponding subfolder that should have been used, and enter the subfolder, you can see the contents of Documents, DrawImage.app, Library, and tmp. Under the Documents folder, you can see the newPng.png image you just created, as shown in figure 12.15.

Figure 12.15 View the files under the simulator sandboxie

Tip:

Readers may wonder, if you can directly view the hidden files of the OS X system, can you directly enter the simulator sandboxie directory through Finder? In fact, OS X does not provide a graphical interface to set up hidden files, but you can modify them through the command line. Type defaults write com.apple.finder AppleShowAllFiles-bool true in the command line window of the OS X system, then exit all Finder, restart the Finder program, and you can see the hidden files. If you want to restore concealment, type defaults write com.apple.finder AppleShowAllFiles-bool false in the command line window, then exit all Finder and restart the Finder program

Example: drawing board

The example will implement a drawing board where users can "doodle" on the phone as much as they like, and after the graffiti is finished, they can get the picture they want-the picture can be saved locally or shared on the Internet.

In order to implement this application, it is not appropriate to rewrite the drawRect: method of UIView-if you only rewrite the drawRect: method of UIView to implement the drawing, the user will lose the content of the last drawing each time. This is obviously not what this example is intended to achieve.

In order to ensure that the content of each drawing will not be lost, a picture will be created in memory. When the user starts drawing, the program will rewrite the drawRect: method for real-time drawing. When the user wants to draw the graph, the picture will be drawn to the picture in memory.

For example, when a user wants to draw a straight line on the screen, the program will take the first point where the user starts to touch the screen as the starting point for the drawing. When the user drags his finger on the screen instead of leaving the screen, the program will constantly obtain the coordinates of the drag point and call the drawRect: method of the UIView This method draws from the starting point to the current drag point-because drawRect: each redraw draws only the line from the starting point to the current drag point, so you can see the line drawn by the drag in real time. When the user releases the finger (indicating that the user has determined the final drawing point), draw a straight line from the starting point to the release point of the finger on the picture in memory.

It is important to point out that in order to ensure that the user can see the previously drawn graphics, override the drawRect: method of UIView must first draw the image in memory to the UIView.

First create a Single View Application that contains an application delegate class, a view controller, and a matching Storyboard interface design file. Open the interface design file in Interface Builder and change the largest UIView in the interface design file to use a custom FKDrawView class. Place a UISegmentedControl control above the interface that controls the drawing color, place a toolbar below the interface, and add a UISegmentedControl control to the toolbar that controls the drawing shape. The interface design of this application is shown in figure 12.16.

In order for the two UISegmentedControl controls on the interface to control the color and shape drawn by the user, you need to bind changeColor: and changeShape: two IBAction methods to the two UISegmentedControl controls in Interface Builder.

In order to record the graphics that the application currently needs to draw, this program first creates a header file in which only one enumeration type is defined as follows.

Program list: codes/12/12.2/HandDraw/HandDraw/Constant.h

The view controller class of this application is relatively simple, mainly to implement changeColor: and changeShape: two IBAction methods. The following is the implementation code for the view controller class.

Program list: codes/12/12.2/HandDraw/HandDraw/FKViewController.m

From the two lines of bold code in the above program, we can see that the view of the view controller class is not UIView, but a custom FKDrawView. This FKDrawView is the key to the implementation of this application. FKDrawView not only has to rewrite the drawRect: method, which also accomplishes two things: drawing the picture in memory; dragging the user's finger to draw "real-time" drawing.

The interface code of the FKDrawView class is relatively simple, just define two properties, currentColor and shape, which are used to receive the drawing color and shape passed in by the controller. The implementation code for the FKDrawView class is as follows.

Program list: codes/12/12.2/HandDraw/HandDraw/FKDrawView.

The key to this program is the bold draw: method above, which draws different shapes according to the type of graphics you want to draw. It is important to note that this method has been called in two places-when the user drags his finger, the touchesMoved: withEvent: method is fired, which tells the control to redraw itself, and the control calls the drawRect: method to redraw, and the bold draw: method is called in the drawRect: method to perform real-time drawing. In addition, when the user's finger ends touching, fire the touchesEnded: withEvent: method, which calls [self draw:buffCtx]; code, which will draw the shape of the starting point to the end of the contact point on the image in memory.

There is also a slightly more complicated part of the program, which is the so-called "free drawing". That is, when the user's finger is dragged on the screen, the program needs to draw the trajectory of the finger drag, which appears to be an irregular curve, but in fact it consists of many very short segments-- when the user's finger is dragged on the screen. The program will continue to draw from the last contact point to the current contact point, because these segments are very short, so the user will think that we have drawn a smooth curve. In order to complete this drawing process, the program uses prevPoint to save the coordinates of the last touch point, and constantly draws the line segment from prevPoint to lastPoint. After each drawing, it uses prevPoint to save the coordinates of the current touch point. For the next drawing, the current touch point becomes the last contact point.

After reading the above, have you mastered the method of drawing in memory in iOS? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.