颜色作为滑块位置的函数，用于设置颜色

Question

我正在尝试创建用户可以使用的颜色选择器工具。颜色选择器有一个所有颜色的滑块和一个额外的滑块来设置颜色的深浅。两者都显示在图 1 和图 2 中：

图片 1：选择颜色：

图 2：设置颜色的深浅程度

我知道我可以为滑块使用自定义图像，而不是将每种颜色与一个位置匹配，这意味着我需要创建巨大的数组并且工作量很大。设置颜色深浅的​​第二个滑块仍需要在运行时计算。我怀疑这种方法有什么好处，因此问你是否对如何解决这个问题有更好的想法。也许一个将颜色与滑块位置联系起来的数学函数，color(x)，其中 x 是滑块的位置，可以解决问题。那么如何根据位置创建颜色并根据这个数学函数创建滑块呢？

Answer 1

我之前的做法就是使用图片。

您可以根据像素的位置等来渲染每个像素……但这是非常密集的东西，图像实际上不会改变。

各种应用已经内置了色调渐变（Pixelmatr 和 Photoshop 都有）。

只需创建一个色调渐变图像并在色调滑块后面使用它。

为亮度滑块创建一个透明的黑色渐变图像并将其放在滑块上。现在您只需设置滑块颜色，其顶部的渐变将使其看起来正确。

我使用这种技术在我的应用程序中创建了这个颜色选择器...

左侧的“滑块”使用带有色调渐变的单个图像。

右侧的“亮度/饱和度”选择器使用单个图像，从左到右白色透明渐变，从下到上黑色透明渐变。然后我只需要根据色调设置背景颜色。

示例

iOS 中的所有颜色都使用基于 0.0-1.0 的颜色。

因此，您所需要的只是沿每个视图的距离百分比。

所以你有一个CGPoint 的职位并且需要产生一个百分比。

每种颜色都是“3 维的”（4 个带有 alpha，但我没有包括它）所以你需要三个百分比。

对于简单的色调视图...

// put this inside the hue view (if you're not using a UISlider
// this works vertically you ay need yours to work horizontally.
- (CGFloat)hueValueForTouchPosition:(CGPoint)touchPoint {
    return touchPoint.y / CGRectGetHeight(self.frame);
}

这将根据触摸在视图中的位置返回正确的色调值。

现在您可以使用它来设置亮度视图的背景颜色。

// this will change the background color of the brightness view to match the selected hue
CGFloat hue = [self.hueView hueValueForTouchPosition:touchPoint];
self.brightnessView.backgroundColor = [UIColor colorWithHue:hue brightness:1.0 saturation:1.0 alpha:1.0];

现在你只需要对亮度做同样的事情

Answer 2

你可以这样做：

1. 通过在滑块视图的子类中实现来获取UITouch 事件方法。

2. 获取position(CGPoint) 的接触点。

3. 如下计算

   在最大亮度将1.0 使用以下降低它

   CGFloat currentBrightness = 1.0 - ((position.x - slider.frame.origin.x)/slider.frame.size.width);
   
   UIColor *newColor = [UIColor colorWithHue:currentHue
                             saturation:currentSaturation
                             brightness:currentBrightness
                                  alpha:1.0];
   

currentHue 和 currentSaturation 将从颜色选择滑块中计算出来。

Answer 3

您需要不少于三个滑块，它们可以是 RGB 或 HSB 滑块。那么您可以直接从这些方法中生成当前颜色：

对于 RGB

[UIColor colorWithRed:slider1.value
                Green:slider2.value
                 Blue:slider3.value
                alpha:1.0];

HSB

[UIColor colorWithHue:slider1.value
           saturation:slider2.value
           brightness:slider3.value
                alpha:1.0];

对于动态设置滑块的背景渐变，每个滑块的渐变可以通过改变其值来获得，同时保持其他两个不变。

例如，如果 H:0.2 S:0.6 B:0.5 是当前滑块位置，那么渐变将是 -

Slider1 : H:0.0 S:0.6 B:0.5 到 H:1.0 S :0.6 B:0.5
Slider2 : H:0.2 S:0.0 B:0.5 到 H: 0.2 S:1.0 B:0.5
Slider3 : H:0.2 S:0.6 B:0.0 到 H:0.2 S:0.6 B:1.0

或

如果你想走简单的路，那里有大量的图书馆。例如，请参阅this