jQuery-UI Resizable: skaliert alle Elemente von awesizeResize proportional zu resizable div

8

Ich habe ein resizierbares div, das über einer Auswahl von Elementen positioniert ist, die auch auf "resize" gesetzt wurden.

Visuell ist das in der Größe veränderbare Element eine Bounding Box für die awareResize-Elemente.

Ich möchte in der Lage sein, die aliasResize-Elemente im Verhältnis zum resizierbaren div zu skalieren. Das Standardverhalten der Benutzeroberfläche bewirkt, dass jedes Element bei der Größenänderung eine feste linke und obere Position hat:

Ссылка

Aber ich möchte die linke und obere Seite jedes AR-Elements anpassen, um mit der Begrenzungsbox skaliert zu werden, wenn die Größe geändert wird.

Ich dachte zuerst, dass das nicht zu viel Aufwand wäre, indem ich das Plugin "awesomeResize" ändere. Das habe ich der resize hinzugefügt: _alsoResize:

%Vor%

Wie Sie sehen werden, liegen die Boxen etwas zurück:

Ссылка

Etwas scheint die Figuren zu bevölkern und kann es nicht ganz verstehen, irgendwelche Vorschläge geschätzt. Möglicherweise Diskrepanzen der Dezimalstellen zwischen Skripten & amp; Browser?

    
digout 07.11.2011, 22:04
quelle

3 Antworten

5

Vielleicht müssen Sie die Struktur überdenken.

Sie könnten die .lyr -Elemente in das .resizer -Element einfügen und sie darin mit prozentualen Positionen positionieren. Auf diese Weise werden sie automatisch skaliert, während ihr Container die Größe ändert. ( das Plugin muss nicht mit ihnen umgehen )

Demo bei Ссылка

Nach dem Kommentar aktualisieren

Um die resizer von den alsoResize Elementen zu trennen, müssen Sie einige Dinge für die Berechnungen berücksichtigen.

  • Zuerst müssen Sie die Startdimensionen / -positionen und nicht die aktuellen Elemente verwenden, also verwenden Sie start.width .height etc ..
  • für die Positionierung, die Sie benötigen, um das Element in den Ursprung zu übersetzen ( in Bezug auf die Entfernung von resizer ) skalieren Sie den linken / oberen Bereich und übersetzen Sie dann wieder dorthin zurück, wo sie waren.

die endgültigen Berechnungen werden

%Vor%

Wenn Sie die Elemente skalieren, indem Sie die obere oder linke Seite des Resizers ziehen, müssen Sie noch etwas mehr basteln.

Demo bei Ссылка

Letztes Update

Um die Skalierung in alle Richtungen zu handhaben, verwenden Sie diese Helfer.

%Vor%

Arbeitsbeispiel mit allen Updates in Ссылка

    
Gaby aka G. Petrioli 10.11.2011, 10:59
quelle
0

Wollten Sie + anstelle von * verwenden?

%Vor%     
Samuel Liew 10.11.2011 11:02
quelle
0

Ich hatte ein wenig Glück, indem ich den Rand oben und den Rand links für die Positionierung setzte und die Attribute 'oben' und 'links' als Standard für die Animation belassen.

Ссылка

    
orolo 10.11.2011 12:26
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Kommunikation zwischen Node.Js und der ASP.NET MVC-Anwendung