[JAVA] Roteren van ellipsen

[Verwijderd]

Hoi.

t.b.v. de overzichtelijkheid open ik een nieuw topic, met een vraag over het roteren van ovalen/ ellipsen...

ik heb de volgende paint code:

Java:

g2d = (Graphics2D)g;
g2d.rotate(Math.toRadians(45));
            
int scale = (int)layout.getScale();
Color base = Color.magenta;
Color alphaColor = new Color(base.getRed(), base.getGreen(), base.getBlue(), 100);
iter = placeAPs.getPoints();
while (iter.hasNext()) {
    Point p = (Point)iter.next();
    g2d.translate(0, 0);    
    g2d.setColor(base);
    Ellipse2D shape = new Ellipse2D.Double((int)p.getX(), (int)p.getY(), scale, 50);
    g2d.fill(shape);
}

Ik wil dus gewoon de ellipse die ik teken met 45 graden draaien. Op websites vind ik genoeg voorbeelden, en hij draait de ellipse ook wel, maar hij tekent hem niet meer op de positie waar ik geklikt heb.

Ik krijg namelijk Points gestuurd via een iterator, en die lees ik 1 voor 1 uit. Die point bestaan uit x en y coordinaten, en ik heb het idee dat ik daar iets mee moet doen

haal ik de Math.toRadials regel weg, dan pakt hij wel de juiste x,y point. Gebruik ik de regel, dan plaatst hij de ellipse steeds lager en meer naar rechts naarmate ikzelf steeds verder naar rechts ga.. Als ik dus linksboven inde hoek klik, plaatst hij hem daar ook, maar ga ik iets naar rechts, dan plaatst hij de ellipse een stuk naar onderen, en iets naar rechts...

Hoe kan dit?

[Alarmnummer]

Het ligt eraan op welk punt je gaat roteren. Als je op het centrum van de elipse gaat roteren, dan draait de elipse dus mooi om zijn eigen as. Als je als rotatie punt een punt kiest buiten de elipse, dan zal de elipse daarom heen draaien.

Je moet dus gaan roteren om je as.

[Verwijderd]

Alarmnummer schreef op 22 september 2003 @ 13:00:
Het ligt eraan op welk punt je gaat roteren. Als je op het centrum van de elipse gaat roteren, dan draait de elipse dus mooi om zijn eigen as. Als je als rotatie punt een punt kiest buiten de elipse, dan zal de elipse daarom heen draaien.

Je moet dus gaan roteren om je as.

Hm, dat klinkt inderdaad wel logisch.. Kun je me een hint geven over hoe ik dat ga aanpakken?

[Robtimus]

Je ellips heeft 4 velden: x, y, width en height. (x,y) is de linkerbovenhoek van de ellipse.
Je moet dus roteren over punt (x+width/2, y+height/2).

Eventjes iets grappigs, net ontdekt:
Eclipse2D is abstract, en heeft 2 genest classes, Double en Float. Deze zijn subclasses van Eclipse2D.
Wat nu gebeurt is dat deze 2 subclasses ook de 2 geneste classes inheriten. Maw, Eclipse2D.Double inherit zichzelf!
Het volgende stuk code compiled perfect:

Java:

Ellipse2D e1 = new Ellipse2D.Double();
Ellipse2D e2 = new Ellipse2D.Double.Double();
Ellipse2D e3 = new Ellipse2D.Double.Double.Double();

Humor!

[ Voor 62% gewijzigd door Robtimus op 22-09-2003 13:40 ]

[Verwijderd]

IceManX schreef op 22 September 2003 @ 13:32:
Je ellips heeft 4 velden: x, y, width en height. (x,y) is de linkerbovenhoek van de ellipse.
Je moet dus roteren over punt (x+width/2, y+height/2).

Ok, maar met welk commando geef ik dat aan? .rotate(Math.toRadians, x, y) heeft geen juiste werking, en als ik het binnen de while lus zet, gaat hij telkens 45 graden verder, wat ook niet moet...

Met .translate kom ik ook niet veel verder...

[Verwijderd]

Als je iets om een bepaald punt wil draaien, verplaats dan eerst dat punt naar de oorsprong, doe je rotatie en verplaats dan het punt weer terug. Voor theorie hierover zou je naar affine transformaties kunnen kijken.

Voorbeeld: stel mijn object staat op (4, 6) en ik wil pi draaien: eerst translate(-4, -6), dan rotate(pi) en tenslotte translate(4,6)

[Verwijderd]

Verwijderd schreef op 22 September 2003 @ 14:10:
Als je iets om een bepaald punt wil draaien, verplaats dan eerst dat punt naar de oorsprong, doe je rotatie en verplaats dan het punt weer terug. Voor theorie hierover zou je naar affine transformaties kunnen kijken.

Voorbeeld: stel mijn object staat op (4, 6) en ik wil pi draaien: eerst translate(-4, -6), dan rotate(pi) en tenslotte translate(4,6)

Ah ok. Ik zal het eens testen !

[Verwijderd]

Java:

if (placeAPs != null) {
    iter = placeAPs.getPoints();
    g2d = (Graphics2D)g;
    int scale = (int)layout.getScale();
    Color base = Color.magenta;
    Color alphaColor = new Color(base.getRed(), base.getGreen(), base.getBlue(), 100);
    while (iter.hasNext()) {
           Point p = (Point)iter.next();
           AffineTransform at = new AffineTransform();
           at.translate(-(p.getX()), -(p.getY()));
           at.rotate(Math.toRadians(45));
           at.translate(p.getX(), p.getY());
           g2d.setColor(base);
           g2d.transform(at);
           g2d.fillOval((int)p.getX()-(scale/2), (int)p.getY()-(scale/2), scale, 50);
    }
}

Dit is wat ik nu heb... De fouten waar ik tegenaan loop:

- Hij gaat elk punt met 45 graden roteren. (dus p1 = 45 graden , p2 = 45 + 45 graden, etc)
- Hij zet ze niet op de plek waar ik klik, maar in plaats daarvan zet hij ze in een rondje en dan niet in een rondje om de plek waar ik klik, maar 500 pixels naar links ofzo...

Iemand een goede oplossing?

[Alarmnummer]

Probeer eerst eens een enkel punt te roteren zoals jij dat graag wilt hebben (dus punt draaien rond een as). Als je 1 punt kunt roteren dan kan je er ook meerdere. Verder is het toverwoord denk ik relatief.

[Janoz]

Verwijderd schreef op 22 September 2003 @ 14:33:

- Hij gaat elk punt met 45 graden roteren. (dus p1 = 45 graden , p2 = 45 + 45 graden, etc)
- Hij zet ze niet op de plek waar ik klik, maar in plaats daarvan zet hij ze in een rondje en dan niet in een rondje om de plek waar ik klik, maar 500 pixels naar links ofzo...

Iemand een goede oplossing?

Je bent op dit moment niet je elipsen aan het draaien, maar je canvas. Waneer je aan het eind van je lus ook weer het canvas terug draait zul je zien dat je problemen waarschijnlijk zijn opgelost.

[Verwijderd]

Janoz schreef op 22 September 2003 @ 15:17:
[...]


Je bent op dit moment niet je elipsen aan het draaien, maar je canvas. Waneer je aan het eind van je lus ook weer het canvas terug draait zul je zien dat je problemen waarschijnlijk zijn opgelost.

ik teken niet op een canvas.. ik heb een panel met een image erop, en op die panel heb ik een mouselistener hangen die mijn klikken registreerd en ze opslaat in een vector, welke ze daarna weer naar points omzet, maargoed.

Elke keer als ik klik, gooit hij dus die points door de lus, en tekent hij de ellipsen, maar hij tekent ze niet op de plek waar ik klik, én hij begint niet telkens bij 0 -> 45 graden , maar telt er telkens 45 bij op...

[Janoz]

Als je nu eens niet op het woordje 'canvas' (aangezien je iig op een canvas achtig iets aan het tekenen bent, maar als jij het graag anders noemt vind ik het best) in gaat, maar op de rest van mijn verhaal......

[Verwijderd]

nou... ik ben vandaag al een aantal uur aan het prutsen , maar het lukt gewoon niet...
ik heb 1001 regels getikt, telkens iets anders geprobeerd maar ik kom er niet achter..

painten is gewoon een hell voor beginnende java programmeurs..

[Alarmnummer]

Verwijderd schreef op 22 September 2003 @ 16:14:
nou... ik ben vandaag al een aantal uur aan het prutsen , maar het lukt gewoon niet...
ik heb 1001 regels getikt, telkens iets anders geprobeerd maar ik kom er niet achter..

Proggen is geen kwestie van trial en error. 'Programming by Coincidence' is not done.

painten is gewoon een hell voor beginnende java programmeurs..

Probeer de wiskunde erachter te begrijpen en dit uiteindelijk te vertalen naar java code, ipv andersom.

[ Voor 5% gewijzigd door Alarmnummer op 22-09-2003 16:18 ]

[Verwijderd]

Dag 2.

Hoe laat ik de ellipse om zijn eigen as draaien op de positie waar ik geklikt heb. Iemand de oplossing?

Het bovenstaande heb ik reeds geprobeerd maar schijnt niet te werken. Het aantal graden gaat in de toekomt meegegeven worden, maar ook nu telt hij er telkens 45 graden bij. Ik moet dus van plaats de ellipsen / - \ | / - gewoon telkens de ellipsen / / / / / / hebben staan, als je begrijpt wat ik bedoel. Dus niet telkens 45 graden verder ten opzichte van de vorige, maar telkens vanaf 0 , 45 graden draaien.

En ik heb geen idee hoe ik dat moet gaan oplossen...

[Janoz]

Alvast een tip voor vandaag: Lees de reacties in je thread. De oplossing staat er al tijden, maar ik wil hem nog wel even herhalen. Ik zal niet het woord 'canvas' gebruiken aangezien dat de boel blijkbaar nogal vermoeilijkt.

Je bent niet de elipse aan het draaien, maar 'datgene waarop je tekent'. De eerste elipse gaat inderdaad goed, maar aangezien je je transformatie voor het tekenen van de tweede niet reset ga je gewoon door met je vorige transformatie als uitgangs punt. Hierdoor is je tweede elipse niet zoals je verwacht.

Probeer te begrijpen waar je mee bezig bent, probeer te snappen wat je aan het transformeren bent en hoe dit uiteindelijk tot het getoonde resultaat leidt.

[ Voor 29% gewijzigd door Janoz op 23-09-2003 09:22 ]

[Verwijderd]

met de volgende code:

Java:

Point p = (Point)iter.next();
g2d.setColor(alphaColor);
g2d.fillOval((int)p.getX(), (int)p.getY()-(scale/2), scale, 50);
g2d.setColor(base);
g2d.drawOval((int)p.getX(), (int)p.getY()-(scale/2), scale, 50);

teken ik ellipsen op de plek waar ik klik. Nu wil ik ze alleen nog gedraaid zien. En ik teken toch g2d, dan moet ik die toch draaien? maar als ik dat doe met .rotate(Math.toRadians(45)) dan draai ie hem wel maar zet ie hem niet op de goede plek... en nu geloof ik best dat ik het 'canvas' draai, maar met Math.toRadians(-45) of iets dergelijks draait ie hem echt niet terug....

Dus hoe kan ik nu die verrekte ellipse draaien zonder het canvas te draaien?

[Soultaker]

Een Google Lucky op "rotate ellipse Java" levert me al direct [url=rotate ellipse Java]een handige pagina[/url] op. Je moet dus een geschikte transformatie construeren en die loslaten op je ellipse.

Wat betreft het draaien van 'gd2': dat is natuurlijk niet de bedoeling! Wat jij doet, is een ruit op een vel papier tekenen, door een vierkant te tekenen en vervolgens het vel 45 graden te draaien. Als je het vel scheef voor je ogen houdt zie je inderdaad een ruit, maar het is niet moeilijk om te bedenken dat dit alleen werkt als je precies 1 vorm hebt die in het centrum van je vel staat; je kunt niet drie ruiten naast elkaar tekenen door drie vierkanten naast elkaar te tekenen en het vel te draaien!

[Janoz]

Die 'verrekte elipse' draai je met behulp van transformaties. Zolang je alleen hier blijft brullen dat het niet werkt in plaats van zelf wat informatie over transformaties uit te vinden schit het natuurlijk niet op.

[laatste poging]

Leg een papier voor je neus. Dit is je 'scherm'. Een verplaatsing betekend dat je het papier verplaatst en een rotatie betekend dat je het papier bij de hoek vasthoud en draait. Je houd je teken hand op dezelfde plek. Loop nu alle transformaties eens door die je toepast in je eerdere stuk code. Probeer te begrijpen waarom de transformatie eerst verlangt dat je je 'scherm' verplaatst, roteerd en terug verplaatst. Kijk ook eens wat er gebeurt als je dit vervolgens nog eens doet zonder het papier weer goed te leggen.

Ik heb verder een donkerbruin vermoeden dat de rotatie code gewoon simpel knip en plak werk is. Knip en plak werk is leuk, maar zolang je niet begrijpt wat er gebeurt krijg je inderdaad dit soort problemen. (In de code is het namelijk imho een beetje raar dat je het rotatie punt verplaatst om vervolgens op een positie een elipse neer te zetten, ik zou wat verplaatsingen weghalen. Ik denk echter dat je dit tussen haakjes gedeelte maar beter kunt negeren omdat dit het waarschijnlijk alleen maar ingewikkelder maakt)

[Verwijderd]

zo, na urenlang geprutst te hebben, ben ik er dan eindelijk achter....

hier de oplossing:

Java:

Shape ellipse = new Ellipse2D.Double(p.getX() - (scale/2), p.getY() - (scale/2), scale, 50);
AffineTransform at = AffineTransform.getRotateInstance(Math.toRadians(45), p.getX(), p.getY());
g2d.draw(at.createTransformedShape(ellipse));     

met getRotateInstance kon je aangeven om welk punt hij moet roteren..

Nu is het alleen nog zo dan hij de ellipse niet precies op het punt zet waar ik klik.. Hoe zou ik precies kunnen aangeven om het midden van de ellipse te nemen van plaats de hoek van de rectangle...

Trouwens bedankt voor de hulp!

[Soultaker]

Het is allemaal veel eenvoudiger als je eerst roteert en dan pas transleert; nu handelt getRotation dat voor je af (die transleert eerst terug naar de oorsprong, roteert, en transleert weer vooruit, met het gegeven punt als referentiepunt).

Ik zou dus beginnen met de ellipse in de oorsprong te plaatsen (door de linkerbovenhoek op het punt (-breedte/2, -hoogte/2) te zetten). Dit kun je redelijk makkelijk afzonderlijk testen. Het middelpunt van de ellipse ligt nu in de oorsprong; accoord? Vervolgens ga je de ellipse roteren; gewoon om de oorsprong. Het middelpunt wordt dan niet verplaatst. Tenslotte transleer je het hele geval naar het punt waar geklikt was; het middelpunt (de oude oorsprong) komt dan precies op dat punt te liggen.

Dit alles bereik je dus door (stap 1) een geschikte ellipse te construeren; (stap 2) een rotatietransformatie op te zetten en daar (stap 3) een translatie aan toe te voegen. Vervolgens pas je de transformaties uit stap 2 en 3 toe op de ellipse uit stap 1, en klaar.

Uiteraard helpt het wel als je een beetje je best doet om te begrijpen waar je mee bezig bent.

[Verwijderd]

Mja, ok. En ik probeer het ook te snappen, en dat lukt ook aardig, maar je zult het toch eerst moeten leren he..

Maargoed.. Het tekenen van ellipsen werkt nu. Ik ga de ellipsen echter door middel van twee punten (2x x,y) tekenen. Ik moet dus 2 maal een punt aanklikken op een panel, en daartussen een denkbeeldige driehoek maken, om zo de hoek uit te kunnen rekenen. Dit wil ik allemaal gaan doen in een class genaamd HandleEllipsen. Daarin maak ik dus een mouselistener op het component wat ik mee ga geven...

Waar het mij om gaat is het volgende:

ik klik een punt aan, en vanaf dit punt wil ik een richting van de ellipse aangeven door nog een punt aan te geven. Dit 2e punt is alleen nodig om de hoek te berekenen, maar heb ik later eventueel nog wel nodig wanneer ik wellicht het saven mogelijk maak. Dan moet ik de ellipsen namelijk weer kunnen tekenen, en heb ik beide punten weer nodig (of hier moet een mooiere oplossing voor zijn??? ). Is het op dit moment mogelijk om de 2 punten en de hoek op te slaan in 1 vector? En als ik dan nog een ellipse plaats, ik die 3 dingen ook weer in dezelfde vector op kan slaan? of is zoiets niet mogelijk met java?