聊天气泡-resizableImageWithCapInsets

近日做了IM 气泡问题 研究一哈
参考
原始图来一个

IMG_5345.PNG
目标平铺拉伸在白色背景内 如下图
//保留下部分
IMG_BC2C4C7E7750-1.jpeg
//保留上部分
IMG_AC94F75D69E9-1.jpeg

语法含义：

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode API_AVAILABLE(ios(6.0)); // the interior is resized according to the resizingMode

• capInsets : 截取部分
• resizingMode：UIImageResizingModeTile平铺和UIImageResizingModeStretch拉伸。 平铺是在拉大的空间中重复原图capInsets指定的部分，拉伸是拉伸capInsets所指定的区域进行填充。

---

下面都用UIImageResizingModeStretch来实现效果

---

UIImageResizingModeStretch

首先截取被拉伸的区域 且区域不能影响到右侧的箭头 所以截取区域要在左侧 至于是距离上还是距离下 这个要区分。
为了好测试自定义view 添加到图片上

• 原图

  
  image.png

上面空隙2 左 7 底部 11 右边没有空隙 但是箭头大概7

• 偏下截取

  
  IMG_67F7DF05AF8D-1.jpeg

    //上面
    UIView *view = [[UIView alloc]init];
    [self.view addSubview:view];
    view.backgroundColor = WhiteColor;
    view.frame = CGRectMake(15, kTopHeight + 30, WIDTH - 30, 200);

    UIImageView *bubbleView = [[UIImageView alloc]init];
    [view addSubview:bubbleView];
    [bubbleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(0);
        make.size.mas_equalTo(CGSizeMake(65, 58));
    }];
    UIImage *image = [UIImage imageNamed:TUIKitResource(@"SenderTextNodeBkg")];
    bubbleView.image = image;
    
    UIView *inview = [[UIView alloc]init];
    [bubbleView addSubview:inview];
    inview.backgroundColor = RedColor;
    [inview mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(5);
        make.left.mas_equalTo(10);
        make.width.mas_equalTo(5);
        make.height.mas_equalTo(5);
    }];


    UIView *view = [[UIView alloc]init];
    [self.view addSubview:view];
    view.backgroundColor = WhiteColor;
    view.frame = CGRectMake(15, kTopHeight + 30 + 300, WIDTH - 30, 200);

    //下面
    UIImageView *bubbleView = [[UIImageView alloc]init];
    [view addSubview:bubbleView];
    [bubbleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_equalTo(0);
    }];
    UIImage *image = [UIImage imageNamed:TUIKitResource(@"SenderTextNodeBkg")];
    image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(5, 10, 48, 50) resizingMode:UIImageResizingModeStretch];
    bubbleView.image = image;

IMG_0605C5BEAB98-1.jpeg

修改snapWidth 15 同意没有问题的

IMG_45C9C5DA23D5-1.jpeg

修改snapWidth snapHeight 25 同意没有问题的

IMG_E7D6086B4484-1.jpeg

• 偏上截取

CGFloat orinX = 10,orinY = 38;
CGFloat bubbleViewWidth = 65,bubbleViewHeight = 58;
CGFloat snapWidth = 10,snapHeight = 5;

image.png