美文网首页图像处理111
聊天气泡图片对称拉伸(箭头保持在中间)

聊天气泡图片对称拉伸(箭头保持在中间)

作者: 烟影很美 | 来源:发表于2016-01-13 13:55 被阅读2157次

    一般聊天气泡图片拉伸结果是这样的:


    5EA10A2A-BE1C-4EF7-9A22-99978DA51C0F.png

    但是如果要求箭头在中间, 表示对某事物的说明, 就会很难实现:


    E565CB95-A394-4E87-896B-EE88FD61B8E7.jpg

    我的实现方法如下, 需要两次拉伸, 第一次拉伸后需要保存图片. 需要注意的只是:
    1.保存图片
    2.计算第一次拉伸的宽度:第一次拉伸宽度=最终宽度/2+原图宽度/2.
    3.如果原图箭头不在正中间, 不适用这个计算公式, 我的原图就是偏的, 所以结果有点偏.

       
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 350, (DeviceWidth-100)/2+35, 89)];
        imageView.image = [self stretchableImage];
        imageView.backgroundColor = [UIColor redColor];
        [self.view addSubview:imageView];
        
        //第一次拉伸宽度=最终宽度/2+原图宽度/2
        CGFloat tempWidth = (DeviceWidth-100)/2+70/2;
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(tempWidth, 89), NO, [UIScreen mainScreen].scale);
        [imageView.image drawInRect:CGRectMake(0, 0, tempWidth, 89)];
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        imageView.frame = CGRectMake(50, 350, (DeviceWidth-100), 89);
        imageView.image = [self stretchableImage:image];
    
    - (UIImage *)stretchableImage {
        UIImage *image = [UIImage imageNamed:@"气泡"];
        return [image stretchableImageWithLeftCapWidth:image.size.width *0.7 topCapHeight:image.size.height *0.5];
    // 0.7大于0.5
    }
    - (UIImage *)stretchableImage:(UIImage *)image {
        return [image stretchableImageWithLeftCapWidth:image.size.width *0.3 topCapHeight:image.size.height*0.5];
    // 0.3小于0.5
    }
    
    // 注意: 两次拉伸的参数0.7和0.3, 只要一个大于0.5一个小于0.5且不在尖角的和图片边角的位置
    
    516C4D6B-3256-4D8C-8C51-0244E48FEAC2.png

    续---2016-05-31
    今天对一个图片进行拉伸控制, 不管怎么设置不没有效果, 最后才发现是图片太大了, 显示的时候根本就没有对图片进行拉伸, 反而压扁了...谨记

    再续(-)---2016-10-28
    上面说的方法有点复杂, 还有一种方法, 使用两个ImageView, 然后用两张图片都是原来气泡图片的一半, 如下图:

    AB7F26BD-C9E2-4C34-B791-5F8F4D9CB560.png

    相关文章

      网友评论

        本文标题:聊天气泡图片对称拉伸(箭头保持在中间)

        本文链接:https://www.haomeiwen.com/subject/tzuckttx.html