使用 Raphael 和 JavaScript 悬停数组

Question

使用 Raphael，当您将鼠标悬停在形状附近的不可见区域上时，我试图让该形状出现。以下代码不起作用 - 我哪里出错了？

每个形状都有两条与之关联的 Raphael 路径：一条用于可见形状，另一条用于不可见区域。

<script type="text/javascript" charset="utf-8">
 $("document").ready(function() {
        var RM  = Raphael("canvas", 1000, 500);

        var attr = {     // for the visible shapes
            fill: "#bbb",      "fill-opacity": 1,
            stroke: "#222",    "stroke-width": 0.3,
        };
        var attr2 = {    // for the invisible hovering areas
            fill: "green",     "fill-opacity": 0.0,
            stroke: "red",     "stroke-width": 0,
        };
        var things = {};

        /* Square */    things.square     = [ RM.path("m 154.21525,71.431259 74.32805,0 0,70.496711 -74.32805,0 0,-70.496711 z").attr(attr),
                                              RM.path("m 271.25132,77.933263 58.07304,0 0,56.409037 -58.07304,0 0,-56.409037 z").attr(attr2)   ];
        /* Triangle */  things.triangle   = [ RM.path("m 154.02932,222.44063 36.78089,-58.23641 34.48208,58.2364 -71.26297,1e-5").attr(attr),
                                              RM.path("m 271.25132,165.71032 58.07304,0 0,56.40903 -58.07304,0 0,-56.40903 z").attr(attr2)   ];
        for (var shape in things) {
            shape[0].color = Raphael.getColor();

shape[1].onmouseover = function () {
 shape[0].animate({fill:shape[0].color, stroke:"#ccc"}, 500);
 document.getElementById(shape)[0].style.display = "block";
 shape[0].toFront();   R.safari();
};
shape[1].onmouseout = function () {
 shape[0].animate({fill:"#bbb", stroke:"#222"}, 500);
 document.getElementById(shape)[0].style.display = "none";
 shape[0].toFront();   R.safari();
};
        } // end for every member of things
    }); // end the document ready function
</script>

Raphael 网站上的示例使用了更复杂的 javascript： http://raphaeljs.com/australia.html

我没有使用这段代码，因为我不明白他们使用的函数语法：

(function (a, b) {
    ----
})(c, d);

但我仍然看不出我的版本有什么问题。

Answer 1

for (var shape in things) { ...

这不像 foreach，而是更像 Perls：

foreach my $shape (keys $things) { ...

所以你的代码应该是：

for (var shape in things) {
    things[shape][0].color = Raphael.getColor();
    ...

---

补充答案

函数语法比较简单，在现代js代码中很常见，大家应该熟悉一下。让我们一步一步构建这个函数。

我们知道：

function foo (x,y) {};

声明一个函数，但在javascript中函数可以是匿名的：

function (x,y) {};

是一个没有名字的函数。现在，在声明中，这是相当无用的，但如果我们在表达式中这样做，它会产生对该函数的引用。那么我们如何让它成为一个表达式呢？只需在其左侧添加一个= 符号即可：

var foo = function (x,y) {}

是将函数分配给变量 foo 的函数表达式。

除了在= 符号的右侧之外，还有其他地方将代码视为表达式。其中之一是代码发生在大括号内。它真的来自数学：

var x = a * (b + c);

= 符号右侧的所有内容都是一个表达式，但 (b+c) 是特殊的，因为它是首先计算的子表达式。正是() 语法使b+c 本身成为一个表达式。同样：

(function (x,y) {})

强制最初看起来像函数声明的内容成为函数表达式。规则来自前面的数学表达式。

正如我之前提到的，函数表达式的计算结果为函数引用。使用函数引用可以做的一件事是使用它来调用函数：

var foo = function (x,y) {};
foo();

这里，foo 后面的() 有不同的含义：它用于进行函数调用。由于我们可以使用函数引用进行函数调用，并且由于函数表达式的计算结果为函数引用，因此我们可以调用函数而不将其分配给任何变量：

(function (x,y) {})();  // think of it as foo() where foo=(function(x,y){})