Дочерние элементы не распознают функции в KineticJS?

Используя KineticJS, я пытался создать группу, состоящую только из круга и 4 прямоугольников, но при нажатии вокруг них появляются прямоугольники (для параметров) и скрываются при следующем щелчке. Они были созданы нормально (я думаю?), и я могу добраться до точки, где я выбрал только прямоугольники, но мне нужно использовать функцию setVisible() объектов Rect, когда нажимается основной круг, чтобы изменить их состояния.

        function makePlayer(xPos, yPos) {
            var bufferSize = 15;
            var player = new Kinetic.Group();
            var ball = new Kinetic.Circle({
                x: xPos,
                y: yPos,
                radius: 40,
                fill: 'black',
                stroke: 'black',
                strokeWidth: 1
            });
            player.add(ball);
            ball.setAttr("menuShow", false);


            for (var i = 0; i < 4; i++) {
                var menuBox = new Kinetic.Rect({
                    x: ball.getX(),
                    y: ball.getY(),
                    width: 50,
                    height: 50,
                    visible: false
                });
                if (i == 0) {
                    menuBox.setFill('red');
                    menuBox.setOffset(menuBox.getWidth() / 2, ball.getHeight() + bufferSize);
                    menuBox.on("click tap", function () { alert("red box clicked/tapped") });
                } else if (i == 1) {
                    menuBox.setFill('blue');
                    menuBox.setOffset(((ball.getWidth() / 2) * -1) - bufferSize, menuBox.getHeight() / 2);
                    menuBox.on("click tap", function () { alert("blue box clicked/tapped") });
                } else if (i == 2) {
                    menuBox.setFill('yellow');
                    menuBox.setOffset(menuBox.getWidth() / 2, ((ball.getHeight() / 2) * -1) - bufferSize);
                    menuBox.on("click tap", function () { alert("yellow box clicked/tapped") });
                } else if (i == 3) {
                    menuBox.setFill('white');
                    menuBox.setOffset(ball.getWidth() + bufferSize, menuBox.getHeight() / 2);
                    menuBox.on("click tap", function () { alert("white box clicked/tapped") });
                }
                menuBox.setAttr("menu", true);
                player.add(menuBox);
            }
            ball.on("click tap", function () {
                var menuPopup = ball.getAttrs();
                if (menuPopup.menuShow == false) {
                    for (var i = 1; i <= 4; i++) {
                        var menuBox = player.get('Rect');
                        menuBox.setVisible(true);
                    }
                }
            });

Круг появляется нормально, но всякий раз, когда они нажимаются, код вылетает в setVisible, как указано ранее.

Это ошибка javascript, которую я получаю: Uncaught TypeError: Object [object Object], [object Object], [object Object], [object Object] не имеет метода 'setVisible'


javascript kineticjs
person user1804748    schedule 07.11.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не знаю kinectjs, но мне интересно, может ли это иметь какое-то отношение к тому, как вы добавляете и показываете меню. Вы не используете переменные цикла для идентификации конкретного меню. Например, кажется, что вы можете создать menuBox в виде массива или с именем, объединенным с номером. Затем, в цикле обработчика щелчка/нажатия вы, вероятно, захотите ссылаться на отдельные меню таким же образом.

При повторном просмотре кажется, что строка player.get('Rect') возвращает массив совпадающих элементов. Итак, я подозреваю, что реальное решение вашей проблемы состоит в том, чтобы игнорировать мой первый абзац и вместо этого изменить строку цикла обработчика касания на следующее:

menuBox[i-1].setVisible(true);
person Pre101    schedule 07.11.2012
comment
Это сработало, это дало некоторые неожиданные результаты, но это работает. Спасибо за ответ! - person user1804748; 07.11.2012
comment
Вы должны принять этот ответ, это правильно. Вы повторяете от 1 до 4 и каждый раз вызываете setVisible в своем массиве. Попробуйте переместить var menuBox = player.get('Rect') за пределы цикла и использовать фрагмент Pre101 внутри цикла, как было предложено. - person michael.orchard; 07.11.2012