Skalieren + Rotieren + Skalieren = Verzerren

[JaBo]

Hi ich hoffe hier kann mir jemand helfen.

Ich habe eine art "bounding box" gebastelt, so wie in den meisten Grafikprogrammen, ein Quadrat mit kleinen Kästchen an den Ecken zur Grössenveränderung von Objecten gedacht.

Es ist ein Movieclip, nennen wir Ihn "Resizer", der über einen anderen Movieclip, das "object" ich nennen es mal "Quadrat", gelegt diesen von der Grösse her über verschieben von "Anpackern" verändern kann, was auch problemlos klapt.

Beide Movieclips liegen zusammen in einem weiteren Movieclip, Container, und wie gesagt klappt das bis hierher sehr gut, ich wollte jedoch auch Rotation mit einbauen, was eigentlich auch klappte bis ich nach dem rotieren des Quadrates nochmals die Grösse ändern wollte, was dann gesah war, das das Quadrat sich total verformte, nach mehrfachem rumtesten hatte ich das Problem gelöst jedoch wieder ein Neues und bin nach 5 Stunden nun genau wieder da wo ich schon vorher war.

Zur Info noch: beim resizen ansich, ändere ich die Breite und Höhe des Quadrat Movieclips selber und passe die _x und _y position über den Container ansich an, ich habe dieses mit _xscale und auch mit _width versucht die ergenisse waren zwar beide unterschiedlich aber trotzdem unbrauchbar, das rotieren bewerkstellige ich indem ich mir _xmouse und _ymouse differenzen addiere und diese dann zuerst beim onPress auf den Container anwende und beim onRelease dann den Container in 0 rotation bringe und den Resizer in die eingestellte Rotation drehe, aber auch das hatte ich schon anders versucht als ich _x-_y-scale verwendete habe ich den Resizer Movieclip mitdrehen lassen.

Habe ich ein Problem gefixt bekomme ich durch eine der beiden Funktionen, Resizen oder Rotieren, beziehungsweise durch die Funktion die die kleinen schwarze-kästchenmovieclips, die "Anpacker", resized um diese auf gleicher Grösse zu halten wie vorher und nicht mit zu skalieren da der Resizer Movieclip ja auch bei beiden Aktionen skalieret werden muss, ein neues Problem.

Jetzt erstmal die erste blöde Frage, ist der generelle Aufbau so überhaupt richtig?

Danke schonmal für eure Antworten,
Jani

[hgseib]

a) zuviel text
b) kein wort verstanden ;-)

kannst du deine fla hochladen?

[Xeef]

a) zuviel text fur mich auch viel zu faul !

b) kein wort verstanden ;-) --> ich geh mall davon aus das es das hier sein wird (ohne mich durch den ganzen text gewelzt zu haben )

_root.createEmptyMovieClip("X", 1);
X._rotation = 90;
Q = X.createEmptyMovieClip("q", 1);
QQ = Q.attachMovie("Box", "B", 1);
QQ._rotation = -90;
onEnterFrame = function () {
    if (!A) {
        A = 0;
    }
    if (A == 0) {
        Q._xscale += 5;
        QQ._rotation += 2;
        X._rotation -= 2;
    }
    if (A == 1) {
        Q._xscale -= 5;
        QQ._rotation += 2;
        X._rotation -= 2;
    }
    if (Q._xscale>200) {
        A = 1;
    }
    if (Q._xscale<50) {
        A = 0;
    }
}; 

[JaBo]

Nein nicht ganz , bei mir sind es ein paar mehr zeilen da ich 9 verschiedene "Anpacker" habe und das dort eingebaute Rotationsbeispiel ist etwas verwirrend aber vom prinzipiellen aufbau her Ja
-
------- Container ------
------|------------------|
--Box(Resizer)-------Quadrat-
------|-----------------------------
8 Anpacker für Resize, 1 für Rotation
-

Rotieren geht
Skalieren geht
Skalieren + Rotieren geht

was nicht geht ohne das sich das Quarat verzerrt ist:

Skalieren
Rotieren
Skalieren

Fla hochladen dürfte etwas schwer sein das ganze steckt in einem "etwas Grösseren Film".

[hgseib]

im prinziep schon klar. was du machst sind matrix-operationen und wie der mathematiker sagt: Matrizenmultiplikation ist nicht kommutativ
sagt eigentlich alles ;-)

wenn du ein um 45 grad gedrehtes quadrat in der breite scalierst, dann wird das automatisch eine raute und ist so auch vollkommen richtig.
du müsstest folgende schritte ausführen um das 'verzerren' zu verhindern:
- zurückdrehen auf null
- skalieren
- zurückdrehen

var old_rotaion=this._rotation;
this._rotation=0;
this._xscale=xscale;
this._rotation=old_rotaion;


bzw. x und y gleichmässig scalieren

[JaBo]

Und wie errechne ich die korekte _x _y verschiebung bei unterschiedlichen winkeln?

ich habs über sinus und cosinus versucht leider ohne erfolg wie hier zu sehen:

oldXmouse = _root._xmouse;
	oldX = this._parent._parent._x
	oldY = this._parent._parent._y
	oldXheight = this._parent._parent._height;
	oldXwidth = this._parent._parent.xobject._width;
	var leckes = 0//dient zur performance regulierung weils sonst hakelt
	this.onEnterFrame = function() {
		leckes++
		if (leckes%2 != 0){
			//mach mal pause
			} else {
		
		var newXmouse =  _root._xmouse;//wenn ich die _xmouse des Objectes oder das des Containers nehme wackelt es sich einen zusammen was vermutlich an der Resizerfunktion liegt
		var mouseXdiff = newXmouse-oldXmouse;

		this._parent._parent.xobject._xscale = Math.round(oldXwidth+mouseXdiff);//skalieren des objectes

		this._parent.doMyResize();//resizen der anpacker und der bounding box

		this._parent._parent._x = oldX + ((mouseXdiff/2)/this._parent.getCos(this._parent._parent._rotation));//_x anpassen

		this._parent._parent._y = oldY + (oldXheight-this._parent._parent._height/2)/this._parent.getSin(90-this._parent._parent._rotation);//_y anpassen

}

getCos = function(winkel) {
var bogenMass = winkel * (Math.PI/180);
return Math.cos(bogenMass);
}
	
getSin = function(winkel) {
var bogenMass = winkel * (Math.PI/180);
return Math.sin(bogenMass);
}

die resizer Funktion dort macht eigentlich nichts anderes als die "Bounding Box" in gleiche Grösse wie das Object zu skalieren und die "Anpacker" in der BoundingBox wieder zurück auf Originalgrösse.

[hgseib]

"..Und wie errechne ich die korekte _x _y verschiebung bei unterschiedlichen winkeln?.."
was ist deiner meinung nach als 'korrekt' anzusehen?
wer soll denn aus einem fragment die funktionsweisse ersehen, die dir im kopf rumschwirrt? ;-) lade besser deine fla hoch, damit man sich etwas ansehen kann.

und ich behaupte einmal dein doMyResize im onEnterFrame verursacht probleme

das beispiel dreht zwar nicht, aber eine korrektur mache ich bewusst erst nach dem drag'en
http://www.seibsprogrammladen.de/fra...ispiele/flash6
-> auswahl ...
und Auswahlrechteck mit 8 Knubbel

[JaBo]

schön sieht fast aus wie meine funktion die ich übrigens gerad mal just for fun rausgenommen hab x und y werden seperat angepasst und nein sie ist nicht schuld.

Ich habs nun für einen "knubbel" in meinem quelltext fast geschafft nur bei ca die 100% bewegt sich der Container um ein paar pixel, allerdings wird daran wirklich die resizer funktion schuld sein, bw der eigentlich aufbau das sich object und bounding box in ein und dem selben container befinden, denn meine Bounding Box ist um 8 pixel grösser , darum auch ein sprung bei einer _xscale von 108 und dann gibts wie gesagt noch leichte verschiebungen wen es kleiner als 100% sind.

Ich denke ich werde das genze ding neu Bauen.
Den Dreh - Mittel - Rotations - punkt eines Movieclips kann man nicht zufälligerweise mit Actionscript verändern oder?

[hgseib]

"..Den Dreh - Mittel - Rotations - punkt eines Movieclips.."
diese koordinate ist 0/0 und wird es immer bleiben ;-)
packe ein mc in ein mc. das innere mc kannst du verschieben.

[Xeef]

http://www.kirupa.com/forum/showthread.php?t=70919

[JaBo]

Danke nochmals,

falls es jemand interessiert:

Urspruengliches_x + ((_xmouse_differenz_zum_vorherhigen_durchlauf/2)*Urspruengliches_x + (_xmouse_differenz_zum_vorherhigen_durchlauf/2)*getCos(object._rotation));

x anpassung erster quadrant positive xskalierung

if(myObject._xscale<100){
	var ausgleich = (90) - myObject._xscale
		} else {
	var ausgleich = 0;
		}
	var faktor=1-(this._parent.getSin(90-myObject_rotation))
		this._parent._parent._y =  (Ursprüngliches_y + (Ursprüngliche_height-Aktuelle_height)/2)+(ausgleich*faktor);//wobei bei dem faktor bin ich mir noch nicht ganz sicher das die berechnung so richtig ist
			
}

die entsprechende y anpassung

die funktionen für cos und sin stehen ja oben, die umrechnung rotation und bogenmass übernehmen die funktionen schon..

Grüsse Jani

[hgseib]

sieht irgendwie gefährlich aus ;-) und habs immer noch nicht kappiert, was du da machst.

"..anpassung erster quadrant.."
du kennst den unterschied von Math.atan und Math.atan2 ? mit letzterem musst du nicht versuchen, irgendwie vorzeichen korregieren zu wollen.


da finde ich den link von Xeef wesentlich rafinierter. die verwalten einen punkt, lassen berechnen, wo der nach der transformation steht und verschieben dann das mc auf diesen punkt.

[JaBo]

Zitat von hgseib

sieht irgendwie gefährlich aus ;-) und habs immer noch nicht kappiert, was du da machst.

ist eigentlich nichts anderes als pytagoras(richtig geschrieben?) errechnen von gegen und ankathede bei gegebener hypothenuse und winkel.

grob gesagt ich lege bei einem on(press) zuerst variablen fest, wie zum beispiel ursprüngliche höhe oder breite bzw den _xscale in diesem Falle da ich das object auf der x-achse skalieren will(rechte seite in der halben höhe der knubbel) so das geplant ist die linke seite des objectes "stehen zu lassen".

gehen wir nun zu dem Punkt wo ich skaliere ein on(Press) schreibt zuerst die entsprechenden variabeln wobei dann nachher immer diese variablen gemeint sind wenn von "ursprünglich" geschrieben wird.

dann wird natürlich in einem onEnterFrame verglichen ursprüngliche oder vorherige (werte des letzten onEnterFrame durchlaufes) mit aktuellen werten.

da ich nun das Object drehe verschieben sich bzw. rotieren dadurch x und y achsen, normalerweise bräuchte ich eine y verschiebung nicht auszugleichen durch das rotieren ist dies jedoch sehr wohl nötig, also nehm ich mir den alten pita-gyros (danke nochmal an meinen damaligen physik und mathe Lehrer Gers!) und berechne mir über cosinus und sinus aus dem errechneten wert der "eigentlich" die differenz auf der x-achse darstellt einmal die notwendige x-verschiebung,

PHP-Code:

Neues_x = Urspruengliches_x + ((_xmouse_differenz_zum_vorherhigen_durchlauf/2)*Urspruengliches_x + (_xmouse_differenz_zum_vorherhigen_durchlauf/2)*getCos(object._rotation)); 


danach errechne ich mir aus der grössenänderung(höhe des container clips) die notwendige y achsen verschiebung welche ich bei werten unter 100% mittels des faktor sinus models da "ausgleiche"

PHP-Code:

if(myObject._xscale<100){// wenn ein ausgleich stattfnden muss da object kleiner 100%
var ausgleich = (90) - myObject._xscale//
} else {
var ausgleich = 0;
}
var faktor=1-(this._parent.getSin(90-myObject_rotation))
this._parent._parent._y =  (Ursprüngliches_y + (Ursprüngliche_height-Aktuelle_height)/2)+(ausgleich*faktor);//wobei bei dem faktor bin ich mir noch nicht ganz sicher das die berechnung so richtig ist

} 


aber das ist buggy, ich hasse es wenn sich beim sliden oder sonstigen drag geschichten rundungsfehler einnisten.

Zitat von hgseib

"..anpassung erster quadrant.."
du kennst den unterschied von Math.atan und Math.atan2 ? mit letzterem musst du nicht versuchen, irgendwie vorzeichen korregieren zu wollen.

werd ich mir ansehen , wie gesagt ich baue es eh neu, wird eine komponente, da sollte alles stimmen.

Zitat von hgseib

da finde ich den link von Xeef wesentlich rafinierter. die verwalten einen punkt, lassen berechnen, wo der nach der transformation steht und verschieben dann das mc auf diesen punkt.

auch den werde ich mir noch anschauen

[JaBo]

Entschuldigung, noch eine blöde Frage, gibt es dabei viel was man mit AS3 besser machen könnte?

[Xeef]

hab jetzt nicht deine dateien angekukt

aber ich geh mal davon aus das es sowas wie ein grapick editor werden soll

und da wurde ich nicht irgendwelche MC rum scalen / drehen

sondern "bitmapdata"

das wurde in AS3 verfeinert

von daher

Entschuldigung, noch eine blöde Frage, gibt es dabei viel was man mit AS3 besser machen könnte?

JA


P.S

mein lehrer pflegte zu sagen blode fragen gibts net nur blode antworten