[HTML/JS/AJAX] Plaatje manipuleren

[xilent_xage]

Hoi,

Ik zit met de volgende uitdaging: Ik wil op mijn website een smiley zetten (gewoon een plaatje van het bekende gele rondje). De bedoeling is dat bezoekers van mijn website de mond van de smiley kunnen aanpassen: Standaard staat deze horizontaal, maar bezoekers moeten de mond kunnen aanpassen naar een lach en 'sip gezichtje'. En dan niet in drie stappen, maar ook gradaties kunnen aangeven. Bonuspunten zijn voor verdere manipulatie van de mond zoals links hoog rechts laag, of nog gekker (liggende S) enz.

Ik wil het aanpassen lekker intuitief maken: Het liefst zou ik willen dat je de mond op een punt kan 'vastpakken' en omhoog danwel omlaag trekken met een maximum en minimum uiteraard. Vervolgens moet de smiley middels een button serverside opgeslagen kunnen worden in een MySQL database. Het is de bedoeling dat ik vervolgens het 'gemiddelde' van de smileys kan berekenen om zo een 'opgetelde' smiley van al mijn bezoekers kan tonen.

Ik ben inmiddels behoorlijk handig in javascript, en ook AJAX lukt heel aardig. Ik wil als het even niet hoeft geen flash gebruiken. Ik heb alleen in dit geval even geen idee hoe ik dit zou moeten aanpakken. Iemand een idee?

[Icelus]

Het gaat alleen om de mond?
Je zou een aantal afbeeldingen kunnen maken en die d.m.v. AJAX in kunnen laden. Met bibliotheken als jQuery kun je vrij eenvoudig de afbeelding sleep- en schaalbaar maken. De gekozen afbeelding, positie en afmetingen zou je dan op kunnen slaan in de database.

Wil je echt de vorm kunnen veranderen dan kom je snel bij het gebruik van bijvoorbeeld polygonen uit. Er is een plugin voor jQuery (net als andere bibliotheken) om lijnen e.d. te tekenen. Dit maakt het wel een stuk complexer, zeker als je ook een gemiddelde wilt gaan berekenen.

[Bosmonster]

Ik vrees dat je hier toch echt Flash voor zal moeten pakken en zelfs dan wordt het nog een lastig klusje als je de vorm volledig vrij aanpasbaar wilt houden.

[ Voor 44% gewijzigd door Bosmonster op 12-11-2008 17:57 ]

[RobIII]

Bosmonster schreef op woensdag 12 november 2008 @ 17:43:
Ik vrees dat je hier toch echt Flash voor zal moeten pakken en zelfs dan wordt het nog een lastig klusje als je de vorm volledig vrij aanpasbaar wilt houden.

Met een <canvas> en een bezier curve kom je denk ik een heel eind

[Juup]

http://pilat.free.fr/dessin_loc/draw.svg (voor IE is de adobe svg viewer benodigd)
Create bezier curve > 2 x klikken > Modify shape > curve aanklikken > zachtjes de rode bolletjes verslepen.

[Bosmonster]

RobIII schreef op donderdag 13 november 2008 @ 01:30:
[...]

Met een <canvas> en een bezier curve kom je denk ik een heel eind

Dat maakt het niet makkelijker En ook niet compatibeler.

Zelfde geldt voor SVG natuurlijk.

[ Voor 4% gewijzigd door Bosmonster op 13-11-2008 09:33 ]