[PHP] imagerotate hoeken bepalen van gedraaid plaatje

[bpt]

Ik ben bezig met een foto album met wat grafische toevoegingen. Zo worden de thumbnails bijv. als een kleine 'polaroid' (foto met witte randen, je weet wel) weergegeven, en iets gedraaid om het geheel wat speelser te maken.

Door het gebrek aan goede anti alias functies (die werken met een transparante achtergrond) in PHP wil ik mijn gedraaide plaatje 4 lijnen geven die de lelijke randen wegwerkt die ontstaan door het draaien van het plaatje met een transparante achtergrond.

Aangezien mijn wiskunde me in de steek laat wilde ik graag weten of iemand weet hoe je kan bepalen waar die hoeken van het gedraaide plaatje zich bevinden binnen de boundingbox van het geheel.

Gegevens die ik tot mijn beschikking heb zijn:
Breedte en hoogte van het originele plaatje (200, 133)
Hoogte en breedte van het nieuwe plaatje waarin bovenstaande plaatje zit (iets groter, aangezien het plaatje erin gedraaid is) (239, 231)
Het aantal graden dat het plaatje gedraaid is. (40)

Misschien om mijn vraag iets makkelijker te maken:
Hoe bepaal ik de x&y positie van de hoeken (met rood aangegeven) met bovenstaande gegevens in een plaatje als dit:

[Verwijderd]

Reken je coordinaten om zodat je draaipunt het nulpunt word en vervolgens kun je simpel met Sinus en Cosinus oplossen. Je weet de lengte van het middelpunt naar een hoek, die veranderd niet.
Als je altijd met plaatjes van dezelfde verhoudingen werkt weet je al de hoek van de lijn van het middelpunt naar een rode stip. (Bijvoorbeeld rechtsboven is aanliggende lengte van 100, overstaande lengte van 67, hoek = Sin(67/100).
Tel hier 40 (of Pi / 180 * 40 bij radians) bij op en reken terug naar coordinaten

[bpt]

Verwijderd schreef op zondag 22 februari 2009 @ 16:36:
Reken je coordinaten om zodat je draaipunt het nulpunt word en vervolgens kun je simpel met Sinus en Cosinus oplossen. Je weet de lengte van het middelpunt naar een hoek, die veranderd niet.
Als je altijd met plaatjes van dezelfde verhoudingen werkt weet je al de hoek van de lijn van het middelpunt naar een rode stip. (Bijvoorbeeld rechtsboven is aanliggende lengte van 100, overstaande lengte van 67, hoek = Sin(67/100).
Tel hier 40 (of Pi / 180 * 40 bij radians) bij op en reken terug naar coordinaten

Bedankt voor je reactie, klinkt makkelijk, maar toch kom ik er niet helemaal uit.

Als ik het goed begrijp, is het draapunt het midden (x: 100, y: 67)
Neem ik het midden van het origineel, of van het gedraaide plaatje?

Als voorbeeld neem ik even het origineel;
Hoek = 0.62098598703656 sin(67 / 100)

Daar het aantal graden bij op tellen;
40.62098598703656

De uitkomst is voor mij weinig zeggend, ik zou met deze uitkomst ook nog iets moeten doen, ik heb alleen geen idee wat.

[Luqq]

Neem de linkeronderhoek als draaipunt. Daar is je plaatje immers om gedraaid. Daar weet je de coördinaten van.

Daarna kan je met sinus en cosinus het punt rechts daarvan bv bepalen. Sin = overstaand / schuin ->

overstaand = sin(40) * schuin(je breedte van het plaatje). Dan weetje het hoogteverschil ten opzichte van de linkeronderhoek

cos = aansluitend / schuin. aansluitend = cos(40) * schuin. dat is het breedte verschil ten opzichte van je linker onderhoek. Hieruit kun je de andere punten ook wel vinden, hoop ik

Succes!

[bpt]

Luqq schreef op zondag 22 februari 2009 @ 17:39:
Neem de linkeronderhoek als draaipunt. Daar is je plaatje immers om gedraaid. Daar weet je de coördinaten van.

Daarna kan je met sinus en cosinus het punt rechts daarvan bv bepalen. Sin = overstaand / schuin ->

overstaand = sin(40) * schuin(je breedte van het plaatje). Dan weetje het hoogteverschil ten opzichte van de linkeronderhoek

cos = aansluitend / schuin. aansluitend = cos(40) * schuin. dat is het breedte verschil ten opzichte van je linker onderhoek. Hieruit kun je de andere punten ook wel vinden, hoop ik

Succes!

Volgens mij heb ik de eerste hoek te pakken, ik hoor graag als m'n berekening niet goed is:

hoogte van plaatje = 133
breedte van plaatje = 200
graden van draai = 40

$Y1 = (sin(40) * 200) / (200/133);
$X1 = (cos(40) * 0) / (200/133);

$Y1 = 131.89994965625
$X1 = 0

die positie is gelijk aan de linker bovenhoek van het gedraaide plaatje.

Kun je me een stap in de richting van de volgende hoeken geven?

[frickY]

Geen antwoord op je vraag, maar PHP en GD zijn prima in staat je randjes te anti-aliassen, hoor

[bpt]

frickY schreef op zondag 22 februari 2009 @ 19:08:
Geen antwoord op je vraag, maar PHP en GD zijn prima in staat je randjes te anti-aliassen, hoor

Daar zou ik graag een voorbeeld van willen zien

Het probleem is, dat als je met transparante achtergronden werkt, imagecolortransparent alleen de exact aangegeven RGB waarde transparant zet. Er is geen mogelijkheid om omliggende tinten ook transparant te maken, waardoor je een ge-antialiasde rand krijgt, met de transparante kleur (althans, tinten van die kleur).

Zie voorbeeld plaatje, hierbij is een blauwe kleur de transparante kleur:


Tinten (dus iets lichter, wat door de anti alias gebeurd) worden niet transparant gemaakt.

Edit: Mocht je een manier weten om dit wel werkend te krijgen, hoor ik dat ook graag.

[ Voor 5% gewijzigd door bpt op 22-02-2009 19:20 ]

[Luqq]

leslievw schreef op zondag 22 februari 2009 @ 18:39:
[...]


Volgens mij heb ik de eerste hoek te pakken, ik hoor graag als m'n berekening niet goed is:

hoogte van plaatje = 133
breedte van plaatje = 200
graden van draai = 40

$Y1 = (sin(40) * 200) / (200/133);
$X1 = (cos(40) * 0) / (200/133);

$Y1 = 131.89994965625
$X1 = 0

die positie is gelijk aan de linker bovenhoek van het gedraaide plaatje.

Kun je me een stap in de richting van de volgende hoeken geven?

edit:woeps verkeerde knopje, hier komt zo de nuttige post

[ Voor 5% gewijzigd door Luqq op 22-02-2009 19:31 ]

[ufear]

Gevalletje Pythagoras gewoon.

De transparante driehoek linksboven heeft 1 hoek van 90 graden, 1 van 50 (die linksonder) en 1 van 40. Ook weet je dat het schuine stuk (bovenkant plaatje dus) een lengte heeft van 200.

Om dan het x coordinaat van de rechterbovenhoek te bereken doe je:

sin 50 = Overstaand / Schuin
Overstaand = Schuin * sin 50

Heb geen rekenmachine bij de hand, rest kan met deelfde stelling.

Update: oeps, hoeken omgewisseld

[ Voor 5% gewijzigd door ufear op 23-02-2009 01:47 ]

[bpt]

De eerste testen zijn niet hoopgevend, de lelijke randen blijven (doordat de lijn zelf ook weer antialias krijgt..)
Toch maar opzoek naar een andere manier..

Iedereen toch bedankt voor het meedenken, en de voorbeelden.

Heb me ondertussen ook ingeschreven voor ondersteunings wiskunde

[Janoz]

Waarom verander je de transparante kleur niet gewoon in wit (of wat voor kleur de border heeft)? Dan "anti alias"-t php gewoon naar wit waardoor dit probleem niet optreed.

[steffex]

welke functie gebruik je om de plaatjes te genereren... er zijn namelijk een aantal mogelijkheden en de ene heeft betere output dan de andere.

[bpt]

Janoz schreef op maandag 23 februari 2009 @ 16:19:
Waarom verander je de transparante kleur niet gewoon in wit (of wat voor kleur de border heeft)? Dan "anti alias"-t php gewoon naar wit waardoor dit probleem niet optreed.

Dat was mijn eerste poging ook, maar als ik de border helemaal wit maak, de transparante kleur 1 tint afwijkend van wit (anders worden de borders ook transparant), krijg ik dit resultaat:


De theorie was leuk, de praktijk wat minder

[Janoz]

De enige optie die dan overblijft is gebruik maken van een alpha kanaal ipv een enkele transparante kleur. Ik weet alleen niet of GD dat ondersteund.

[bpt]

Janoz schreef op maandag 23 februari 2009 @ 16:33:
De enige optie die dan overblijft is gebruik maken van een alpha kanaal ipv een enkele transparante kleur. Ik weet alleen niet of GD dat ondersteund.

Even wat zoekwerk op alpha channel levert het volgende resultaat op:



Ziet er al beter uit, ben alleen nog niet tevreden over alle randen
Bovenste rand is netjes, rechts, links en onder zijn niet mooi..

[ Voor 5% gewijzigd door bpt op 23-02-2009 17:07 . Reden: Extra voorbeeld ]

[steffex]

een andere optie die je hebt een polaroid frame te maken en daar de foto achter te plakken... dat zal je het beste resultaat geven. Is wel iets meer codeer werk, tenzij je de foto op de achtergrond van een div zet en het frame als image erboven op zet. (wel een png met tranparency nemen)

[Cartman!]

Ik ben weleens iets soortgelijks tegengekomen. De zijden boven en links werden prachtig anti-aliased maar om een of andere reden waren rechts en onder extreem lelijk. Dit heb ik opgelost door de foto eerst een border te geven in de gewenste kleur (bij jou eerst wit, dan blauw) en daarna pas te roteren. Dit leverde bij mij een goed resultaat op.