引言

©️本文首發個人部落格

• 一之筆

• iOS給一張圖片新增帶有雷達效果的標記，類似地圖示記位置

在實際開發過程中，往往有這樣一種場景，比如，某一個地方需要新增一個標記，這個標記要足夠醒目，一眼就可以讓使用者知道，標記的地方在哪裡，就像百度地圖或者谷歌地圖裡面的，用來標記使用者位置的標記，以一種“雷達”效果，或者說“水波”效果，動態閃爍，引起使用者的注意，並且，背景圖片是可以放大的；

以上就是我們產品的需求，以下就是最終的實現效果；

報警點展示

點選獲取Demo

可行性

• 在一張圖片上新增一個雷達效果的一個標記，首先需要給圖片新增標記，然後想辦法在標記的地方(Point)，add 一個View;可行

需求分析

• 在一張已知的背景圖上畫一個標記，我首先想到的是，圖片水印；

事實也就是那麼回事，水印是在原有的圖片新增另外一張圖片，標記僅僅是一個純色的圖片而已

• 在標記的位置點，新增一個顯示動畫的View；

技術點

• 新增標記

根據顏色生成一張圖片，然後將生成的圖片，繪製到背景圖片上,具體需要用到

drawInrect：在哪裡繪製圖片

• 關鍵程式碼

+ (instancetype)imageWithColor:(UIColor *)color
{
    CGRect rect = CGRectMake(0.0f, 0.0f, 10.0f, 10.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return theImage;
}

// 給圖片新增標記
+ (UIImage *)imageWithOriginalName:(UIImage *)image signColor:(UIColor *)signColor signPositionX:(double)positionX ignPositionY:(double)positionY {
    
    //1.獲取圖片
    UIImage *signalImage = [[UIImage imageWithColor:signColor] circleImag];
    //2.開啟上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //3.繪製背景圖片
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    //繪製標記圖片到當前上下文
    CGFloat signX = positionX * image.size.width;
    CGFloat signY = positionY * image.size.height;
    
    CGRect rect = CGRectMake(signX, signY, 40, 40);
    [signalImage drawInRect:rect];
    //4.從上下文中獲取新圖片
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    //5.關閉圖形上下文
    UIGraphicsEndImageContext();
    //返回圖片
    return newImage;
}


 

• 定點位置，雷達動畫的新增

具體實現可以參考文章，基本原理就是，將單一動畫利用迴圈，建立多次，組成動畫組，依次新增，就可以實現最終的效果了；

[感謝]

iOS動畫-擴散波紋效果

圖片預覽庫WMPhotoBrowser

作者：一之筆
連結：https://www.jianshu.com/p/53a4bcc33217
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。