Использование Raphael и JavaScript для зависания с массивами - PullRequest
Новая
       7

Использование Raphael и JavaScript для зависания с массивами

1 голос
/ 25 сентября 2010

Используя Рафаэля, я пытаюсь заставить фигуру появляться, когда вы наводите курсор на невидимую область рядом с ней.Следующий код не работает - где я ошибаюсь?

С каждой формой связаны два пути Рафаэля: один для видимой формы, а другой для невидимой области. 

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

Но я все еще не вижу, что не так с моей версией.

1 Ответ

3 голосов
/ 25 сентября 2010 
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){})
...