2013-04-04 23 views
6

Pracuję nad projektem z HTML5 Canvas i KineticJS. Półprzezroczysta nakładka (grupa lub warstwa KineticJS) jest umieszczona na całej scenie. Problem polega na tym, że zdarzenia myszy powiązane z obiektami KineticJS w ​​ramach tej nakładki nie są przetwarzane.Czy obiekt jest "przezroczysty" dla zdarzeń myszy?

Jak mogę uczynić tę nakładkę (lub jakikolwiek inny obiekt) "przezroczystą" dla zdarzeń myszy?

UWAGA: Pytanie dotyczy tylko płótna, nie zakłócają go żadne inne elementy HTML. (. Aby wyjaśnić, co został poproszony poniżej)

Odpowiedz

7

Zakładając znaczy elementy HTML są umieszczane na płótnie, spróbuj patrząc na wskaźnik zdarzeń: pointer events at MDN

np

#foo { 
    pointer-events:none; 
} 
+0

Użyłbym tego również, ale pamiętaj, że ma problemy ze zgodnością w różnych przeglądarkach. – Rodik

+0

Thx za odpowiedź. Ale, tak jak edytowałem w moim pierwszym poście, nie mam na myśli żadnych elementów HTML. – Michael

+0

Ah OK, to ma sens. Patrząc na dokumenty, nie mogę od razu zobaczyć, jak to zrobić za pomocą ich API; czy ta nakładka musi znajdować się w tym samym elemencie płótna, co reszta sceny? – Graham

1

Tak można klikalności najpopularniejszych węzłów dolnych węzłów podobnych do wskaźnika-wydarzeń: brak

Wystarczy powiedzieć górny obiekt nie słuchać imprez ... tak:

myTopObject.setListening(false); 

Teraz wszystkie zdarzenia myszy będą wyświetlane w dolnym obiekcie.

Zobacz ten SO odpowiedzieć kodu i Fiddle: pointer-events in Kineticjs

+0

Czy jest jakiś sposób to zrobić z jQuery lub zwykłym Javascriptem? 'pointer-events: none' również nie jest rozwiązaniem dla mnie. – RaisinBranCrunch

1

Ustawianie krycie warstwy w poziomie określa również krycie na poziomie obiektu.

layer.setOpacity(0.1); 

"Obiekty myszy powiązane z obiektami KineticJS w ​​ramach tej nakładki nie są przetwarzane."

Hmm, zdarzenia myszy związane z obiektem są przetwarzane, chociaż twoja nakładka (warstwa) ma krycie równe 0. to wydaje się działać dobrze, nie wiem, w co się pakujesz.

"Jak sprawić, aby ta nakładka (lub jakikolwiek inny obiekt) była" przezroczysta "na zdarzenia myszy?" Dla mnie mouseover/mouseout zarówno działają dobrze na poziomie warstwy, aby uczynić go pół przezroczysty.

layer.on('mouseover', function() { 
    this.setOpacity(0.5); 
    this.draw(); 
    }); 

    layer.on('mouseout', function() { 
    this.setOpacity(1); 
    this.draw(); 
    }); 

Brakuje layer.draw()?