Drehen Sie den Anker, der nach der Größenänderung nicht auf dem Bild fixiert ist

Question

Ich habe fünf Ankern und der mittlere ist zum Drehen.Es funktioniert gut mit der ursprünglichen Größe.Nach der Größenänderung, wenn ich darauf klicke, fliegt der Anker vom Bild weg.Ich habe die Position auf neue eingestellt. http://jsfiddle.net/w9x8n/1/

generasacodicetagpre.

Answer 1

kineticjs passt die linke und obere Position eines Objekts automatisch an, der auf dem Offset basiert.

Dies ist frustrierend, da der gleiche Versatz verwendet werden muss, um den Rotationspunkt einzustellen.

Infolgedessen ist es schwierig, das [x, y, offsetx, aftesigny] Ihres Bildes mit den [x, y] der Anker zu koordinieren - insbesondere wenn das Bild sowohl der Größe als auch gedreht wurde.

Wenn entweder Ihr Image oder Ihre Anker unerwartet "springen", erleben Sie die Nebenwirkungen der Verwendung von KineticJs-Offsets.

Hier ist eine Möglichkeit, mit dieser Schwierigkeit umzugehen:

• erklären den Rotationspunkt als den Mittelpunkt des Bildes.

• Verwenden Sie diesen Mittelpunkt-Rotationspunkt, um sowohl das Bild als auch die Anks zu positionieren.

• Wenn ein Anker aktiviert ist, verwenden Sie diesen Mittelpunkt, um das X, Y & Offsets des Bildes zurückzusetzen.

• Wenn ein Anker aktiviert ist, positionieren Sie alle Anks relativ zu diesem Mittelpunkt.

Wenn Sie alle Transformationen relativ zum Rotationspunkt herstellen, beseitigen Sie die Notwendigkeit, das X, y des Bildes mit jedem Anker X, Y zu koordinieren.

"

Hier ist ein kommentierter Code und eine Demo: http://jsfiddle.net/m1erickson/twaj3/

generasacodicetagpre.