Question

我是KineticJS的新手，我正在试图弄清楚如何使用按钮显示或消失不同的项目。下面是带有示例的JSFiddles。

有四个盒子。我想这样做，当我点击一个框的按钮时，框出现，任何其他可见的框消失。

在第一个JSFiddle中，我使用了addEventListener并单独列出了所有四个方块，将它们设置为正确的不透明度。它工作正常：

但是，我实际想要实现的项目有30个而不是4个。所以我的问题是，是否有更快的方法将项目组合在一起而不是列出它们。我用Kinetic.Group尝试了这个，但它似乎不起作用：

按钮事件的代码是：

    document.getElementById('s1').addEventListener('click', function() {
        square.setOpacity(1);       
        layer.draw();
    }, false);

Answer 1

好的，所以我对KineticJS了解不多，但我认为你可以通过简单的旧JavaScript实现你想要的。

Here is a fiddle显示了一种方法来做你想做的事。

这里的基本思想是将所有按钮设置为具有一个公共类名。然后，使用document.getElementsByClassname，您可以获得一组按钮元素。我使用每个按钮的id来描述行/列布局中结果正方形的所需位置（例如，id =“1_0”是第一行，第0列; id =“0_1”是第0行，第1列）。

然后你要做的就是遍历数组并附加KineticJS形状对象和事件监听器。

在KineticJS形状中，我定义了一个drawFunc，它引用了盒子坐标的变量。这个变量必须是不会改变的东西（即每次循环迭代时你都不会写它。）最好的办法是以某种方式将坐标附加到形状对象上。我选择计算每个框的行和列并将它们附加到对象。然后在drawFunc中有一些计算引用框的行/列来计算角坐标。毫无疑问，有更好的方法，但我很累。

现在，您可以根据需要在HTML中创建任意数量的按钮，他们将根据ID中指定的位置创建框。

KineticJS;使用按钮使多个对象出现和消失

1 个答案: