Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ JavaScript _ Klikanie na obiekt umieszczony w canvas

Napisany przez: belg2020 12.02.2020, 14:31:12

Panie i panowie, siedzę nad tym, przeszukuję internet i nie wiem jaksobie z problemem poradzić. Zainteresowałem się canvasem (w połączeniu z js/jquery) potrafi zrobić ciekawe efekty. Lecz nie mogę sobie poradzic z klikaniem - jest wiele tutoriali, które pokazują klikanie na prostokąt lub koło - co jest akurat proste do zrobienia ale jeśli kształt jest bardziej skomplikowany albo jest umieszczony png.

Jedyne co mi przychodzi do głowy to coś takiego - napisałem prostą funkcję, która analizuje każdy piksel z osobna oddaj mi współrzędne pierwszego "niebiałego" pixela od lewej i pierwszego "niebiałego" od prawej - wtedy mógłbym napisać statement że jeśli kursor jest na osi x pomiędzy y-start - y-stop to wtedy ... i wtedy przekopiować współrzędne - lecz jak będzie tych obiektów dużo, różnych, o różnym kształcie to wydaje mi się, że to nie jest optymalne rozwiązanie, a wręcz jestem przekonany, że musi być na to inny sposób. Pomóżcie proszę.

Napisany przez: trueblue 12.02.2020, 14:43:00

Na wklęsłych obiektach metoda nie zadziała, już widać to na podbródku.

Jeśli jest tylko jeden obiekt, możesz sprawdzić po prostu kolor klikniętego piksela (zakładając, że obiekt nie posiada białych).
Jeśli więcej, to najłatwiej trzymać współrzędnego obiektów jako bounding rectangle, czyli po prostu prostokąta obejmującego najbardziej wystające "wierzchołki" każdej krawędzi.

Może łatwiej byłoby Ci z SVG.

Napisany przez: belg2020 12.02.2020, 15:22:22

kiedy powinno się użyć svg a kiedy canvasa?

Napisany przez: trueblue 12.02.2020, 15:43:51

Canvas do obsługi bitmap (duże bitmapy, filtry, operacje bitowe), SVG do wektorów.

Gdybyś chciał znajdywać kontur, to należałoby posłużyć się metodą marching ants.
Jeśli zastosujesz bounding rectangle, to w przypadku kilku obiektów zaczynasz od tego na najwyższej warstwie (kolejność musisz przechowywać w jakiejś tablicy).

Co chcesz osiągnąć?

Napisany przez: belg2020 12.02.2020, 15:50:39

Mam mapę świata i na niej są poumieszczane przeróżne obiekty i muszą być "klikalne"

to w takim razie zapoznam się z svg. Może to będzie lepsze rozwiązanie. Jest taka gra karciana https://games.playwpt.com/poker/ i w przeglądarce wyświetlana jako canvas więc raczej w canvasie zrobiona? No i sobie jakoś bez trudu poradzili z klikaniem na obiekty.

Napisany przez: trueblue 12.02.2020, 16:19:08

Nie logowałem się tam, więc nie wiem.

Być może jest to połączenie canvas i SVG, albo canvas na canvas.

Jeszcze jest coś takiego jak tag <area> i <map>.
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles

Napisany przez: belg2020 12.02.2020, 16:42:01

O TO do mojego projektu w zupełności wystarczy! dziękuje serdecznie.