Set the chat bubble color and how to add strokes

A simple chat bubble set color and how to add strokes problems encountered

For example, I now have the following picture:

Then I want to do the following:

The first of these methods

Should be the simplest way to directly provide a picture with a stroke, in this case, a picture of the green bottom of the basket and a picture of a red-framed yellow bottom.

But here's the problem, if you need to provide multiple color schemes. For example, in daytime mode is a color scheme, night mode is another color scheme, or one day to change the current color scheme, which will cause the program to store a large number of images. At present, each image of iOS needs to provide three resolutions of the picture, more than one picture means that actually more than three pictures.

Another problem is that the bubble has two directions, and we also need to provide two kinds of pictures. To combine the first question, it seems that we need to provide a lot of pictures. The second method of

This is the way this article is going to be addressed. The method is to automatically color the picture by the program.

Let's define the following method:

-(UIImage *) Imagemaskedwithcolor: (Uicolor *) color {UIImage *bubbleimage = [UIImage imagenamed:@ "bubble"];
	CGRect imagerect = CGRectMake (0.0f, 0.0f, BubbleImage.size.width, bubbleImage.size.height);

    UIImage *newimage = nil;
    Uigraphicsbeginimagecontextwithoptions (Imagerect.size, NO, Bubbleimage.scale);
        
        {Cgcontextref context = Uigraphicsgetcurrentcontext ();
        According to the document, this way of showing the picture will be upside down//So the picture must be reversed CGCONTEXTSCALECTM (context, 1.0f, -1.0f);
        
        Reverse and then move the inverted image back to its original position CGCONTEXTTRANSLATECTM (context, 0.0f,-(imageRect.size.height));
        Cgcontextcliptomask (context, imagerect, bubbleimage.cgimage); Fills the desired color Cgcontextsetfillcolorwithcolor (context, color.
        Cgcolor);
        
        Cgcontextfillrect (context, imagerect);
    Generate a new picture return newimage = Uigraphicsgetimagefromcurrentimagecontext ();
    } uigraphicsendimagecontext ();
return newimage; }

The function is called in the following way:

Self.imageview.image = [self imagemaskedwithcolor:[uicolor yellowcolor];

The results are shown below:

Then let's deal with the problem of strokes next. I also studied here for a long time, if you want to use the program automatically to make a generic irregular picture strokes, it seems difficult at present (if you have a better way, please do not hesitate to inform).

So I chose a relatively simple way, is directly with the bubble image of the middle button off, and then create a stroke picture, such as the following image:

Then we directly use the above technology, respectively, a solid bubble picture and stroke bubble picture fill the desired color, and then the two pictures together, so that a picture with a solid bubble stroke out.

Let's define the new method as follows:

-(UIImage *) Imagemaskedwithcolor: (Uicolor *) color Strokecolor: (Uicolor *) Strokecolor {UIImage *bubbleimage = [Uiimag
    E imagenamed:@ "bubble"];
    UIImage *strokeimage = [UIImage imagenamed:@ "Bubble_stroke"];
    CGRect imagerect = CGRectMake (0.0f, 0.0f, BubbleImage.size.width, bubbleImage.size.height);
    
    UIImage *newimage = nil;
    Uigraphicsbeginimagecontextwithoptions (Imagerect.size, NO, Bubbleimage.scale);
        
        {Cgcontextref context = Uigraphicsgetcurrentcontext ();
        CGCONTEXTSCALECTM (context, 1.0f, -1.0f);
        
        CGCONTEXTTRANSLATECTM (context, 0.0f,-(imageRect.size.height));
        Set the background color cgcontextcliptomask (context, imagerect, bubbleimage.cgimage); Cgcontextsetfillcolorwithcolor (context, color.
        Cgcolor);
        
        Cgcontextfillrect (context, imagerect);
        Set Stroke color Cgcontextcliptomask (context, imagerect, strokeimage.cgimage);
    Cgcontextsetfillcolorwithcolor (context, strokecolor.cgcolor);    Cgcontextfillrect (context, imagerect);
    NewImage = Uigraphicsgetimagefromcurrentimagecontext ();
    } uigraphicsendimagecontext ();
return newimage; }

The function is called in the following way:

Self.imageview.image = [self strokeimagewithcolor:[uicolor yellowcolor]
                                      strokecolor:[uicolor Redcolor]];

The results are shown below:

That leaves us with one last question, what about the reverse bubble?

We are defining a method for making bubble images turn:

-(UIImage *) Horizontallyflippedimagefromimage: (UIImage *) image
{
    return [UIImage imagewithcgimage:image. Cgimage
                               Scale:image.scale
                         orientation:uiimageorientationupmirrored];
}

Used in conjunction with previously defined methods:

UIImage *newimage = [self strokeimagewithcolor:[uicolor greencolor]
                                   strokecolor:[uicolor Bluecolor]];
Self.imageview.image = [self horizontallyflippedimagefromimage:newimage];

The results are shown below:

Summary

This time to introduce the content has been introduced, the most important advantage of this blog is that it can be very easy to adapt to a variety of color schemes, while providing a more practical way to stroke, but also to solve the problem of too many pictures caused by the program unnecessarily inflated.

Of course there are shortcomings, such as the width of the stroke cannot be customized, unless you re-screenshot. In addition, if the bubble shape changes, also need to re-screenshot.

In fact, some of the methods I use here come from Jsqmessagesviewcontroller, the third-party library.