blocks|key|1263268|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263269|通过在滑块视图的子类中实现来获取UITouch事件方法。|ordered-list-item|offset|length|style|CODE|1263270|获取触点的position(CGPoint)。|1263271|计算如下
在最大亮度为1.0时，使用以下方法降低亮度
slider.frame.origin.x)/slider.frame.size.width)；CGFloat+currentBrightness+=+1.0+-(+UIColor+*newColor+=+UIColor颜色:电流色饱和度:电流亮度α:1.0；|1263272|其中currentHue和currentSaturation将从颜色选择滑块中计算。|1263273|entityMap^0|0|G|7|0|5|H|0|B|3|0|2|A|D|H|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@$E|S|F|T|G|H]]|9|@]|A|$]]|$1|I|3|J|5|D|7|U|8|@$E|V|F|W|G|H]]|9|@]|A|$]]|$1|K|3|L|5|D|7|X|8|@$E|Y|F|Z|G|H]]|9|@]|A|$]]|$1|M|3|N|5|6|7|10|8|@$E|11|F|12|G|H]|$E|13|F|14|G|H]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$]]

You can do like this:

<ol>
<li>Get <code>UITouch</code> event methods by implementing in a subclass of slider view.</li>
<li>Get <code>position(CGPoint)</code> of touch points.</li>
<li>Do calculation like below

At max brightness will be <code>1.0</code> reduce it using following 

<pre><code>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];
</code></pre></li>
</ol>

Where <code>currentHue</code> and <code>currentSaturation</code> will be calculated from color selection slider.

blocks|key|1865449|text|你需要一个不少于三个滑块，它们可以是RGB或HSB滑块。然后可以直接从以下方法生成当前颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1865450|为RGB|1865451|[UIColor+colorWithRed:slider1.value
++++++++++++++++Green:slider2.value
+++++++++++++++++Blue:slider3.value
++++++++++++++++alpha:1.0];|code-block|syntax|javascript|1865452|为HSB|1865453|[UIColor+colorWithHue:slider1.value
+++++++++++saturation:slider2.value
+++++++++++brightness:slider3.value
++++++++++++++++alpha:1.0];|1865454|对于动态设置滑块的背景梯度，可以通过改变其值来获得每一个滑块的梯度。|1865455|例如，如果H:0.2+S:0.6+B:0.5是当前的滑块位置，那么梯度将是-|offset|length|style|CODE|1865456|Slider1+:+H:__0.0+S:0.6+B:0.5+to+H:__1.0+S:0.6+B:0.5|BOLD|1865457|Slider2+:+H:0.2+S:__0.0+B:0.5至H:0.2+S:__1.0+B:0.5|1865458|Slider3+:+H:0.2+S:0.6+B:__0.0至H:0.2+S:0.6+B:__1.0|1865459|或|1865460|如果你想走简单的路，外面有很多图书馆。有关例如，请参见这|1865461|entityMap|0|LINK|mutability|MUTABLE|url|https://www.cocoacontrols.com/search?q=color%2Bpicker^0|0|0|0|0|0|0|5|H|0|E|3|11|3|0|K|3|14|3|0|Q|3|1A|3|0|0|1|0|R|1|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1G|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1I|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1J|8|@$Q|1K|R|1L|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1M|8|@$Q|1N|R|1O|S|W]|$Q|1P|R|1Q|S|W]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1R|8|@$Q|1S|R|1T|S|W]|$Q|1U|R|1V|S|W]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1W|8|@$Q|1X|R|1Y|S|W]|$Q|1Z|R|20|S|W]]|9|@]|A|$]]|$1|11|3|12|5|6|7|21|8|@$Q|22|R|23|S|W]]|9|@]|A|$]]|$1|13|3|14|5|6|7|24|8|@]|9|@$Q|25|R|26|1|27]]|A|$]]|$1|15|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|16|$17|$5|18|19|1A|A|$1B|1C]]]]

You need a no less than three sliders, They can be RGB or HSB sliders. then you can directly generate the current color from these methods : 

For RGB

<pre><code>[UIColor colorWithRed:slider1.value
 Green:slider2.value
 Blue:slider3.value
 alpha:1.0];
</code></pre>

For HSB

<pre><code>[UIColor colorWithHue:slider1.value
 saturation:slider2.value
 brightness:slider3.value
 alpha:1.0];
</code></pre>

As for dynamically setting the background gradient of the sliders, the gradient for each slider can be obtained by varying its value keeping the other two constant. 

for example, if <code>H:0.2 S:0.6 B:0.5</code> is the current slider position, then the gradients would be -

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

OR

if you want to go the easy way, there are tons of libraries out there. See <a href="https://www.cocoacontrols.com/search?q=color+picker" rel="nofollow">this</a> for e.g

blocks|key|1865527|text|我以前做这件事的方法就是使用图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1865528|你可以根据每个像素的位置等来渲染.但这是非常密集的东西，图像实际上不会改变。|1865529|各种应用程序已经内置了色调渐变(Pixelmatr和Photoshop都有)。|1865530|只需创建一个色调梯度图像，并使用后面的色调滑块。|1865531|对于亮度滑块，创建一个透明-黑色梯度图像，并将其放在滑块上。现在你只需设置滑块的颜色，上面的梯度将使它看起来正确。|1865532|我用这个技术在我的一个应用程序中创建了这个颜色选择器.|1865533|​|1865534|📷|atomic|offset|length|1865535|1865536|左边的“滑块”使用带有色调梯度的单一图像。|1865537|右边的“亮度/饱和度”选择器使用从左到右的白色透明梯度和从下到上的黑色透明梯度的单一图像。然后我只需要根据色调来设置背景颜色。|1865538|示例|style|BOLD|1865539|iOS中的所有颜色都使用基于0.0-1.0的颜色.|1865540|所以，你所需要的只是每一个视图的距离的百分比。|1865541|因此，您有一个CGPoint的职位，需要生成一个百分比。|CODE|1865542|每种颜色都是“三维”(4和alpha，但我没有包括它)，所以你需要三个百分比。|1865543|对于色调的看法很容易..。|1865544|//+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);
}|code-block|syntax|javascript|1865545|这将根据视图中触摸的位置返回正确的色调值。|1865546|现在您可以使用它来设置亮度视图的背景色。|1865547|//+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];|1865548|现在你只需要对亮度做同样的事情|1865549|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/89ed02867757e7d9aecefe6c8c95d667.jpg|imageAlt^0|0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|2|0|0|0|7|7|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|20|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|21|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|22|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|23|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|24|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|25|8|@]|9|@$Q|26|R|27|1|28]]|A|$]]|$1|S|3|M|5|6|7|29|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|2A|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2B|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2C|8|@$Q|2D|R|2E|Z|10]]|9|@]|A|$]]|$1|11|3|12|5|6|7|2F|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2G|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2H|8|@$Q|2I|R|2J|Z|17]]|9|@]|A|$]]|$1|18|3|19|5|6|7|2K|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2L|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|1E|7|2M|8|@]|9|@]|A|$1F|1G]]|$1|1H|3|1I|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|1E|7|2P|8|@]|9|@]|A|$1F|1G]]|$1|1N|3|1O|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|1P|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]]|1Q|$1R|$5|1S|1T|1U|A|$1V|1W|1X|-4]]]]

The way I have done this before is just by using images.

You could render each pixel based on the position of it etc... but that's very intensive stuff and the image won't actually change.

Various apps already have a hue gradient built in (Pixelmatr and Photoshop both do).

Just create a hue gradient image and use that behind the hue slider.

For the brightness slider create a transparent - black gradient image and place that over the slider. Now you can just set the slider colour and the gradient on top of it will make it look correct.

I used this technique to create this colour picker in an app of mine...

<a href="https://i.stack.imgur.com/j9KGc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j9KGc.jpg" alt="enter image description here"></a>

The "slider" on the left uses a single image with a hue gradient.

The "brightness / saturation" picker on the right uses a single image with a white-transparent gradient from left to right and a black-transparent gradient from bottom to top. Then I just have to set the background colour based on the hue.

Example

All colours in iOS use 0.0-1.0 based colours.

So all you need is a percentage of how far along each view you are.

So you have a position as a <code>CGPoint</code> and need to produce a percentage.

Each colour is "3 dimensional" (4 with alpha but I didn't include it) so you need three percentages.

For the hue view that is easy...

<pre><code>// 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);
}
</code></pre>

This will return the correct hue value based on the position of the touch within the view.

Now you can use that to set the background color of the brightness view.

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

Now you just have to do the same with the brightness

I am trying to create a color picker tool, that the user could use. The color picker has a slider of all colors and additional slider to set how dark the color is. Both are shown in image 1 and 2:

Image 1: picks color:

<a href="https://i.stack.imgur.com/XTMtJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XTMtJ.png" alt="Image 1"></a> 

Image 2: sets how dark color is

<a href="https://i.stack.imgur.com/hBWYZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hBWYZ.png" alt="enter image description here"></a>

I know that I could use a custom image for slider, and than match each color with a position, that would mean that I would need to create huge array and is a lot of work. The second slider that sets how dark color is would still need to be computed at runtime. I'm doubting this approach is any good and therefore ask you if you have a better idea on how to tackle this problem. Perhaps a mathematical function that connects color with slider position, color(x) where x is position of slider, would do the trick. So how to create a color as a function of position and create a slider based on this math function?

color as a function of slider position for setting a color

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图创建一个颜色选择工具，用户可以使用。颜色选择器有一个所有颜色的滑块和额外的滑块来设置颜色有多深。两者均如图1和2所示：图像1：选择颜色：​图像2：设置暗颜色​​我知道我可以用一个自定义的图像作为滑块，而不是将每种颜色与一个位置相匹配，这意味着我需要创建巨大的数组，这需要大量的工作。设置暗颜色的第二个滑块仍然需要在...

问颜色作为设置颜色的滑块位置的函数
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问颜色作为设置颜色的滑块位置的函数EN