Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Klikanie na obiekt umieszczony w canvas
belg2020
post 12.02.2020, 14:31:12
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 6.02.2020

Ostrzeżenie: (0%)
-----


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ę.

Go to the top of the page
+Quote Post
trueblue
post 12.02.2020, 14:43:00
Post #2





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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.

Ten post edytował trueblue 12.02.2020, 14:43:11


--------------------
Go to the top of the page
+Quote Post
belg2020
post 12.02.2020, 15:22:22
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 6.02.2020

Ostrzeżenie: (0%)
-----


kiedy powinno się użyć svg a kiedy canvasa?
Go to the top of the page
+Quote Post
trueblue
post 12.02.2020, 15:43:51
Post #4





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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ąć?


--------------------
Go to the top of the page
+Quote Post
belg2020
post 12.02.2020, 15:50:39
Post #5





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 6.02.2020

Ostrzeżenie: (0%)
-----


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 TUTAJ 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.

Ten post edytował belg2020 12.02.2020, 15:54:30
Go to the top of the page
+Quote Post
trueblue
post 12.02.2020, 16:19:08
Post #6





Grupa: Zarejestrowani
Postów: 5 701
Pomógł: 1562
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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-...ps.html#bubbles

Ten post edytował trueblue 12.02.2020, 16:21:43


--------------------
Go to the top of the page
+Quote Post
belg2020
post 12.02.2020, 16:42:01
Post #7





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 6.02.2020

Ostrzeżenie: (0%)
-----


O TO do mojego projektu w zupełności wystarczy! dziękuje serdecznie.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 17.02.2020 - 01:15