jQuery UI - Rotation, glisser, redimensionner DIV comme dans l'éditeur d'image

Question

J'ai besoin de "user-friendly" rotation, glisser et redimensionnable DIV. Mais, quand ce DIV est tourné, la fonction RESIZE fonctionne très bizarre. Pas comme dans l'éditeur d'image. L'utilisateur ne peut pas gérer le redimensionnement correctement. Comment le faire ?

jsFiddle Example

HTML:

<div id="blue"></div> 

CSS:

#blue { 
    top: 100px; 
    left: 100px; 
    width:200px; 
    height:200px; 
    background-color:blue; 
    -ms-transform: rotate(120deg); /* IE 9 */ 
    -webkit-transform: rotate(120deg); /* Safari */ 
    transform: rotate(120deg); 
} 

jQuery

$("#blue").resizable({ 
    aspectRatio: false, 
    handles: 'ne, se, sw, nw' 
}); 

$("#blue").draggable(); 

Answer 1

travaillé sur une question similaire: How to get four corners rotate handle for a rotatable div..?

OP voulait ajouter des poignées de rotation à chaque coin. Mais c'est aussi un bon exemple de ce que vous rapportez.

Jetez un oeil à: https://jsfiddle.net/Twisty/7zc36sug/

HTML

<div class="box-wrapper"> 
    <div class="box"> 
    </div> 
</div> 

la boîte d'emballage aide pour Draggable.

jQuery

$(function() { 
    // Assign Draggable 
    $('.box-wrapper').draggable({ 
    cancel: ".ui-rotatable-handle" 
    }); 
    // Assign Rotatable 
    $('.box').resizable().rotatable(); 
}); 

Redimensionnement quand à un angle de rotation change l'emplacement de la boîte, il est la largeur et la hauteur, et le fait de se déplacer dans une sorte de façon bizarre. C'est pourquoi cela ne fonctionne pas comme dans certains programmes graphiques.

Puisque vous n'avez pas indiqué ce que vous préférez être le comportement, je ne peux pas répondre correctement à votre question: L'utilisateur ne peut pas gérer le redimensionnement correctement. Comment le faire?

J'espère que cela aide à expliquer le problème.