2013-05-14 4 views
1

이 코드는 Kineticjs를 사용합니다. 이미지 중 하나에 mouseover 및 mouseout 이벤트를 사용하고 있습니다. 이 레이어에는 2 개의 이미지가 있습니다. 나는 그들 중 하나만 숨기고 싶다. 각 이미지에 대해 별도의 레이어를 만들어야합니까?레이어의 단일 요소 숨기기 - Kineticjs

img.onload = function(){ 
        var image = new Kinetic.Image({ 
         image: img, 
         name:'iconImage', 
         width: 50, 
         height: 50, 
         //draggable: true, 
         //visible:true, 
         listening:true 
        }); 
        var image2 = new Kinetic.Image({ 
         x:100, 
         y:100, 
         image: img, 
         name:'iconImage', 
         width: 50, 
         height: 50, 
         //draggable: true, 
         //visible:true, 
         listening:true 
        }); 
       iconLayer.add(image).add(image2); 
       stage.add(iconLayer); 
       //stage.draw(); 


       image.on('mouseover',function(){ 
        image.hide(); 

        iconLayer.clear(); 
        //iconLayer.draw(); 

       }); 

       image.on('mouseout',function(){ 
        //iconLayer.clear(); 
        //image.show(); 
        //iconLayer.draw(); 

        image.show(); 
        iconLayer.draw(); 

        //stage.draw(); 
       }); 

       } 

hide() 및 show() 함수를 사용하는 가장 좋은 방법은 무엇입니까?

답변

2

별도의 레이어가 필요하지 않습니다. 마르크 말했듯이()

1

, 당신은 hide()show()을 사용할 수 있지만 stage.draw()와 모양을 표시/숨기기 후 레이어를 다시 그려야하는 것을 잊지 마세요

그냥 myShape.hide()와 myShape.show를 사용합니다.

0

위의 대답을 읽고 내 대답을 이해하십시오.

내 코드에서 image1에 'mouseover'이벤트를 추가하고 image1을 숨기기 그런 다음 image1에 'mouseout'을 추가하고 image1을 추가합니다. hide-draw하고 show-draw 할 때 이미지가 깜박이고 완전히 사라지지 않습니다. 이미지가 더 이상 존재하지 않으므로 키네틱스가 숨어 짐 = mouseout을 가져오고 있습니다..

그러나 image1의 'mouseover'이벤트는 hide-draw 및 show-draw 메서드로 잘 작동합니다. 이 시나리오는 나를 위해 작동합니다. 도움 주셔서 감사합니다

1

@tussh 이벤트 처리기가 더 이상 숨겨진 개체에 대한 이벤트를 처리하지 않으므로 숨기기 = mouseout에 대한 귀하의 관찰에 동의합니다. 그게 효과가있는 것은 이미지 위에 투명 사각형을 추가하거나 투명 이미지 (알파)를 추가하고 대신에 이벤트 핸들러를 설정하십시오. 개체는 항상 눈에 보이지 않지만 모든 이벤트를 감지합니다.