3

I am trying to achieve this WatchFace using Android API:

ScreenShot of desired watch face

These are my paints used for Hours, Minutes and Seconds:

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);

I have implemented the following code to draw the background, the seconds, minutes and hours:

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

Then I draw the hours and minutes

// 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);

And finally the seconds

// 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);

I need to:

  • create a circle in the middle of the screen and move the hours, minutes and seconds with few pixels from the center like the picture displayed.
  • Make the seconds and minutes more "smooth" cause anti-aliasing is set but it does not work as expected

At the moment the result is the following:

Actual WatchFace

Raffaeu
  • 6,694
  • 13
  • 68
  • 110
  • 2
    I didn't think about this solution ... Interesting and way easier approach. I will give it a shot now – Raffaeu Jun 10 '15 at 11:56

1 Answers1

2

To draw a circle is as just as easy as using drawCircle().
So, the dirty trick could be to draw the white one and another bigger one (and maybe even a smaller one) of the same background color to cover the portion of the minutes and second hands.

So, being drawn after the hands, these circles will cover the portion you want to hide.

A very cheap trick (no other trigonometry involved).
Works for sure.

You could even use a layer-list drawable to overlay in the center... ;)

But drawCircle() is quite straightforward, I guess.

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
  • 1
    Tested and works perfectly, I just made a layering of multiple circles with FILL and STROKE. Wow so easy solution and didn't think about it :-) – Raffaeu Jun 10 '15 at 12:14
  • 1
    @MD My Dear!! Nice to meet you! – Phantômaxx Jun 10 '15 at 12:23
  • 1
    @Raffaeu ... were you skeptical? I told you: a dirty trick (not so dirty, after all) is meant to work. This one in particular can save some calculations, so, it's even possibly *faster* than `properly drawn` clock hands. ;) – Phantômaxx Jun 10 '15 at 12:30
  • 1
    @DerGolem I was not, and actually by using some 'tricks' the watch face is faster than playing around with plenty of trigonometry functions. :-) – Raffaeu Jun 10 '15 at 12:33
  • 1
    I'm always on the hunt for optimizations. Even a single 0.001 ns matters for me. I'm old-school, I was grown so. :)= – Phantômaxx Jun 10 '15 at 12:38
  • 1
    @DerGolem That's why you suggested [http://stackoverflow.com/questions/30756052/database-causes-app-to-crash/30756103?noredirect=1#comment49566079_30756103](http://stackoverflow.com/questions/30756052/database-causes-app-to-crash/30756103?noredirect=1#comment49566079_30756103). `You're best Code Optimizer.` – M D Jun 10 '15 at 13:04
  • 1
    @MD Exactly, my friend, exactly. You can't even imagine the deadly jumps I do. (inverse for using -- instead of ++, multiplications and divisions by powers of 2 using << and >> respectively, multiplications by a precalculated 1/n instead of divisions by n, ...) `;)` – Phantômaxx Jun 10 '15 at 13:19