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

时间:2015-11-27 09:34:39

标签: ios objective-c uislider uicolor cgcolorspace

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

图片1 :选择颜色:

Image 1

图片2 :设置暗色的颜色

enter image description here

我知道我可以使用自定义图像作为滑块,而不是将每种颜色与位置匹配,这意味着我需要创建大量阵列并且需要做很多工作。设置深色的方式的第二个滑块仍需要在运行时计算。我怀疑这种方法是否有用,因此问你是否对如何解决这个问题有了更好的认识。也许一个连接颜色和滑块位置的数学函数,颜色(x),其中x是滑块的位置,可以做到这一点。那么如何根据位置创建颜色并根据此数学函数创建滑块?

3 个答案:

答案 0 :(得分: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];
    
  4. 将从颜色选择滑块计算currentHuecurrentSaturation

答案 1 :(得分:2)

之前我这样做的方法就是使用图像。

你可以根据它的位置等呈现每个像素......但这是非常密集的东西,图像实际上不会改变。

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

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

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

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

enter image description here

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

"亮度/饱和度"右侧的拾取器使用单个图像,从左到右具有白色透明渐变,从底部到顶部使用黑色透明渐变。然后我只需要根据色调设置背景颜色。

示例

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

所以你需要的只是你每个视图的距离的百分比。

所以你的位置为CGPoint,需要产生一个百分比。

每种颜色都是" 3维" (4但是我没有包括它,所以你需要三个百分比。

对于容易的色调视图......

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

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

答案 2 :(得分:1)

您需要一个不少于三个滑块,它们可以是RGB或HSB滑块。然后你可以直接从这些方法生成当前颜色:

对于RGB

+-+-+-++-+-+-++-+-+-+
|1|2|3||4|5|6||7|8|9|
+-+-+-++-+-+-++-+-+-+
|2|3|4||5|6|7||8|9|1|
+-+-+-++-+-+-++-+-+-+
|3|4|5||6|7|8||9|1|2|
+-+-+-++-+-+-++-+-+-+
+-+-+-++-+-+-++-+-+-+
|4|5|6||7|8|9||1|2|3|
+-+-+-++-+-+-++-+-+-+
|5|6|7||8|9|1||2|3|4|
+-+-+-++-+-+-++-+-+-+
|6|7|8||9|1|2||3|4|5|
+-+-+-++-+-+-++-+-+-+
+-+-+-++-+-+-++-+-+-+
|7|8|9||1|2|3||4|5|6|
+-+-+-++-+-+-++-+-+-+
|8|9|1||2|3|4||5|6|7|
+-+-+-++-+-+-++-+-+-+
|9|1|2||3|4|5||6|7|8|
+-+-+-++-+-+-++-+-+-+

对于HSB

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

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

例如,如果 [UIColor colorWithHue:slider1.value saturation:slider2.value brightness:slider3.value alpha:1.0]; 是当前滑块位置,则渐变将为 -

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了解例如