項目需求中遇到獲取UIView上某個坐標點的RGB顏色值的需求，現在把自己找到的解決方案簡單總結記錄一下，遇到了下面的情況:

• 不可移動的UIView
• 旋轉式的UIView
• 滑條式的UIView

不可移動的UIView

如下圖所示，有一個圓形的顏色板，當手指在顏色板上移動時，UIViewController的backgroundColor將會設置成手指在顏色板上觸點的顏色值:

實現該功能的方案搜索至stackoverflow, 出處點擊這里.

核心代碼如下:

#import "UIView+ColorOfPoint.h" #import <QuartzCore/QuartzCore.h>@implementation UIView (ColorOfPoint)- (UIColor *)colorOfPoint:(CGPoint)point {unsigned char pixel[4] = {0};CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();CGContextRef context = CGBitmapContextCreate(pixel, 1, 1, 8, 4, colorSpace, (CGBitmapInfo)kCGImageAlphaPremultipliedLast);CGContextTranslateCTM(context, -point.x, -point.y);[self.layer renderInContext:context];CGContextRelease(context);CGColorSpaceRelease(colorSpace);UIColor *color = [UIColor colorWithRed:pixel[0]/255.0 green:pixel[1]/255.0 blue:pixel[2]/255.0 alpha:pixel[3]/255.0];return color; }

該功能封裝成UIView的一個Category了，主要注意頭文件QuartzCore.h的引入以及坐標系的轉換.

最終，當手指在顏色板上滑動時，獲取ColorPanel中顏色值的調用如下:

#import "ImmovableColorPanel.h" #import "UIView+ColorOfPoint.h"@implementation ImmovableColorPanel- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {CGPoint location = [touch locationInView:self];self.color = [self colorOfPoint:location];[self sendActionsForControlEvents:UIControlEventValueChanged];return YES; }@end

旋轉式的UIView

現在假設上圖所示的顏色板是可旋轉的，獲取顏色值的方式修改為獲取色環中間正上方某點的顏色值，如下圖所示，獲取的是下三角所指某點的顏色值(下三角不會隨著顏色板的旋轉而旋轉).

先看看顏色板隨著手指的滑動而旋轉是如何實現的:

#import "RoundColorPanel.h"@interface RoundColorPanel ()/*** ColorPanel中心點的坐標值*/ @property (nonatomic) CGPoint centerPoint;@end@implementation RoundColorPanel- (void)awakeFromNib {[super awakeFromNib];self.centerPoint = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)); }- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {CGPoint previousLocation = [touch previousLocationInView:self];CGPoint location = [touch locationInView:self];CGFloat previousRadian = [self radianToCenterPoint:self.centerPoint withPoint:previousLocation];CGFloat curRadian = [self radianToCenterPoint:self.centerPoint withPoint:location];CGFloat changedRadian = curRadian - previousRadian;[self rotateByRadian:changedRadian];[self sendActionsForControlEvents:UIControlEventValueChanged];return YES; }/*** 以ColorPanel的anchorPoint為坐標原點建立坐標系，計算坐標點|point|與坐標原點的連線距離x軸正方向的夾角** @param centerPoint 坐標原點坐標* @param point 某坐標點** @return 坐標點|point|與坐標原點的連線距離x軸正方向的夾角*/ - (CGFloat)radianToCenterPoint:(CGPoint)centerPoint withPoint:(CGPoint)point {CGVector vector = CGVectorMake(point.x - centerPoint.x, point.y - centerPoint.y);return atan2f(vector.dy, vector.dx); }/*** 將圖層旋轉radian弧度** @param radian 旋轉的弧度*/ - (void)rotateByRadian:(CGFloat)radian {CGAffineTransform transform = self.layer.affineTransform;transform = CGAffineTransformRotate(transform, radian);self.layer.affineTransform = transform; }

核心代碼就是rotateByRadian:消息，使用CALayer的仿射變換完成。

可能你會發現，在continueTrackingWithTouch:消息中沒有看到UIView的分類消息colorOfPoint:的發送，其實如果你嘗試這樣做，會發現這樣取出的顏色值是旋轉開始時下三角所指點referPoint的顏色值，隨著ColorPanel的旋轉，該顏色值不會改變，這是因為我們對ColorPanel的旋轉是通過仿射變換實現，而仿射變換會改變圖層的坐標系，也就是說，referPoint現在所處的坐標系是已做過仿射變換的坐標系，而不再是以圖層左上角為坐標原點，向右為x軸正方向，向下為y軸正方向的坐標系。當然你可以計算ColorPanel總的旋轉角度totalChangedRadian，然后通過使referPoint旋轉-totalChangedRadian角度來計算該點在新坐標系中的坐標值，如下代碼所示:

#import "RoundColorPanel.h" #import "UIView+ColorOfPoint.h"@interface RoundColorPanel ()/*** 顏色板中心點坐標*/ @property (nonatomic) CGPoint centerPoint; /*** 獲取顏色值參考點與|centerPoint|的連線與x軸正方向的夾角*/ @property (nonatomic) CGFloat referRadian; /*** 獲取顏色值參考點與|centerPoint|的連線長度*/ @property (nonatomic) CGFloat referRadius; /*** 顏色板在整個旋轉過程中的總和*/ @property (nonatomic) CGFloat totalChangedRadian;@end@implementation RoundColorPanel- (void)awakeFromNib {[super awakeFromNib];self.centerPoint = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));//|referPoint|獲取該點的顏色值CGPoint referPoint = CGPointMake(CGRectGetMidX(self.bounds), 2);CGVector vector = CGVectorMake(referPoint.x - self.centerPoint.x, referPoint.y - self.centerPoint.y);self.referRadian = atan2(vector.dy, vector.dx);self.referRadius = sqrt(vector.dx * vector.dx + vector.dy * vector.dy);self.layer.cornerRadius = CGRectGetWidth(self.bounds) / 2; }- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event {CGPoint previousLocation = [touch previousLocationInView:self];CGPoint location = [touch locationInView:self];CGFloat previousRadian = [self radianToCenterPoint:self.centerPoint withPoint:previousLocation];CGFloat curRadian = [self radianToCenterPoint:self.centerPoint withPoint:location];CGFloat changedRadian = curRadian - previousRadian;[self rotateByRadian:changedRadian];self.totalChangedRadian += changedRadian;CGFloat radian = self.referRadian - self.totalChangedRadian;CGPoint referPoint1 = CGPointMake(self.centerPoint.x + self.referRadius * cos(radian), self.centerPoint.y + self.referRadius * sin(radian));self.color = [self colorOfPoint:referPoint1];[self sendActionsForControlEvents:UIControlEventValueChanged];return YES; }- (CGFloat)radianToCenterPoint:(CGPoint)centerPoint withPoint:(CGPoint)point {CGVector vector = CGVectorMake(point.x - centerPoint.x, point.y - centerPoint.y);return atan2f(vector.dy, vector.dx); }- (void)rotateByRadian:(CGFloat)radian {CGAffineTransform transform = self.layer.affineTransform;transform = CGAffineTransformRotate(transform, radian);self.layer.affineTransform = transform; }

不過，我更趨向于使用接下來使用的方法，更加簡單和理解。

將RoundColorPanel放入一個容器視圖RotaryColorPanel中，RoundColorPanel的旋轉改變的是自身視圖的坐標系，而不會改變其父視圖的坐標系，因此我們可以在其父視圖的坐標系中定義需要取顏色值的坐標點，代碼如下:

#import "RotaryColorPanel.h" #import "RoundColorPanel.h" #import "UIView+ColorOfPoint.h" #import "XXNibBridge.h"@interface RotaryColorPanel () <XXNibBridge>/*** 可旋轉的顏色板*/ @property (weak, nonatomic) IBOutlet RoundColorPanel *roundColorPanel; /*** 下三角指示標識*/ @property (weak, nonatomic) IBOutlet UIImageView *indicator;/*** 獲取該點的顏色值*/ @property (nonatomic) CGPoint referPoint;@end@implementation RotaryColorPanel- (void)awakeFromNib {[super awakeFromNib];self.referPoint = CGPointMake(CGRectGetMidX(self.indicator.frame), CGRectGetMaxY(self.indicator.frame));[self.roundColorPanel addTarget:self action:@selector(colorPanelRotated:) forControlEvents:UIControlEventValueChanged]; }- (void)colorPanelRotated:(id)sender {UIColor *color = [self colorOfPoint:self.referPoint];if (self.colorChangedHandler) {self.colorChangedHandler(color);} }@end

獲取顏色值的調用變成如下:

#import "RotaryColorPanelViewController.h" #import "RotaryColorPanel.h"@interface RotaryColorPanelViewController ()@property (weak, nonatomic) IBOutlet RotaryColorPanel *rotaryColorPanel;@end@implementation RotaryColorPanelViewController- (void)viewDidLoad {[super viewDidLoad];__weak typeof(self) weakSelf = self;self.rotaryColorPanel.colorChangedHandler = ^(UIColor *color) {weakSelf.view.backgroundColor = color;}; }- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated. }@end

滑條式UIView

該樣式與上面的區別是，在顏色條上有遮擋物滑塊，獲取顏色值的點坐標是滑塊中心點的坐標, 如下圖所示:

解決方案同第2中情況類似，就是讓滑塊和顏色板處在并列的層級，它們同時直屬于同一superview中。

上述所有代碼已上傳github，可點擊此處獲取.

轉載于:https://www.cnblogs.com/Free-Thinker/p/5105900.html

總結

以上是生活随笔為你收集整理的iOS获取UIView上某点的颜色值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。