javascript - 动力学；使用按钮使多个对象出现和消失

Question

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

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

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

http://jsfiddle.net/T8m64/85/

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

http://jsfiddle.net/T8m64/86/

我的按钮事件代码是:

    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"是第一行，零列；id="0_1"是零行，第一列)。

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

在 KineticJS 形状中，我定义了一个 drawFunc，它引用了一个用于框坐标的变量。这个变量必须是不会改变的东西(即你不会在每次循环迭代时覆盖它。)为此最好的办法是以某种方式将坐标附加到形状对象。我选择计算每个框的行和列并将它们附加到对象。然后在drawFunc中有一些计算是引用box的row/col来计算 Angular 点坐标。无疑有更好的方法来做到这一点，但我很累。

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