цвет как функция положения ползунка для установки цвета

Question

Я пытаюсь создать инструмент выбора цвета, который пользователь мог бы использовать. В наборе цветов есть ползунок всех цветов и дополнительный ползунок, чтобы установить, насколько темный цвет. Оба показано на рисунке 1 и 2:

Изображение 1: выбирает цвет:

Изображение 2: наборы, как темный цвет

I знайте, что я могу использовать пользовательское изображение для слайдера, а не соответствовать каждому цвету с позицией, что означало бы, что мне понадобится для создания огромного массива и много работы. Второй слайдер, который устанавливает, как темный цвет все равно должен быть вычислен во время выполнения. Я сомневаюсь, что этот подход хорош, и поэтому спрашивайте, есть ли у вас лучшая идея о том, как решить эту проблему. Возможно, математическая функция, которая связывает цвет с положением ползунка, цвет (x), где x - положение ползунка, будет делать трюк. Итак, как создать цвет как функцию положения и создать слайдер на основе этой математической функции?

Answer 1

Способ, которым я это сделал раньше, - это просто использовать изображения.

Вы можете визуализировать каждый пиксель на основе его положения и т. Д. ... но это очень интенсивный материал, и изображение на самом деле не изменится.

В разных приложениях уже есть встроенный градиент оттенка (Pixelmatr и Photoshop оба).

Просто создайте изображение градиента оттенка и используйте его за слайдером оттенка.

Для слайдера яркости создайте прозрачное изображение черного градиента и поместите его на ползунок. Теперь вы можете просто установить цвет слайдера, а градиент на нем будет выглядеть корректно.

Я использовал эту технику для создания этого выбора цвета в приложении шахты ...

«ползунок» на левом использует одно изображение с градиентом оттенком.

Подбор «яркость/насыщенность» справа использует одно изображение с белым прозрачным градиентом слева направо и черно-прозрачный градиент снизу вверх. Затем мне нужно установить цвет фона на основе оттенка.

Пример

Все цвета в прошивкой использовать 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]; 

Теперь вы просто должны делать то же самое с яркостью

Answer 2

Вы можете сделать так:

1. Получить UITouch методы событий путем внедрения в подклассе зрения слайдера.

2. Получить position(CGPoint) точек соприкосновения.

3. Do расчет, как показано ниже

   При максимальной яркости будет 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: Н: 0,0 S: 0,6 В: 0.5 к Н: 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: Н: 0,2: 0,6 S B: 0,0 до Н: 0,2 S 0,6: B: 1,0

ИЛИ

если вы хотите идти легкий путь, есть тонны библиотек там. См. this, например,