Raphael 2.1.4 的简单时钟

Question

这里是新手，我有一个基于教程的 Raphael 2.1.4 的简单时钟，页面上的所有内容都可以很好地呈现，但手柄不旋转。然而，它似乎适用于拉斐尔 1.5.X.

你能告诉我我做错了什么吗？

附码笔页 http://codepen.io/scorpion_rain/pen/dGrmQj

代码JS： window.onload = 函数() {

var cWidth = 800, cHeight = 600;
var paper = new Raphael(document.getElementById('canvas_container'), cWidth,    cHeight);

var clockBgX = 200, clockBgY = 300, clockBgRadius = 100;
var cBgCol = '#f5f5f5', cBgStrokeCol = '#444444', cBgStrokeWidth = '5';

var centerDialX = clockBgX, centerDialY = clockBgY;

var hourHandStrokeCol = "#444444", hourHandStrokeWidth = "5";
var minuteHandStrokeCol = "#444444", minuteHandStrokeWidth = "3";
var secondsHandStrokeCol = "#444444", secondsHandStrokeWidth = "2";
var pinDotX = clockBgX, pinDotY = clockBgY, pinDotRadius = 5, pinDotFill = "#000000";




// main clock background and number display
function mainClockBg(){

    var clockBg = paper.circle(clockBgX, clockBgY, clockBgRadius);          // outer circle
        clockBg.attr({  "fill": cBgCol,                                     //   inner background 
                        "stroke": cBgStrokeCol, 
                        "stroke-width": cBgStrokeWidth })

    var radius = Math.PI / 180;                                             // converting from degrees to radian 
    var cx = centerDialX;                                                   // center of dial - horizontal
    var cy = centerDialY;                                                   // center of dial - vertical
    var r  = 90;                                                            // radius distance
    var startA = -90;                                                       // start of numbers
    var angle = 30;                                                         // distance between numbers | 12/360 = 12 stops 
    var x;                                                                  // circle distance inner marker
    var y;                                                                  // circle distance outer marker
    var endA;                                                               // end of text

    // adding numbers to the dial
    for(i = 1; i < 13; i++){

        endA = startA + angle;
        x = cx + r * Math.cos( endA * radius );
        y = cy + r * Math.sin( endA * radius );

        paper.text( x, y, i + "" );
        startA = endA;
    }

}

function dialsDisplay(){

    var hourHand = paper.path("M200, 300L200, 230");
        hourHand.attr({
            "stroke": hourHandStrokeCol,
            "stroke-width": hourHandStrokeWidth
        });

    var minuteHand = paper.path("M200, 300L200, 220");
        minuteHand.attr({
            "stroke": minuteHandStrokeCol,
            "stroke-width": minuteHandStrokeWidth
        })

    var secondsHand = paper.path("M200, 300L200, 216");
        secondsHand.attr({
            "stroke": secondsHandStrokeCol,
            "stroke-width": secondsHandStrokeWidth
        })

    var pinDot = paper.circle(pinDotX, pinDotY, pinDotRadius);
        pinDot.attr({
            "fill": pinDotFill
        });

        updateClock();
        setInterval("updateClock()", 1000);


}

function updateClock(){

    var time = new Date();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();

    hourHand.rotate(  30 * hours + (minutes / 2.5), 200, 300  );
    minuteHand.rotate( 6 * minutes, 200, 300 );
    secondsHand.rotete(6 * seconds, 200, 300);

}



mainClockBg();  
dialsDisplay();    

}

在浏览器的控制台中我收到错误 'cant find variable hourHand'

感谢任何帮助干杯。

Answer 1

您在一个函数中用 'var' 定义一个变量，然后在另一个函数中引用它，这设置了作用域。

Javascript 具有功能范围，因此一个函数不会知道一个变量，除非它在它可以访问的范围内定义。所以将 hourHand、minuteHand、secondsHand 移到函数之外。然后 updateClock 方法将能够访问这些变量。

// THIS WONT WORK
function func1() {
   var hand = 1;
}

function func2() {
   var test = hand;  //hand was declared in other function, so not available here
}

所以试试这个表格

var hand;
function func1() {
   hand = 1;
}

function func2() {
   var test = hand;
}

你也会想要

setInterval(updateClock, 1000);

而不是 setInterval("updateClock()", 1000);

因为 setInterval 需要一个函数来调用，而不是一个字符串来执行。

那我猜你的手的移动有问题，你需要调整:)。

codepen

Raphael 2.1.4 的简单时钟

Simple Clock with Raphael 2.1.4

javascript

html

raphael