На вкус и цвет 2 – не RGB единым

Приветствую всех читателей. Попробуем продолжить нашу затею, начало которой здесь ^[1].

Итак, мы имеем кастомную View с разноцветным кружочком, из которого теперь необходимо выдернуть выбранный пользователем цвет. Перед тем как окунуться в дебри расчетов давайте для начала организуем какие-нибудь маркеры-указатели выбранного цвета. Не будем усложнять и сделаем их в виде простых линий – стрелок. Для них нам понадобится новая Paint и размеры. Чтобы не повторяться в дальнейшем, давайте рассчитаем сразу все необходимые параметры. Я сознательно пишу кучу отдельных переменных для наглядности.

Наши объявления и методы приобретают вид:

	// Константы, определяющие что именно мы устанавливаем в данный момент
	protected static final int		SET_COLOR	= 0;
	protected static final int		SET_SATUR	= 1;
	protected static final int		SET_ALPHA	= 2;
	// и флаг, который будет устанавливаться в одну из этих констант.
	// (как-то непонятно я выразился)
	private int				mMode;

	float						cx;
	float						cy;
	float						rad_1; // 
	float						rad_2; //
	float						rad_3; //
	float						r_centr; // радиусы наших окружностей

	float						r_sel_c; // 
	float						r_sel_s; //
	float						r_sel_a; // границы полей выбора

		// всякие краски
	private Paint				p_color = new Paint(Paint.ANTI_ALIAS_FLAG);
	private Paint				p_satur = new Paint(Paint.ANTI_ALIAS_FLAG);
	private Paint				p_alpha = new Paint(Paint.ANTI_ALIAS_FLAG);
	private Paint				p_white = new Paint(Paint.ANTI_ALIAS_FLAG);
	private Paint				p_handl = new Paint(Paint.ANTI_ALIAS_FLAG);
	private Paint				p_centr = new Paint(Paint.ANTI_ALIAS_FLAG);

	private float				deg_col; // углы поворота
	private float				deg_sat; // указателей - стрелок
	private float				deg_alp; // ********************

	private float				lc; //
	private float				lm; // отступы и выступы линий
	private float				lw; // 

private void calcSizes() {
	// 
	// 
		cx = size * 0.5f;
		cy = cx;
		lm = size * 0.043f;
		lw = size * 0.035f;
		rad_1 = size * 0.44f;
		r_sel_c = size * 0.39f;
		rad_2 = size * 0.34f;
		r_sel_s = size * 0.29f;
		rad_3 = size * 0.24f;
		r_sel_a = size * 0.19f;
		r_centr = size * 0.18f;

		lc = size * 0.08f;
		p_color.setStrokeWidth(lc);
		p_satur.setStrokeWidth(lc);
		p_alpha.setStrokeWidth(lc);
	}

Для начала надо убедиться, что мы выбираем именно цвет на наружном кольце. Для этого к координатам расстояния от центра по горизонтали и по вертикали (в нашем коде это a и b в ACTION_DOWN), добавляем еще одну – расстояние от центра по прямой. По всем законам геометрии обзовем ее «с». И тут же вычислим, вспомнив труды гражданина Пифагора:

float c = (float) Math.sqrt(a * a + b * b);

Теперь остается проверить, что место касания находится на наружном кольце, то есть с больше внутреннего радиуса кольца. Заодно, забегая вперед, выполним эти проверки для остальных еще не существующих колец. И выставим флаги. В конечном итоге:

		case MotionEvent.ACTION_DOWN:
			float a = Math.abs(event.getX() - cx);
			float b = Math.abs(event.getY() - cy);
			float c = (float) Math.sqrt(a * a + b * b);
			if (c > r_sel_c) mode = SET_COLOR;
			else if (c < r_sel_c && c > r_sel_s) mode = SET_SATUR;
			else if (c < r_sel_s && c > r_sel_a) mode = SET_ALPHA;
			else if (c < r_centr) listener.onDismiss(mColor, alpha);
			break;

Заметьте – проверку расстояния от центра мы выполняем только в ACTION_DOWN. То есть ткнув пальцем в наружное кольцо, мы можем потом сколько угодно елозить по нашей View даже за пределами зоны выбора цвета, меняться будет именно цвет. Пока мы не ткнем пальцем повторно и не сменим флаг mode.

Теперь в ACTION_MOVE будем получать новые координаты и определять выбранный цвет, насыщенность или прозрачность. Чтобы не засорять onTouch вынесем математику в отдельные методы. Ну и вызов invalidate() я думаю лучше сюда же поместить. У нас получилось:

		case MotionEvent.ACTION_MOVE:
			float x = event.getX() - cx;
			float y = event.getY() - cy;
			switch (mMode) {
			case SET_COLOR:
				setColScale(getAngle(x, y));
				break;

			case SET_SATUR:
				setSatScale(getAngle(x, y));
				break;

			case SET_ALPHA:
				setAlphaScale(getAngle(x, y));
				break;
			}
			invalidate();
			break;
		}

Методы типа два в одном. Рассмотрим подробнее. getAngle(x, y) – на основании координат определяем угол между положением пальца и центром View. Что-то типа такого:

	protected float getAngle(float x, float y) {
		float deg = 0;
		if (x != 0) deg = y / x;
		deg = (float) Math.toDegrees(Math.atan(deg));
		if (x < 0) deg += 180;
		else if (x > 0 && y < 0) deg += 360;
		return deg;
	}

На выходе получаем угол в градусах, который теперь необходимо как-то связать с цветом в этом секторе нашего градиента. На этом мысль зашла в тупик. Извращенческие идеи вычисления координат пикселов и анализа их цвета я как-то сразу отбросил. В голове вертелись слова пингвина из Мадагаскара – «Ковальски, предложите варианты…». В роли Ковальского выступил Гугл. И вот что он сказал.

Оказывается есть жизнь и на других планетах. И вместо такого родного и понятного ARGB там используют какой-то непонятный HSV. Что это за зверь такой? Например первая его буква? Вики заявляет, что это «Hue – цветовой тон… Варьируется в пределах 0 – 360…». Прикидываете, какое совпадение? А остальные буквы? S – Saturation – да это же наше второе кольцо! А V – Value – это яркость. И Андроид тут же предлагает нам пару функций:

Color.HSVToColor(int, float[]);
Color.colorToHSV(int, float[]);

Параметр int в первой функции – прозрачность, вспоминаем про наше третье кольцо. Во второй функции int это непосредственно цвет. И в обеих функциях float[] это массив из трех элементов, первый из которых соответственно буквам HSV и есть значение цвета палитры от 0 до 360. Жизнь, похоже, налаживается.

Объявляем массивы argb и hsv для хранения компонентов нашего цвета:

	private int[] argb = new int[] {	255, 0, 0, 0};

	private float[] hsv = new float[] {0, 1f, 1f};

И просто подставляем полученный ранее угол в градусах в качестве первого элемента массива.

		protected void setColScale(float f) {
		deg_col = f;
		hsv[0] = f;
		mColor = Color.HSVToColor(argb[0], hsv);
		p_center.setColor(mColor);
		}

Теперь у нас есть цвет, угол и полное право рисовать второе кольцо и стрелки. Вот код:

	private void drawSaturGradient(Canvas c) {

		SweepGradient s = null;
		int[] sg = new int[] {
Color.HSVToColor(new float[] {deg_col, 1, 0}), Color.HSVToColor(new float[] {deg_col, 1, 1}), Color.HSVToColor(new float[] { hsv[0], 0, 1}), Color.HSVToColor(new float[] { hsv[0], 0, 0.5f}), Color.HSVToColor(new float[] {deg_col, 1, 0})
		};
		s = new SweepGradient(cx, cy, sg, null);
		p_satur.setShader(s);
		c.drawCircle(cx, cy, rad_2, p_satur);

	}

Очень похоже на предыдущий код, тот же массив для шейдера, тот же градиент. Только теперь в нем 5 цветов, каждый из которых мы выдираем из HSV. Причем насыщенность и яркость задаем вручную от 0 до 1, а в первый (в смысле нулевой) элемент массива я почему-то засунул значение угла. Более правильно было бы видеть там имеющееся у нас значение hsv[0], но это ведь одна и та же величина. В качестве доказательства я даже переправил в двух местах. Так что не забываем, что deg_col == hsv[0]. Ну угол мне первый под руку попался, простите.

Результат:

Думаю, всем понятно, что этот метод должен вызываться в onDraw(), как и следующие. Дада, мы вполне уже можем рисовать третье кольцо:

	private void drawAlphaGradient(Canvas c) {
		// три белых линии на черном фоне как бы помогают визуально
		// оценить уровень прозрачности
		c.drawCircle(cx, cy, rad_3 - lw, p_white);
		c.drawCircle(cx, cy, rad_3, p_white);
		c.drawCircle(cx, cy, rad_3 + lw, p_white);
// вытаскиваем компоненты RGB из нашего цвета
		int ir = Color.red(mColor);
		int ig = Color.green(mColor);
		int ib = Color.blue(mColor);
		// массив из двух цветов – наш и он же полностью прозрачный
		int e = Color.argb(0, ir, ig, ib);
		int[] mCol = new int[] {mColor, e};
		// Это мы уже проходили
		Shader sw = new SweepGradient(cx, cy, mCol, null);
		p_alpha.setShader(sw);
		c.drawCircle(cx, cy, rad_3, p_alpha);
	}

И стрелочки:

	private void drawLines(Canvas c) {
		float d = deg_col;
		c.rotate(d, cx, cy);
		c.drawLine(cx + rad_1 + lm, cy, cx + rad_1 - lm, cy, p_handl);
		c.rotate(-d, cx, cy);
		d = deg_sat;
		c.rotate(d, cx, cy);
		c.drawLine(cx + rad_2 + lm, cy, cx + rad_2 - lm, cy, p_handl);
		c.rotate(-d, cx, cy);
		d = deg_alp;
		c.rotate(d, cx, cy);
		c.drawLine(cx + rad_3 + lm, cy, cx + rad_3 - lm, cy, p_handl);
		c.rotate(-d, cx, cy);
	}

У кого-нибудь возник вопрос – зачем в последнем методе локальная переменная d? Возможно, это признаки моей паранойи. Если использовать непосредственно глобальную переменную deg_col или другие, за время отрисовки юзер может их изменить, водя пальцем по экрану. Понятное дело, что за те микросекунды отрисовки изменения будут ничтожными. Но тем не менее функции

c.rotate(deg_col, cx, cy); 

и

c.rotate(-deg_col, cx, cy);

будут поворачивать Canvas на разную величину. И разница эта будет постепенно накапливаться.

Ну не забываем, конечно, задать свойства для наших Paint по вкусу. У меня это как-то так:

	private void init(Context context) {
		setFocusable(true);

		p_color.setStyle(Style.STROKE);
		p_satur.setStyle(Style.STROKE);
		p_alpha.setStyle(Style.STROKE);
		p_center.setStyle(Style.FILL_AND_STROKE);
		p_white.setStrokeWidth(2);
		p_white.setColor(Color.WHITE);
		p_white.setStyle(Style.STROKE);
		p_handl.setStrokeWidth(5);
		p_handl.setColor(Color.WHITE);
		p_handl.setStrokeCap(Cap.ROUND);
		
		setOnTouchListener(this);
	}

setFocusable(true) я пропустил в прошлой статье.

Возвращаемся к нашим OnTouch.

	protected void setSatScale(float f) {
		deg_sat = f;
		if (f < 90) {
			hsv[1] = 1;
			hsv[2] = f / 90;
		}
		else if (f >= 90 && f < 180) {
			hsv[1] = 1 - (f - 90) / 90;
			hsv[2] = 1;
		}
		else {
			hsv[1] = 0;
			hsv[2] = 1 - (f - 180) / 180;
		}
		mColor = Color.HSVToColor(argb[0], hsv);
		p_center.setColor(mColor);
	}	


	protected void setAlphaScale(float f) {
		deg_alp = f;
		argb[0] = (int) (255 - f / 360 * 255);
		mColor = Color.HSVToColor(argb[0], hsv);
		alpha = (float) Color.alpha(mColor) / 255;
		p_center.setColor(mColor);
	}

Ну что, нам осталось как-то вывести полученный результат. Тут опять же дело вкуса и конкретного варианта использования. Кому-то удобнее значение в Preference писать, кому-то Intent слать во все стороны. Я предлагаю организовать нашему View интерфейс, как у настоящего взрослого и самостоятельного контрола. Значение цвета мы можем слать однократно по нажатию на центр круга, можем в реалтайме, по мере изменения цвета в OnTouch. Гулять так гулять, сделаем и то, и другое:

private OnColorChangeListener	listener;

	public interface OnColorChangeListener {
		public void onDismiss(int val, float alpha);
		public void onColorChanged(int val, float alpha);
	}

	public void setOnColorChangeListener(OnColorChangeListener l) {
		this.listener = l;
	}

В OnTouch:

		case MotionEvent.ACTION_DOWN:
			…
			…
			else if (c < r_centr) {
				listener.onDismiss(mColor, alpha);
			}
			break;

		case MotionEvent.ACTION_MOVE:
			…
…
			listener.onColorChanged(mColor, alpha);
			break;
		}
		return true;
	}

Надеюсь, ничего не забыл. А, да. Желательно иметь возможность передавать в наш ColorPicker текущее значение цвета. Добавляем:

	public void setUsedColor(int color, float a) {
		mColor = color;
		Color.colorToHSV(mColor, hsv);
		setColScale(hsv[0]);
		float deg = 0;
		if (hsv[1] == 1) deg = 90 * hsv[2];
		else if (hsv[2] == 1) deg = 180 - 90 * hsv[1];
		else if (hsv[1] == 0) deg = 360 - 180 * hsv[2];
		setSatScale(deg);
		setAlphaScale(360 - 360 * a);
	}

P.S: Еще один нюанс выяснился при практическом использовании. Попытка применить полученный цвет к картинкам (в виде ColorFilter) не меняет их прозрачность. Или я что-то пропустил? Если да – надеюсь, меня поправят более опытные товарищи. Пришлось использовать метод setAlpha, предварительно получив значение прозрачности методом Color.alpha(mColor). Значение int 0-255, а setAlpha(int) в последнее время deprecated. Требуется float от 0 до 1 (типа setAlpha((float) Color.alpha(mColor) / 255));

Раз уж мы претендуем на универсальность нашего контрола, есть смысл засунуть эти вычисления в него. И выдавать прозрачность формата float 0-1. Можно отдельным методом в интерфейсе, можно вторым параметром дополнительно у цвету – дело вкуса. Добавил это в код.

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

Вот теперь все.

Автор: OJV

Источник ^[2]