Permalänk
Medlem

HTML5 skriva bokstäver

Jag håller på att fixa lite med en webbsida anpassad till undervisning på pekskärmar. En av övningarna jag vill göra är att man ritar/skriver bokstäver/figurer med sitt finger och så skall programmet känna av om man ritar innanför linjerna.

Ex: en person skall rita ett "V". På skärmen visas ett ljusgrått "V" som bakgrund. Användaren skall nu dra sitt finger på skärmen över V:et och helt enkelt "fylla i" bokstaven. Programmet skall känna av om personen dragit fingret över V:et och på vilka ställen finger hamnat utanför.

Jag tänker att jag kan använda mig av html5 och canvas-hanteraren för att rita och känna av vart användaren har ritat. Men hur gör jag på bästa sätt för att programmet skall känna av om användaren ritat i eller utanför bokstaven i bakgrunden?

Permalänk
Medlem

Du måste ha en beskrivning av objektet som skall ritas.
Jag kan komma på tre olika varianter att lösa det på.

Vad vi egentligen vill göra är att godkänna eller neka en bokstav som ritas.

Lösning 1:
Godkänd om om alla ritade pixlar är innanför en areabeskrivning av en bokstav.

Lösning 2:
Godkänd om alla ritade pixlar är max X pixlar ifrån en pixel som beskriver bokstaven.

Lösning 3:
OCR

De två första lösningarna är nog bäst att använda eftersom OCR bara kan identifiera bokstäver och egentligen inte felaktigheter. Skulle vara kul om någon kunde hitta ännu en lösning.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Permalänk
Medlem

Finns det några vettiga sätt att ta fram beskrivningen/kartan över den bokstav/symbol som skall ritas?