1

使用 KineticJS，我一直在尝试创建一个只有一个圆圈和 4 个矩形的组，但是当单击时，矩形会出现在它们周围（用于选项）并在下次单击时隐藏它们。它们被创建得很好（我认为？），我可以到达我只选择矩形的地步，但是当单击主圆来改变它们的状态时，我需要使用 Rect 对象的 setVisible() 函数。

        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] has no method 'setVisible'

4

1 回答 1

1

我不知道 kinectjs，但我想知道它是否与您添加和显示菜单的方式有关。您不使用循环变量来识别特定菜单。例如，您似乎可以将 menuBox 创建为数组或名称与数字连接。然后，在单击/点击处理程序循环中，您可能希望以相同的方式引用各个菜单。

再次查看它，似乎 player.get('Rect') 行正在返回匹配的项目数组。因此，我怀疑您问题的真正解决方案是忽略我的第一段，而是将点击处理程序的循环行更改为以下内容：

menuBox[i-1].setVisible(true);
于 2012-11-07T02:55:30.740 回答