Analog watch with UIImages for hands?

Question

I want to know how to make an analog clock in the iPhone SDK. However, I want the hands of the watch to be ordinary images, not squares drawn, as in this lesson: http://iphone-dev-tips.alterplay.com/2010/03/analog-clock-using-quartz -core.html

The problem with this tutorial is that the watch hands are drawn using Quarzt Core. I'm fine if the hands can be ordinary. What would be the easiest way to make an analog clock this way?

Answer 1

Do this with CALayers. WAY is much simpler and performance will be better.

CALayer *handLayer = [CALayer layer]; handLayer.contents = (id)[UIImage imageNamed:@"hand.png"].CGImage; handLayer.anchorPoint = CGPointMake(0.5,0.0)]; [myview.layer addSublayer:handLayer]; //ie: if handLayer represents the seconds hand then repeat this every second ;) handLayer.transform = CGAffineTransformMakeRotation (angle); //set the angle here 

UPDATE:

I wrote a ClockView sample using CALayers , you might find this useful.

Answer 2

this one uses raphael js http://jsfiddle.net/8srjq/

  function start(){ canvas = Raphael("clock",200, 200); var h_sign; for(i=0;i<24;i++){ var p = Math.round(40*Math.cos(15*i*Math.PI/180)); if(p==40 || p==-40 || p==0){ var start_x = 100+Math.round(35*Math.cos(15*i*Math.PI/180)); var start_y = 100+Math.round(35*Math.sin(15*i*Math.PI/180)); }else{ var start_x = 100+Math.round(39*Math.cos(15*i*Math.PI/180)); var start_y = 100+Math.round(39*Math.sin(15*i*Math.PI/180)); } var end_x = 100+Math.round(47*Math.cos(15*i*Math.PI/180)); var end_y = 100+Math.round(47*Math.sin(15*i*Math.PI/180)); h_sign = canvas.path("M"+start_x+" "+start_y+"L"+end_x+" "+end_y); h_sign.attr({stroke:"#888","stroke-width":1}) } h_hand = canvas.path("M100 100L100 70"); h_hand.attr({stroke: "#eee", "stroke-width": 3}); min_hand = canvas.path("M100 100L100 65"); min_hand.attr({stroke: "#eee", "stroke-width": 2}); sec_hand = canvas.path("M100 110L100 55"); sec_hand.attr({stroke: "#f00", "stroke-width": 1}); var pin = canvas.circle(100, 100, 2); pin.attr("fill", "#fff"); setInterval(function(){ var now = new Date(); var h = now.getHours(); var min = now.getMinutes(); var sec = now.getSeconds(); h_hand.rotate(30*h+(min/2.5), 100, 100); min_hand.rotate(6*min, 100, 100); sec_hand.rotate(6*sec, 100, 100); },1000); }​ </script> 

hope useful