圆环型的颜色选择器

    作为一名程序员，最怕的产品是什么样的？ 没错，就是那种觉得你做起来应该很容易的产品。
   好吧，也都是怪小弟学艺不精。
   是有这么一个UI图，

image.png

我反正是没有玩过这个·当时就一脸懵圈了，主要是时间还很急。
后来是用的这么一个思路解决了它。大致做出了这么个样子吧。
这里我就按我的这个思路来说一下是怎么做的吧。
后面的颜色条，我是直接找UI 要的一张图。然后小圆圈怼一个拖拽手势，获取imgView上的颜色。小圆圈每次的位置都是计算的·=-= 有点苦逼。当然了 我只是提供这一种搞法而已咯。
获取view上的颜色：

- (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.imgView.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];
    if (pixel[0]==0&&pixel[1]==0&&pixel[2]==0) {
        return [UIColor clearColor];
    }
    return color;
}

我这边取颜色加了个判断，UI给的图中间都是透明背景的，所以中间不是彩色的部分我就用这个来判断的。
给圆圈加一个拖拽手势：

-(void)panBtn:(UIPanGestureRecognizer *)pan
{
    CGPoint loc = [pan locationInView:self.imgView];
    CGFloat radius=W(107);
    CGFloat imgRadius=self.imgView.width/2;
    NSLog(@"--hj%@",[self colorOfPoint:loc]);
     //判断是否在彩色圆上
    if (!CGColorEqualToColor([self colorOfPoint:loc].CGColor, [UIColor clearColor].CGColor)) {
        CGFloat currentX=fabs(loc.x-imgRadius);
        CGFloat currentY=fabs(loc.y-imgRadius);
        CGFloat z= hypotf(currentX,currentY);
        CGFloat x=(currentX/z)*radius;
        CGFloat y=(currentY/z)*radius;
        CGFloat btnX,btnY;
        if (loc.x>=imgRadius) {
            btnX=x+imgRadius;
        }else
        {
            btnX=imgRadius-x;
        }
        if (loc.y>=imgRadius) {
            btnY=y+imgRadius;
        }else
        {
            btnY=imgRadius-y;
        }
        self.sliderBtn.center=CGPointMake(btnX, btnY);
    }
    if (pan.state == UIGestureRecognizerStateEnded) {
        [self colorOfPoint:self.sliderBtn.center];
    }
}

radius 这个是彩色圆圈中间的点到它中心的距离，用来算小圆圈的中心位置。
里面的算法也就是根据什么斜边啊等等，算出小圆圈的中心坐标位置，因为你可能拖的点不在中心，所以你的把小圆圈的中心调整到正确的位置， 这个算法解释的好累，自己研究吧，就是三角函数来的嘛。这个时候才觉得读点书还是不错的。哈哈。
然后你可以在手势结束后，或者实时拿到小圆圈所在的颜色了。这个就看各自的需求了。
做出来是这么个样子：

image.png

一点偏差不用在意这些细节，或或或。
这就结束了， 好像也不难， 还是自己技术不够强势哟。
思路，思路 很重要啊·阿西吧。
-------------大佬勿喷。