聊天氣泡圖片對稱拉伸(箭頭保持在中間)

一般聊天氣泡圖片拉伸結果是這樣的:


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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,245評論 4 61
  • 我有很多話想說,卻不知從何說起。 我想找個人說話,卻又想一人靜靜。 我覺得好累,可能是我錯了。 如果明天,我可能選...
    陰天n閱讀 270評論 0 0
  • 站在下一個億萬用戶的當口,聽聽大象講講自己的故事: 點擊查看:http://weibo.com/p/1001603...
    聰聰閱讀 418評論 0 3
  • 這是我看到過的,最像公主的公主,沒有之一。 赫本與電影里公主的形象是如此的相符,以至于我都覺得她本來就是個高貴而又...
    一鹿長清閱讀 509評論 2 3
  • 我一點兒也不喜歡弄網站 累 我承認我話嘮 但僅限于說 懶得寫 更懶得用鍵盤寫 鍵盤又不能轉 我喜歡早上睡覺 一覺睡...
    fishol閱讀 230評論 0 1