Question

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

        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错误：未捕获的TypeError：Object [object Object]，[object Object]，[object Object]，[object Object]没有方法'setVisible'

Answer 1

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

再看一遍，似乎player.get（'Rect'）行返回一个匹配的项目数组。所以，我怀疑你的问题的真正解决方案是忽略我的第一段，而是将点击处理程序的循环线更改为以下内容：

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

儿童元素无法识别KineticJS中的功能？

1 个答案: