The use of vector graph in IOS application development and the method of modifying vector graph color _ios

Before doing a bit of something, to fit 6 and plus, do your own cut map to find it really annoying enough. The method of generating PNG graphics based on vector graph is also afterwards know, study, hope next can practice. Enter the translation below.

The visual form of iOS applications is usually driven by graphical elements. When designing and developing an application, you need different specifications for application icons, such as default.png pictures of different sizes, as well as preparing @1x and @2x graphics resources for the implementation of the UI. All of these graphic elements will make your product look more appealing, but the drawbacks are obvious-you need to slice the graph individually for each specification. And with the release of iphone 6 and plus, we have another set of @3x to deal with, and things are getting more complicated.

Luckily, Apple has brought us some great tools to manage graphics resources in Xcode 6. Even better, new tools and implementations can help us calmly deal with future iOS devices, such as generating startup images for iOS 8 devices based on storyboard, so you don't have to make separate devices for different types of equipment. In addition, there is a very important new feature, that is, in the application build phase based on PDF image files automatically generate a variety of graphics resources. In this article, let's explore a way to help you save a lot of time and cost.

The first step: using Illustrator to generate PDF vector graphics

First, we need vector graphics in PDF format. You can use Adobe Illustrator or other vector graphics tools you are familiar with to generate @1x specs.

If you use illustrator:

Create a new document for the graphical elements you are exporting, and use the @1x specification to set the size of the document.
Copy the graphic elements you want to export to the new document.
From the File menu, select Save.
Remember to uncheck "Preserve Illustrator Editing capabilities" when saving.

The exported pdf is a stretch vector graphic that can be perfectly processed in iOS for @2x and @3x specifications. Next, we'll see how to set it up in the Xcode.

Step two: Set up in the Xcode project file

To use vectorization graphics resources, you need to manage your pictures in Xcode with asset catalog. Don't worry, you can still mix the standard graphics into the xcassets, without creating problems. Perform the following steps:

• If you do not have a xcasset file, create one. If you have already created it, open it in your project.
• From the Editor menu, select New Image Set.
• In the newly created set of pictures, select an empty picture set, and then open the Utilities panel.
• Select the property inspector Attributes Inspector.
• In the Type Drop-down list, select Vectors.
• The picture assembly becomes a "all-universal" with only one drop point.
• Drag and drop your PDF vector graphic into the gallery.
  

Next, you can use the graphical resources in image catalog as usual, either by code or by Interface Builder. For example, in code, use the string "imagenamed:" + the name of the picture set.

Step Three: witness the magic Moment

Xcode builds the project by automatically creating @1x, @2x, and @3x Three specifications of PNG files based on PDF vector graphics in asset catalog. For example, you provide a @1x specification, 150px*150px PDF file for Xcode, then Xcode automatically creates the following PNG graphics:

@1x specifications, size for 150px*150px
@2x specifications, size for 300px*300px
@3x specifications, size for 450px*450px
When the application is running, iOS picks out the appropriate specs from the top three graphics resources according to the different device types. Also remember to set the constraints for AutoLayout to ensure that the graphics will not be stretched on the large size device. What Xcode does is create a PNG file based on PDF vector graphics, and the application runs with a raster picture, not a vector graphic that can be scaled automatically.

Attention

• Support for vector graphics is only staged-during the build phase, Xcode generates PNG images based on PDFs and outputs them to the interface.
• Once you've finished setting up the vector graphic, you can't specify a new output size for it. If you need a larger specification, you need to create a new PDF graphic, otherwise the original picture will be distorted when you use AutoLayout.
• As mentioned earlier, IOS 8 can only support PNG files based on PDF, but OS X can truly support vector graphics, and you can scale vector graphics directly with auto layout or code, without creating any distortion.
• This approach is not compatible with iOS 7 systems, because the associated graphics resources are managed through asset catalog.
• If you have used a similar script or tool to automatically generate a variety of graphical resources, this approach will not be of much use to you. However, if your application has both OS X and iOS two versions, and you use some of the same graphics, this approach will be much more effective.

Change the color of a vector graph

Why to change the color of the vector map, directly called the designer cut a picture is not good.

Mainly recently, designers go home, there is no way only a picture, I am lazy with PS.

I've got a problem for myself.

In fact, also simple in PS is not select selection, fill Color, and then save.

The same is true for iOS.

The same is true for iOS.

Copy Code code as follows:

Uiimage+imagecolor.h
#import <UIKit/UIKit.h>
@interface UIImage (Imagecolor)
/**
* Modify Vector graph color
*
* @param maskcolor Modify Color
* @return
*/
-(UIImage *) Imagemaskwithcolor: (Uicolor *) MaskColor;
@end
Uiimage+imagecolor.m
#import "Uiimage+imagecolor.h"
@implementation UIImage (Imagecolor)
-(UIImage *) Imagemaskwithcolor: (Uicolor *) MaskColor {
if (!maskcolor) {
return nil;
}

UIImage *newimage = nil;

CGRect imagerect = (cgrect) {cgpointzero,self.size};
Uigraphicsbeginimagecontextwithoptions (Imagerect.size, NO, Self.scale);

Cgcontextref context = Uigraphicsgetcurrentcontext ();
CGCONTEXTSCALECTM (Context, 1.0,-1.0);
CGCONTEXTTRANSLATECTM (context, 0.0,-(imageRect.size.height));

Cgcontextcliptomask (context, imagerect, self. Cgimage);//select selection to obtain an opaque area path
Cgcontextsetfillcolorwithcolor (context, maskcolor.cgcolor);//Set color
Cgcontextfillrect (context, imagerect);//Drawing

NewImage = Uigraphicsgetimagefromcurrentimagecontext ()//Extract Picture

Uigraphicsendimagecontext ();
return newimage;
}
@end

Summarize:
Designers can cut you a full set that is the best, it is also easy.
However, this is a good drop, you can save the size of the app, you can save the button highlighting, selection and so on picture.