KineticJS; 버튼을 사용하여 여러 객체를 표시하거나 사라지게하기

Question

저는 KineticJS를 처음 접하고 버튼으로 다른 항목을 나타나게하거나 사라지게 만드는 방법을 알아 내려고하고 있습니다. 아래에는 JSFiddles 예제가 있습니다.

네 개의 상자가 있습니다. 상자의 단추를 클릭하면 상자가 나타나고 보이는 다른 상자가 사라지도록하려고합니다.

첫 번째 JSFiddle에서는 addEventListener를 사용하고 네 개의 사각형을 모두 나열하여 오른쪽 불투명도로 설정했습니다. 그리고 그것을 잘 작동합니다 :

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

OK, 그래서 나는 잘 모른다 KineticJS에 대해서는,하지만 평범한 자바 스크립트로 원하는 것을 얻을 수 있다고 생각합니다.

Here is a fiddle 원하는 것을 수행하는 한 가지 방법을 보여줍니다.

기본 아이디어는 하나의 공통 클래스 이름을 갖도록 모든 단추를 설정한다는 것입니다. 그런 다음 document.getElementsByClassname을 사용하면 버튼 요소의 배열을 가져올 수 있습니다. 행/열 레이아웃에서 원하는 사각형의 원하는 위치를 설명하기 위해 각 버튼의 ID를 사용했습니다 (예 : id = "1_0"은 행 1, 열 0, id = "0_1"은 행 0, 열 1).

그러면 배열을 반복하고 KineticJS 모양 객체와 이벤트 리스너를 첨부하면됩니다.

KineticJS 모양에서 상자 좌표의 변수를 참조하는 drawFunc를 정의했습니다. 이 변수는 변경되지 않는 항목이어야합니다 (반복문 반복 시마다 반복 작성하지 않아야합니다.)이를 위해 가장 좋은 방법은 좌표를 모양 객체에 연결하는 것입니다. 각 상자의 행과 열을 계산하여 객체에 연결하기로했습니다. 그런 다음 상자의 행/열을 참조하여 코너 좌표를 계산하는 drawFunc의 계산이 있습니다. 의심 할 여지없이 더 좋은 방법이 있지만 피곤합니다.

이제 원하는만큼 HTML 버튼을 만들 수 있으며, ID로 지정된 위치를 기반으로 상자를 만듭니다.