Piotr W.

Piotr W. Symfony2 / MongoDB

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Witam,

Zakładam, że mam dwa divy z img w środku. Obrazki przedstawiają ten sam romb (zamalowany w srodku i transparentne pixle na trójkątach). Przysuwam divy css-em tak aby stykały się krawędzią. Jak wykryć dokładnie który div został kliknięty w zamalowane pole.

Czytałem, że ponoć nie da się wykryć kliknięć na elementach pod spodem klikniętego elementu ale nie mam co do tego pewności. (kliknięcia na nietransparente pixle już napisałem, niestety nie wiem jak przekazać event click na element div pod spodem)

Funkcja nietransparentnego klikniecia :

function nonTransparentClick(e) {
var cell = getCursorPosition(e);
cell.x -= this.offsetLeft;
cell.y -= this.offsetTop;
var id = this.getContext('2d').getImageData(0,0, this.width , this.height);
if (id.data[(cell.y*this.width+cell.x)*4+3] == 255) {
alert(this.id);
};
return false;
}


Proszę o pomoc.

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Też wydaje mi się, że nie da się kliknąć elementu pod jakimś elementem, ale skoro wiesz jakie są pozycje elementów i w którym miejscu nastąpiło kliknięcie, możesz przecież obliczyć w którym miejscu w divie pod spodem nastąpiłoby kliknięcie o ile byłoby to możliwe.
Można spróbować opisywać sobie obrazki jako macierze - generalnie ile głów tyle może być pomysłów ;)Łukasz Skowroński edytował(a) ten post dnia 09.08.11 o godzinie 19:40
Piotr W.

Piotr W. Symfony2 / MongoDB

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Wrzucam linka do moich prób,

pierwsza para to zwykle klikniecie - dziala oczywiscie nieprawidolowo

druga para - transparentne - lepiej ale dalej nie to

@Łukasz mam pozycje kursora ale nie mozna wymusic w jsie klikniecia jeszcze raz w tym samym miejscu wiec bawienie sie z-indexem itp nic nie pomoze.

http://twigeat.net/romb/

ps. korzystanie z tagów "<map>" tez odpada bo docelowo to nie beda proste figury.Piotr Walków edytował(a) ten post dnia 09.08.11 o godzinie 19:52

konto usunięte

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Z mapkow mozesz naprawde skomplikowane rzeczy robic... nawet kwiatki jakbys sie uparl, wiec w przypadku tego co probujesz osiagnac, wydaje sie to najbardziej sensowne.
Piotr W.

Piotr W. Symfony2 / MongoDB

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

@Andrzej , zgadzam się z Tobą lecz wiem, że docelowe img będą zbyt skomplikowane, żeby z map korzystać, wyobraź sobie jeden img składający się z dwóch odzielnych rombów, map staje sie bezużyteczny w tym momencie.

konto usunięte

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Jeden obrazek skladajacych sie z dwoch rombow - nadal nie widze problemu.
Ale jesli uwazasz ze tak wlasnie jest, to bedziesz miec kosmiczny problem zeby zrobic to na poziomie JS w jakis logiczny i prosty sposob (podkreslam slowo prosty).

Jesli faktycznie bedziesz mial skomplikowane, rozne formy itd, prawdodpboonie to co probujesz osiagnac, predzej ci sie uda zaprzegajac flasha/flexa na przezroczystym tle.

Tak naprawde, nadal nie do konca rozumiem jak skomplikowane jest to Twoje skomplikowanie, bo narazie wyglada na zadne :)
Piotr W.

Piotr W. Symfony2 / MongoDB

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

@Andrzej , docelowo to będzie mapa lecz image'y prowincji będza generowane tak więc liczenie wszystkich konturów do <area> będzie wg mnie zabójstwem (jak np tu : www . clickable maps . com / clickable - map - of - europe/ ,tony niepotrzebnych danych). Dlatego też poszukuje js-owego rozwiązania.Piotr Walków edytował(a) ten post dnia 11.10.12 o godzinie 10:58

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Piotrze,

załóżmy ze masz 10 divów nałożonych na siebie tak, że tworzą mapę Nibylandii.
Jeżeli wiesz, że masz 10 warstw o tych samych rozmiarach i znasz dokładnie miejsce kliknięcia możesz sprawdzać która z klikniętych warstw jako pierwsza w danej lokalizacji ma kolorowy pixel a nie transparenty (lub odwrotnie). Coś na zasadzie stosu do sprawdzenia.
Ps. interesować powinno Ciebie tutaj kliknięcie w kontener przechowujący te obrazki a nie w konkretny obrazek.Łukasz Skowroński edytował(a) ten post dnia 09.08.11 o godzinie 20:27

konto usunięte

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Ostatni przyklad podany przez Lukasza brzmi "jak zamordowac przegladarke" ;)

Piotrze, wytlumaczyles czego ci trzeba i masz racje - zrobienie tego na mapach bedzie rzeznia. Nadal najbardziej sympatyczna rzeznia niz proba zrobienia tego na JSie (pamietaj ze png z przezroczystosciami, nadal jest prostkatem dla przegladarki, wiec bedzisz musial sie bawic w sprawdzenie kolorow i takie tam.

Krotki wniosek i sugestia z mojej strony - FLASH! zrobisz co trzeba, bedzie ladniesze, fajniejsze, szybko dzialalo i nie bedziesz mial ochoty sobie strzelic w glowe robiac to ;)

ps. wlasnie mi sie przypomnialo ze robilem cos podobnego do tego co Tobie trzeba (tylko ze to byla mapa rosji i niemiec). Zrobilem to na mapach ale nie bawilem sie w linie idealnie lecace po krawedzi - uzytkownik tez nie bedzie. Uprosc formy i bedzie dobrze, nikt tego nie zauwazy.Andrzej Winnicki edytował(a) ten post dnia 09.08.11 o godzinie 20:32

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Dzięki Andrzeju za fajny komentarz :)

Oczywiście mój "algorytm" można udoskonalić o przesunięcia i mniejsze png i mniej przenikania, ale kosztem większej ilości JS - ale moim zdaniem działałoby i nadal będzie to szybsze do zrobienia niż nauczyć się Flasha :)
Szymon Piłkowski

Szymon Piłkowski Senior JavaScript
Developer

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

flash? 10 divow? po co? canvas to dobre rozwiazanie. wystarczy prosta hitmapa - np. kazdemu obrazkowi przypisac unikalny kolor, przerysowac go na canvas zmieniajac wszystkie nieprzeroczyste piksele na ten kolor (moze byc potrzebny bufor), nalozyc canvas na divy (przezroczysty), podpiac event do canvasa. w obsludze eventu sprawdzac dane piksela w ktory kliknieto, na podstawie zapisanego skojarzenia kolor - element pobrac wlasciwy element, przekazac mu event.

konto usunięte

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Szymon Piłkowski:
Pytanie na ile to rozwiazanie ma byc kompatybilne ze starszymi przegladarkami.
"nalozyc canvas na divy" - co dalej nie rozwiazane problemu warstwowania divow i nieklikalnosci na te z tylu.

Nie wspominajac o fakcie, ze skoro takie pytanie sie tutaj pojawilo, to znaczy ze kolega nie wie jak uzywac canvasow i nie wie jak potencjalnie rozwiazac to przez JS, wiec nawet nauczenie sie flasha by to osignac na podstawowym poziomie nie powinno stanowic problemu ;)
Szymon Piłkowski

Szymon Piłkowski Senior JavaScript
Developer

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

Andrzej Winnicki:
"nalozyc canvas na divy" - co dalej nie rozwiazane problemu warstwowania divow i nieklikalnosci na te z tylu.

no, nie rozwiazuje, a powinno? - wiedzac ktory element powinien zostac klikniety mozemy po prostu triggerowac "click" na odpowiednim elemencie.

skoro takie pytanie pojawilo sie tutaj, to znaczy, ze kolega nie wie jak rozwiazac problem przy uzyciu technologii webowych. nie wiadomo nic o tym, czy nie wie jak rozwiazac go we flashu, unity3d, silverlighcie albo activex. mozemy jednak wnioskowac, ze skoro to pytanie pojawilo sie wlasnie tutaj, a w podlinkowanym przykladzie kolega stara sie uzywac wlasnie canvasa, ze jego intencja jest zrobienie tego jednak w JS. zreszta, cytujac, "Dlatego też poszukuje js-owego rozwiązania."
Piotr W.

Piotr W. Symfony2 / MongoDB

Temat: Wykrycie kliknięcia na nietransparentym pikslu div'a

@Andrzej W , tak jak pisałem wcześniej js-owe rozwiązanie wchodzi w grę. Jeśli chodzi o przeglądarki to zanim skończę pewnie to już nikt tak starych, które nie obsługują canvas, nie będzie używał.

@Szymon , dziękuję, mniejwięcej zrozumiałem. JS-owa 'hitmapa' może być generowana na start. Cały canvas mógłbym generować na zasadzie 'zacznij rysować od (x,y) - skoro i tak będę miał te współrzędne do poprawnego wyświetlenia. Tylko czy 'hitmapa' ma być 'nad' całym kontenerem z img, tak aby użytkownik klikając na kontener wywoływał kliknięcie tylko na odpowiednim img? Jeśli tak zapewne wszystkie inne event'y (mouseover itp) też będą musiały być sprawdzane na 'hitmapie' a nie na podstawowym kontenerze. Ps. Div'ów będzie na start ok 40. Tak więc bufor na start będzie musiał być użyty.

Ps. Jeszcze (nie)stety nie widziałem użytecznego skryptu js, który ubił operę.Piotr Walków edytował(a) ten post dnia 09.08.11 o godzinie 22:47



Wyślij zaproszenie do