Analog clock with UIImages for hands?

问题

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

The problem with that tutorial is that the clock hands are drawn with Quarzt Core. I'm okay with that as long as the hands could be custom. What would be the easiest way to make an Analog Clock this way?

回答1:

Do it with CALayers. is WAY much easier and performance is better this way.

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:

I wrote a ClockView sample using CALayers, maybe you find it useful.

回答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

来源：https://stackoverflow.com/questions/4767794/analog-clock-with-uiimages-for-hands