Analog clock with UIImages for hands?

Question

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?

The answer here is pretty on target as well. http://stackoverflow.com/questions/6499996/any-example-iphone-code-for-an-analog-clock (don't need CALayers) — Jonny, Aug 22 '11 at 10:56

nacho4d · Accepted Answer · 2011-12-12T04:57:19.423

12

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.

edited Dec 12 '11 at 04:57

answered Jan 22 '11 at 13:11

nacho4d

43,720
45
157
240

Thanks for the answer, I'll go look through the CALayers/Core Animation Programming Guide. – Andy B Jan 22 '11 at 13:18
It says that .contents and .anchorPoint are not not in structure or onion. What am I doing wrong? – Andy B Jan 22 '11 at 14:04
1

Add QuartzCore.Framework to your project and #import to your file ;) – nacho4d Jan 22 '11 at 14:14

score 0 · Answer 2 · answered Nov 27 '12 at 11:56

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

Analog clock with UIImages for hands?

2 Answers2

Linked