Рафаэль: Как добавить действие по клику, которое меняет цвет? - PullRequest
Новая
       0

Рафаэль: Как добавить действие по клику, которое меняет цвет?

2 голосов
/ 16 декабря 2011

На основании демонстрации Рафаэля: http://raphaeljs.com/australia.html Я создал объекты, которые меняют свой цвет. Но мне нужно добавить действие, онклик изменит его цвет (на оранжевый). И тогда он останется оранжевым, пока на него снова не нажмут.

Я хочу, чтобы эти объекты отображали выбранное состояние (имея другой цвет). Если вы нажмете на объект, он изменит цвет. Если вы нажмете снова, он вернется в нормальное состояние. И снова, если вы нажмете, он изменит цвет и покажет, что выбран.

Это часть моего кода: 

            var current = null;
        for (var state in bodyParts) {
            bodyParts[state].color = Raphael.getColor();
            (function (st, state) {
                st[0].style.cursor = "pointer";
                st[0].onmouseover = function () {
                    current && bodyParts[current].animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500) && (document.getElementById(current).style.display = "");
                    st.animate({ fill: st.color, stroke: "#ccc" }, 500);
                    st.toFront();
                    R.safari();
                    document.getElementById(state).style.display = "block";
                    current = state;
                };
                st[0].onmouseout = function () {
                    st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                    st.toFront();
                    R.safari();
                };
                st[0].onclick = function () {
                    st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                    st.toFront();
                    R.safari();
                };                    
            })(bodyParts[state], state);

При нажатии он меняет цвет, но после того, как я вынимаю мышь из объекта, он возвращается в нормальное состояние и не выбирается. Как я могу добавить это «выбранное» поведение в этот код?

1 Ответ

2 голосов
/ 16 декабря 2011

Добавить другой параметр, который сохраняет выбранное состояние. 

   st[0].state = 0;

Изменить это: 

            st[0].onclick = function () {
                st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

Как это: 

            st[0].onclick = function () {
                st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                st.toFront();
                if (this.state == 0)
                   this.state = 1;
                else
                   this.state = 0;
                R.safari();
            };

А это: 

            st[0].onmouseout = function () {
                st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

Как это: 

            st[0].onmouseout = function () {
                if (this.state == 0)
                   st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                else
                   st.animate({ fill: "#f00", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };

Конечно, с вашими цветами ... но это главная идея.

...