Analog clock with UIImages for hands?

前端 未结 2 611
余生分开走
余生分开走 2021-01-03 07:57

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:

2条回答
  •  甜味超标
    2021-01-03 08:42

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

    hope useful

提交回复
热议问题