美文网首页
聊天气泡-resizableImageWithCapInsets

聊天气泡-resizableImageWithCapInsets

作者: 守护地中海的花 | 来源:发表于2020-04-09 14:36 被阅读0次

近日做了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

相关文章

网友评论

      本文标题:聊天气泡-resizableImageWithCapInsets

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