項(xiàng)目需求中遇到獲取UIView上某個(gè)坐標(biāo)點(diǎn)的RGB顏色值的需求，現(xiàn)在把自己找到的解決方案簡(jiǎn)單總結(jié)記錄一下，遇到了下面的情況:

• 不可移動(dòng)的UIView
• 旋轉(zhuǎn)式的UIView
• 滑條式的UIView

不可移動(dòng)的UIView

如下圖所示，有一個(gè)圓形的顏色板，當(dāng)手指在顏色板上移動(dòng)時(shí)，UIViewController的backgroundColor將會(huì)設(shè)置成手指在顏色板上觸點(diǎn)的顏色值:

實(shí)現(xiàn)該功能的方案搜索至stackoverflow, 出處點(diǎn)擊這里.

核心代碼如下:

#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的一個(gè)Category了，主要注意頭文件QuartzCore.h的引入以及坐標(biāo)系的轉(zhuǎn)換.

最終，當(dāng)手指在顏色板上滑動(dòng)時(shí)，獲取ColorPanel中顏色值的調(diào)用如下:

#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

旋轉(zhuǎn)式的UIView

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

先看看顏色板隨著手指的滑動(dòng)而旋轉(zhuǎn)是如何實(shí)現(xiàn)的:

#import "RoundColorPanel.h"@interface RoundColorPanel ()/*** ColorPanel中心點(diǎn)的坐標(biāo)值*/ @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為坐標(biāo)原點(diǎn)建立坐標(biāo)系，計(jì)算坐標(biāo)點(diǎn)|point|與坐標(biāo)原點(diǎn)的連線(xiàn)距離x軸正方向的夾角** @param centerPoint 坐標(biāo)原點(diǎn)坐標(biāo)* @param point 某坐標(biāo)點(diǎn)** @return 坐標(biāo)點(diǎn)|point|與坐標(biāo)原點(diǎn)的連線(xiàn)距離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); }/*** 將圖層旋轉(zhuǎn)radian弧度** @param radian 旋轉(zhuǎn)的弧度*/ - (void)rotateByRadian:(CGFloat)radian {CGAffineTransform transform = self.layer.affineTransform;transform = CGAffineTransformRotate(transform, radian);self.layer.affineTransform = transform; }

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

可能你會(huì)發(fā)現(xiàn)，在continueTrackingWithTouch:消息中沒(méi)有看到UIView的分類(lèi)消息colorOfPoint:的發(fā)送，其實(shí)如果你嘗試這樣做，會(huì)發(fā)現(xiàn)這樣取出的顏色值是旋轉(zhuǎn)開(kāi)始時(shí)下三角所指點(diǎn)referPoint的顏色值，隨著ColorPanel的旋轉(zhuǎn)，該顏色值不會(huì)改變，這是因?yàn)槲覀儗?duì)ColorPanel的旋轉(zhuǎn)是通過(guò)仿射變換實(shí)現(xiàn)，而仿射變換會(huì)改變圖層的坐標(biāo)系，也就是說(shuō)，referPoint現(xiàn)在所處的坐標(biāo)系是已做過(guò)仿射變換的坐標(biāo)系，而不再是以圖層左上角為坐標(biāo)原點(diǎn)，向右為x軸正方向，向下為y軸正方向的坐標(biāo)系。當(dāng)然你可以計(jì)算ColorPanel總的旋轉(zhuǎn)角度totalChangedRadian，然后通過(guò)使referPoint旋轉(zhuǎn)-totalChangedRadian角度來(lái)計(jì)算該點(diǎn)在新坐標(biāo)系中的坐標(biāo)值，如下代碼所示:

#import "RoundColorPanel.h" #import "UIView+ColorOfPoint.h"@interface RoundColorPanel ()/*** 顏色板中心點(diǎn)坐標(biāo)*/ @property (nonatomic) CGPoint centerPoint; /*** 獲取顏色值參考點(diǎn)與|centerPoint|的連線(xiàn)與x軸正方向的夾角*/ @property (nonatomic) CGFloat referRadian; /*** 獲取顏色值參考點(diǎn)與|centerPoint|的連線(xiàn)長(zhǎng)度*/ @property (nonatomic) CGFloat referRadius; /*** 顏色板在整個(gè)旋轉(zhuǎn)過(guò)程中的總和*/ @property (nonatomic) CGFloat totalChangedRadian;@end@implementation RoundColorPanel- (void)awakeFromNib {[super awakeFromNib];self.centerPoint = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));//|referPoint|獲取該點(diǎn)的顏色值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; }

不過(guò)，我更趨向于使用接下來(lái)使用的方法，更加簡(jiǎn)單和理解。

將RoundColorPanel放入一個(gè)容器視圖RotaryColorPanel中，RoundColorPanel的旋轉(zhuǎn)改變的是自身視圖的坐標(biāo)系，而不會(huì)改變其父視圖的坐標(biāo)系，因此我們可以在其父視圖的坐標(biāo)系中定義需要取顏色值的坐標(biāo)點(diǎn)，代碼如下:

#import "RotaryColorPanel.h" #import "RoundColorPanel.h" #import "UIView+ColorOfPoint.h" #import "XXNibBridge.h"@interface RotaryColorPanel () <XXNibBridge>/*** 可旋轉(zhuǎn)的顏色板*/ @property (weak, nonatomic) IBOutlet RoundColorPanel *roundColorPanel; /*** 下三角指示標(biāo)識(shí)*/ @property (weak, nonatomic) IBOutlet UIImageView *indicator;/*** 獲取該點(diǎn)的顏色值*/ @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

獲取顏色值的調(diào)用變成如下:

#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

該樣式與上面的區(qū)別是，在顏色條上有遮擋物滑塊，獲取顏色值的點(diǎn)坐標(biāo)是滑塊中心點(diǎn)的坐標(biāo), 如下圖所示:

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

上述所有代碼已上傳github，可點(diǎn)擊此處獲取.

轉(zhuǎn)載于:https://www.cnblogs.com/Free-Thinker/p/5105900.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。