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

Question

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

图片1: 选择颜色:

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

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

Answer 1

你可以这样做：

通过在滑块视图的子类中实现来获取 UITouch 事件方法。
获取 position(CGPoint) 个接触点。

计算如下

最大亮度将 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 2

你需要不少于三个滑块，它们可以是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.2S:0.6 B:1.0

或

如果您想走简单的路，那里有大量的库。参见 this 例如

Answer 3

我以前的做法就是用图片。

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

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

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

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

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

左边的"slider"使用单张图片，色调渐变。

右侧的"brightness / saturation"选择器使用单张图片，从左到右为白色透明渐变，从下到上为黑色透明渐变。然后我只需要根据色调设置背景颜色即可。

例子

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);
}

这将 return 基于视图中触摸位置的正确色调值。

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

// 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];

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

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

color as a function of slider position for setting a color

objective-c

uicolor

uislider

cgcolorspace

ios