Аналоговые часы с UIIмагерами для рук?

Question

Я хочу знать, как сделать аналоговые часы в iPhone SDK. Тем не менее, я хочу, чтобы руки часов были обычными изображениями, а не квадратами, нарисованными, как в этом учебнике: http://iphone-dev-tips.alterplay.com/2010/03/analog-clock-using-quartz-core.html

Проблема с этим учебным пособием заключается в том, что часовые руки нарисованы с помощью Quarzt Core. Я в порядке, если руки могут быть обычными. Каким будет самый простой способ сделать аналоговые часы таким образом?

Answer 1

Сделайте это с помощью CALayers. ПУТЬ намного проще, и производительность лучше.

CALayer *handLayer = [CALayer layer]; 
handLayer.contents = (id)[UIImage imageNamed:@"hand.png"].CGImage; 
handLayer.anchorPoint = CGPointMake(0.5,0.0)]; 
[myview.layer addSublayer:handLayer]; 

//i.e.: if handLayer represents the seconds hand then repeat this every second ;) 
handLayer.transform = CGAffineTransformMakeRotation (angle); //set the angle here 

UPDATE:

Я написал ClockView sample using CALayers, может быть, вы найдете ее полезной.

Answer 2

это один использует 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> 

надеюсь, полезно