Question

Using KineticJS, i’ve been trying to create a group that has just a circle and 4 rectangles, but when clicked, it will have the rectangles appear around them (for options) and hide them on the next click. They have been created fine(i think ?) and i can get to the point where i have selected just the rectangles, but i need to use the Rect objects’ setVisible() function when the main circle is clicked to chance their states.

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

The circle spawns normally, but whenever they are clicked the code craps out at the setVisible, as previously stated.

This is the javascript error i get:
Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object] has no method ‘setVisible’

Answer 1

I don’t know kinectjs but I have to wonder if it might have something to do with the way you’re adding and showing the menus. You don’t use the loop variables to identify a specific menu. For example, it seems like you might create the menuBox into an array or with a name concatenated with the number. Then, in the click/tap handler loop you probably want to reference the individual menus the same way.

In looking over it again, it seems the player.get(‘Rect’) line is returning an array of items that match. So, I suspect the real solution to your problem is to ignore my first paragraph and instead change the tap handler’s loop line to the following:

menuBox[i-1].setVisible(true);