Klikanie na obiekt umieszczony w canvas Opcje

[belg2020]

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

(IMG:https://i.postimg.cc/HnpvnxcL/obrys.png)

[trueblue]

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