Android, нарисуйте часы со смещением от центра

Я пытаюсь добиться этого WatchFace с помощью Android API:

ScreenShot of desired watch face

Это мои краски, используемые для часов, минут и секунд:

secondsPaint.setAntiAlias(true);
secondsPaint.setColor(Color.RED);
secondsPaint.setStyle(Paint.Style.STROKE);
secondsPaint.setStrokeJoin(Paint.Join.ROUND);
secondsPaint.setStrokeWidth(3f);
secondsPaint.setAntiAlias(true);
minutesPaint.setColor(Color.WHITE);
minutesPaint.setStyle(Paint.Style.STROKE);
minutesPaint.setStrokeJoin(Paint.Join.ROUND);
minutesPaint.setStrokeWidth(4f);
hoursPaint.setAntiAlias(true);
hoursPaint.setColor(Color.WHITE);
hoursPaint.setStyle(Paint.Style.STROKE);
hoursPaint.setStrokeJoin(Paint.Join.ROUND);
hoursPaint.setStrokeWidth(5f);

Я реализовал следующий код для рисования фона, секунд, минут и часов:

// Background
canvas.drawBitmap(background, 0, 0, null);

Тогда я рисую часы и минуты

// Draw the minute and hour hands.
float minX = (float) Math.sin(minRot) * minLength;
float minY = (float) -Math.cos(minRot) * minLength;
canvas.drawLine(centerX, centerY, centerX + minX, centerY + minY, minutesPai
float hrX = (float) Math.sin(hrRot) * hrLength;
float hrY = (float) -Math.cos(hrRot) * hrLength;
canvas.drawLine(centerX, centerY, centerX + hrX, centerY + hrY, hoursPaint);

И наконец секунды

// draw seconds
float secX = (float) Math.sin(secRot) * secLength;
float secY = (float) -Math.cos(secRot) * secLength;
canvas.drawLine(centerX, centerY, centerX + secX, centerY + secY, secondsPaint);

Мне необходимо:

  • создайте круг в центре экрана и переместите часы, минуты и секунды на несколько пикселей от центра, как показано на рисунке.
  • Сделайте секунды и минуты более "плавными", поскольку сглаживание установлено, но оно не работает должным образом

На данный момент результат следующий:

Актуальные WatchFace

1 ответ

Решение

Нарисовать круг так же просто, как использовать drawCircle(),
Таким образом, грязный трюк может заключаться в том, чтобы нарисовать один белый и другой больший (и, возможно, даже меньший) одного и того же цвета фона, чтобы покрыть часть минутной и секундной стрелок.

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

Очень дешевый трюк (никакой другой тригонометрии).
Работает точно.

Вы даже можете использовать список слоев, который можно нарисовать для наложения в центре...;)

Но drawCircle() довольно прост, я думаю.

Другие вопросы по тегам