Canvas - rysowanie na podstawie danych

pytanie zadane 20 października 2017 w HTML i CSS przez adrian588 Początkujący (470 p.)

Witam.

Wiem w jaki sposób stworzyć element w Canvas taki jak chcę.

Ale mam inne pytanie:

Mam na stronie np. formularz z polami:

- wysokość

- szerokość

Jak zrobić aby na tej same stronie narysować prostokąt i przekazać te dane do Canvas?

Może banalne ale nie umiem sobie z tym poradzić.

komentarz 20 października 2017 przez Patrycjerz Mędrzec (192,320 p.)

Chodzi ci o wprowadzenie wysokości i szerokości canvasa przez użytkownika na stronie?

komentarz 20 października 2017 przez adrian588 Początkujący (470 p.)

Dokładnie chcę na swojej stronie:

http://kalkulatoryinzynierskie.pl/belkazginanie.php

gdzie mam statyczny obrazek belki wstawić canvas tak aby zmieniał się w zależności od podanych poniżej w formularzu wartości.

3 odpowiedzi

odpowiedź 20 października 2017 przez Patrycjerz Mędrzec (192,320 p.)

odpowiedź 20 października 2017 przez obl Maniak (51,280 p.)

Tak jak Patrycjerz napisał wystarczy w kodzie html utworzyć odpowiednie kontrolki i za pomocą javascript podpiąć własną funkcję, która przy każdej zmianie musi sprawdzić poprawność wpisanych danych, i gdy te są poprawne zmienić wymiary canvasu.

komentarz 20 października 2017 przez adrian588 Początkujący (470 p.)

Ok.

Rozumiem iż cały skrypt zostawiam tak jak jest w PHP bo obecnie wszystkie obliczenia mam w PHP.

Dodatkowo pod guzik Oblicz wstawiam sobie funkcję runAjax()

oraz dodatkowo JS który wczyta dane z inputów i podstawi je do Canvas tak?

komentarz 20 października 2017 przez obl Maniak (51,280 p.)

Jeżeli skrypt masz w php to bez Ajax-a się nie obejdzie. Musisz się jakoś na bieżąco dogadywać z skryptem php.

komentarz 20 października 2017 przez Patrycjerz Mędrzec (192,320 p.)

To zależy czy dane do canvasa są przepuszczane przez serwer. Jeśli jedynym tego powodem jest walidacja danych lub kwestia obliczenia czegoś, to nie widzę większego sensu czynienia tego w PHP. Przecież takie dane zostają u klienta i to jego sprawa, czy sobie taki skrypt zmodyfikuje czy nie.

Jeśli powodem jest zapis danych, to rzeczywiście, dynamicznie zrobisz to za pomocą Ajaxa. Tak jak powiedziałeś, czytasz dane z inputa i wg nich modyfikujesz canvasa.

komentarz 20 października 2017 przez adrian588 Początkujący (470 p.)

hmm no nic.. pozostało mi testować i sprawdzać co i jak działa:) no nic.. uczę się programować od całego miesiąca więc jeszcze duuuużo przede mną:)

komentarz 20 października 2017 przez obl Maniak (51,280 p.)

No to powodzenia i dobrej zabawy życzę :)

komentarz 20 października 2017 przez adrian588 Początkujący (470 p.)

Dzięki:) Na ten czas się wciągam nieźle:)

Tylko czasu mało:)

odpowiedź 20 października 2017 przez Tomek Sochacki Ekspert (227,510 p.)
edycja 20 października 2017 przez Tomek Sochacki

Fajny pomysł na aplikację, taka mała rada - może warto zadbać o jakąś sensowną analizę danych od użytkownika, np. aplikacja dopuszcza szerokość belki 25cm przy wysokości 30000cm :) teoretycznie obliczenia są przeprowadzone poprawnie (jeśli uprościmy pewne zagadnienia związane z teorią naprężeń belki gdyż mamy tu de facto model mający tylko długość, ale to teraz nieistotne) ale procent wykorzystania przekroju 0,07% trochę dziwnie wygląda... :)

Ale to tak na marginesie. Działaj dalej, a może za chwilę dorobisz rysowanie MNT na schematach statycznych :) Kiedyś sam miałem przez chwilę ochotę pobawić się canvasem do rysowania momentów ale szybko mi się odechciało jak zebrałem sobie komplet warunków... :) Może Ty będziesz miał więcej ciepliwości, powodzenia!

komentarz 22 października 2017 przez adrian588 Początkujący (470 p.)

Dzięki za miłe słowa.

Zobaczymy co z tych aplikacji wyjdzie:) Jak na tą chwilę mam zapał więc działam;)

Odnośnie poprawności danych:

jak wybierzesz metodę obliczeń studenckie to wówczas pojawi się informacja o błędnie podanej danej w polu wysokość.

Dla wyników inżynierskich nie wyświetlam takiego komunikatu.

A nad nauką java scritp pracuje więc może kiedyś się to pojawi:)