Poszukuje materialow / porad jak zrobic funkcjonalnosc w ktorej mozemy rysowac na jakims obiekcie/mapie/wykresie. Cos na zasadzie stawiania punktow na mapie googla lub rysowaniu linii lub prostokatow na wykresie (np u brokera w mobilnej platformie). Robiac inspect element widac tylko zewnetrzny html tag canvas, nie mozna zaznaczyc tego co sie zaznaczylo/narysowalo. Jak to dziala? Cóż to za magia sie skrywa za tym?
0
0
Canvas - Circle progress - tutaj masz wątek poświęcony rysowaniu kółeczek (a'la porgress bar) na canvasie. Rzuć okiem. Wprawdzie nie jest to poradnik dot. rysowania, ale może jakieś pojęcie o co chodzi załapiesz :)
1
Poszukuje materialow / porad jak zrobic funkcjonalnosc w ktorej mozemy rysowac na jakims obiekcie/mapie/wykresie
To zależy. Można to osiągnąć w różny sposób. Można rysować na canvasie (clearRect, lineTo itp. itd. - to na MDN można wyszukać), tylko jest to upierdliwe, ponieważ Canvas działa na zasadzie "rysuj i zapomnij", więc musiałbyś zapamiętywać gdzieś samodzielnie te obiekty, potem przeliczać kursor myszy, szukać czy nie ma obiektu pod myszą... Dlatego istnieją biblioteki (np. Pixi, Fabric czy inne), które ten proces ułatwiają.
Ale jest też inna metoda - potraktować <canvas> jako takie tło, a nad nim tworzyć osobny "layer" (np. divy z position: absolute i mające z canvasem wspólnego parenta, coś jak tutaj:
http://jsfiddle.net/m1rdLx60/1/
Jeśli pierwsze podejście nazwiemy rysowaniem, to tutaj wygląda to trochę tak, jakby canvas był dużą kartką, na które byś nakładał i przesuwał kolejne mniejsze karteczki-divy.
Myślę, że to mogłaby być dobra metoda jeśli np. chciałbyś dodać funkcjonalność do istniejącego już wykresu, a nie chciałbyś mieszać z canvasem za bardzo, żeby nie rozpieprzyć niczego (jeśli np. canvas byłby renderowany przez zewnętrzną bibliotekę).
I to podejście miałoby też zaletę, że potem takie prostokąty byłyby dalej obiektami DOM, więc wychwytywałyby zdarzenia myszy, można byłoby również dynamicznie zmienić rozmiary diva (zamiast divów można też użyć SVG, które mają więcej kształtów (można np. linie krzywe robić)
Albo jeszcze inne podejście - zrezygnować w ogóle z canvasa i pójść od samego początku w stronę SVG. Ale to wymagałoby napisania wykresu już od początku w SVG (ale nie wiem, czy na to możesz sobie pozwolić, czy może masz już np. napisany wykres na Canvasie i jest on nie do ruszenia).
Cos na zasadzie stawiania punktow na mapie googla l
jeśli chodzi o same mapy Google, to one mają różne rzeczy typu "markery" czy inne, które z automatu mają takie rzeczy.
https://developers.google.com/maps/documentation/javascript/markers
i mają API do rysowania po mapach https://developers.google.com/maps/documentation/javascript/overlays
0
generalnie zrobilem maly risercz i wyszlo mi ze SVG powinien byc rozwiazaniem problemow. Ja potrzebuje tylko rzucic na tło rysunek (plik pdf -> szkic, z tego co sie zorientowalem musze go przekonwertowac na jakiegos png czy jpg zeby go w svg wrzucic) , a nastepnie cale rysowanie sprowadza sie do stawiania punktow, ktore musza byc klikalne i opedzone CSS'em