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

Question

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

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

Изображение 2: устанавливает темный цвет

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

Answer 1

То, как я делал это раньше, просто с помощью изображений.

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

Различные приложения уже имеют встроенный градиент оттенка (как Pixelmatr, так и Photoshop).

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

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

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

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

Средство выбора "яркость / насыщенность" справа использует одно изображение с прозрачным белым градиентом слева направо и прозрачным черным градиентом снизу вверх. Тогда мне просто нужно установить цвет фона на основе оттенка.

пример

Все цвета в 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];

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

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 текущая позиция слайдера, тогда градиенты будут:

Слайдер1: H: 0,0 S: 0,6 B: 0,5 до H: 1,0 S: 0,6 B: 0,5
Слайдер2: 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

ИЛИ ЖЕ

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