iOS給一張圖片新增帶有雷達效果的標記,類似地圖示記位置
阿新 • • 發佈:2018-11-23
引言
©️本文首發個人部落格
在實際開發過程中,往往有這樣一種場景,比如,某一個地方需要新增一個標記,這個標記要足夠醒目,一眼就可以讓使用者知道,標記的地方在哪裡,就像百度地圖或者谷歌地圖裡面的,用來標記使用者位置的標記,以一種“雷達”效果,或者說“水波”效果,動態閃爍,引起使用者的注意,並且,背景圖片是可以放大的;
以上就是我們產品的需求,以下就是最終的實現效果;
報警點展示
可行性
- 在一張圖片上新增一個
雷達效果
的一個標記,首先需要給圖片新增標記,然後想辦法在標記的地方(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; }
- 定點位置,雷達動畫的新增
具體實現可以參考文章,基本原理就是,將單一動畫利用迴圈,建立多次,組成動畫組,依次新增,就可以實現最終的效果了;
[感謝]
作者:一之筆
連結:https://www.jianshu.com/p/53a4bcc33217
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。