redimensionner le groupe de l'élément SVG

Question

Je travaille sur une application SVG et je veux maintenant permettre à un utilisateur de redimensionner un objet en utilisant des coins déplaçables, un peu comme dans SVG-edit (http://svg-edit.googlecode.com /svn/trunk/editor/svg-editor.html). La fonctionnalité devrait fonctionner comme suit: L'utilisateur sélectionne un objet SVG, le fait glisser vers le canevas principal et une fois sur le canevas, quatre coins à l'extérieur de l'objet apparaissent, l'utilisateur peut faire glisser sur chaque coin points & faites glisser pour agrandir l'objet. Les objets seront de forme rectangulaire et créés en utilisant des chemins, n'utilisant pas la fonction SVG 'rect'. Quelqu'un aurait-il des suggestions sur la façon dont cela devrait être mis en œuvre? Merci à l'avance

Answer 1

Cela peut être réalisé en enveloppant les éléments que vous redimensionnez dans un élément g et en appliquant une transformation à cet élément. Prenons le cas simple de faire glisser le coin inférieur droit. Vous devez d'abord déterminer la boîte englobante de l'élément g. Vous pouvez ajouter vos événements mousedown, mousemove, mouseup à cet élément ou utiliser un élément d'espace réservé (comme un rectangle) qui sert de poignée à déplacer pour le redimensionnement. Une remarque importante ici est que si vous suivez la petite forme, de mauvaises choses vont sûrement arriver. Il est facile pour l'utilisateur de glisser si vite que la souris sort de la forme, annulant ainsi votre opération de glisser. Pour contourner cela, j'utilise généralement une forme transparente sur le dessus de la toile entière avec les événements ponctuels tournés. J'enregistre mes événements de suivi de souris là. De cette façon, vous pouvez suivre la souris sans vous soucier de quitter la forme.

Donc, retour au redimensionnement. Vous devrez comparer votre position actuelle à la nouvelle position. J'utiliserais probablement le rapport de la longueur de la longueur en haut à gauche à la longueur en bas à droite divisée par la longueur du haut à gauche et du nouveau bas à droite que vous faites glisser. Vous pouvez maintenant construire une transformation qui met à l'échelle l'élément g de cette quantité. Cependant, les choses deviennent un peu difficiles ici et cela peut être si vous avez des difficultés. Vous devez d'abord traduire le coin en haut à gauche de l'origine, puis redimensionner, puis traduire l'origine en arrière. Cela donnera l'effet du coin supérieur gauche restant dans son emplacement actuel tout en redimensionnant le reste du contenu de l'élément g.

HTH, Kevin