WPF: Redimensionnement d'un cercle, en conservant le point central au lieu de TopLeft?

Question

Je voudrais redimensionner un cercle sur ma toile à l'aide d'un curseur. Ce cercle peut être déplacé sur le canevas par un glisser & drop stuff que j'ai fait dans le code, donc sa position n'est pas corrigée.

J'ai lié la valeur du curseur à la hauteur et la largeur d'une ellipse. Malheureusement, lorsque j'utilise le curseur, le cercle est redimensionné avec son point en haut à gauche (en fait le point en haut à gauche du rectangle dans lequel il est assis) restant le même pendant l'opération.

Je voudrais le redimensionner avec son centre point étant constant pendant le fonctionnement. Existe-t-il un moyen facile de le faire en XAML? BTW, j'ai déjà essayé ScaleTransform, mais il n'a pas fait ce que je voulais.

Merci beaucoup! :-)

Jan

<Canvas x:Name="MyCanvas"> 

    <!-- this is needed for some adorner stuff I do in code behind --> 
    <AdornerDecorator Canvas.Left="10" 
         Canvas.Top="10"> 
     <Ellipse x:Name="myEllipse" 
      Height="{Binding Path=Value, ElementName=mySlider}" 
      Width="{Binding Path=Value, ElementName=mySlider}" 
      Stroke="Aquamarine" 
      Fill="AliceBlue" 
      RenderTransformOrigin="0.5 0.5"> 
      <Ellipse.RenderTransform> 
       <RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}" /> 
      </Ellipse.RenderTransform> 
     </Ellipse> 
    </AdornerDecorator> 

    <Slider x:Name="mySlider" 
      Maximum="100" 
      Minimum="0" 
      Width="100" 
      Value="10" 
      Canvas.Left="150" 
      Canvas.Top="10" /> 
    <Slider x:Name="myRotationSlider" 
      Maximum="360" 
      Minimum="0" 
      Width="100" 
      Value="0" 
      Canvas.Left="150" 
      Canvas.Top="50" /> 
</Canvas> 

Answer 1

Vous pouvez lier votre Canvas.Left et Canvas.Top à votre hauteur et la largeur par un ValueConverter.

Spécifiquement (modifier):
Créez une propriété pour Canvas.Left et Canvas.Top, puis liez-les.
Stocke les anciennes valeurs pour Width et Heigth ou l'ancienne valeur du curseur.
Chaque fois que le curseur est modifié, obtenez le changement incrémental "dx" en soustrayant la valeur stockée.
(N'oubliez pas de mettre à jour la valeur stockée ...)
Ajoutez dx à la propriété Width et Height.
Et, comme Will l'a dit, ajouter dx/2 * -1 aux propriétés Canvas.Left et Canvas.Top.

Est-ce que cela a du sens?

Answer 2

Le problème est que vous utilisez le SLIDER pour ajuster la largeur et la hauteur. La largeur et la hauteur ne sont pas calculées autour de RenderTransformOrigin; seulement RenderTransforms utilise cette valeur.

est ici une version corrigée (BRB, kaxaml):

<Canvas x:Name="MyCanvas"> 
<!-- this is needed for some adorner stuff I do in code behind --> 
    <AdornerDecorator Canvas.Left="50" Canvas.Top="50"> 
     <Ellipse 
      x:Name="myEllipse" 
      Width="10" 
      Height="10" 
      Fill="AliceBlue" 
      RenderTransformOrigin="0.5 0.5" 
      Stroke="Aquamarine"> 
      <Ellipse.RenderTransform> 
       <TransformGroup> 
        <RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}"/> 
        <ScaleTransform 
         CenterX=".5" 
         CenterY=".5" 
         ScaleX="{Binding Path=Value, ElementName=mySlider}" 
         ScaleY="{Binding Path=Value, ElementName=mySlider}"/> 
       </TransformGroup> 
      </Ellipse.RenderTransform> 
     </Ellipse> 
    </AdornerDecorator> 
    <Slider 
     x:Name="mySlider" 
     Width="100" 
     Canvas.Left="150" 
     Canvas.Top="10" 
     Maximum="10" 
     Minimum="0" 
     SmallChange=".01" 
     Value="1"/> 
    <Slider 
     x:Name="myRotationSlider" 
     Width="100" 
     Canvas.Left="150" 
     Canvas.Top="50" 
     Maximum="360" 
     Minimum="0" 
     Value="0"/> 
</Canvas> 

Bien sûr, cela ne fonctionnera probablement pas pour vous. Pourquoi? Eh bien, le ScaleTransform que j'ai utilisé zoom non seulement le cercle mais aussi la bordure; à mesure que le cercle grossit, la frontière le fait aussi. J'espère que vous ne vous en soucierez pas.

En outre, réaliser en combinant des transformations (échelle puis tourner dans ce cas) qu'ils sont appliqués dans l'ordre, et on peut affecter comment un autre est fait. Dans votre cas, vous ne le remarquerez pas. Mais si, disons, vous faisiez une rotation et traduisiez, l'ordre serait pertinent.

---

Ah, à quoi je pensais? Il suffit de coller l'ellipse dans une grille (solution la plus simple, mais d'autres conteneurs fonctionneraient). La grille prend automatiquement soin de centrer l'ellipse lorsqu'elle est redimensionnée. Pas besoin de convertisseurs de valeur! Voici le code:

<Canvas x:Name="MyCanvas"> 
<!-- this is needed for some adorner stuff I do in code behind --> 
    <Grid Width="100" Height="100"> 
     <AdornerDecorator> 
      <Ellipse 
       x:Name="myEllipse" 
       Width="{Binding Path=Value, ElementName=mySlider}" 
       Height="{Binding Path=Value, ElementName=mySlider}" 
       Fill="AliceBlue" 
       RenderTransformOrigin="0.5 0.5" 
       Stroke="Aquamarine"> 
       <Ellipse.RenderTransform> 
        <RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}"/> 
       </Ellipse.RenderTransform> 
      </Ellipse> 
     </AdornerDecorator> 
    </Grid> 
    <Slider 
     x:Name="mySlider" 
     Width="100" 
     Canvas.Left="150" 
     Canvas.Top="10" 
     Maximum="100" 
     Minimum="0" 
     Value="10"/> 
    <Slider 
     x:Name="myRotationSlider" 
     Width="100" 
     Canvas.Left="150" 
     Canvas.Top="50" 
     Maximum="360" 
     Minimum="0" 
     Value="0"/> 
</Canvas> 

Answer 3

Étant donné que vous utilisez un canevas, l'emplacement d'un élément est l'emplacement. Si vous voulez que le haut, la position gauche change, vous devez le faire vous-même.Si vous utilisiez un autre type de panneau, comme une grille, vous pouvez modifier l'alignement de votre ellipse pour la placer dans le même emplacement relatif, quelle que soit sa taille. Vous pouvez obtenir cet effet en ajoutant une grille à l'intérieur de votre AdornerDecorator et en centrant l'Ellipse, mais vous devrez également définir l'AdornerDecorator ou la Grid à une taille fixe car ils ne s'étireront pas dans un Canvas.

La meilleure solution que vous pourriez utiliser serait une ScaleTransform appliquée à la propriété RenderTransform avec un RenderTransformOrigin de 0.5,0.5. Vous avez dit que vous aviez des problèmes avec ScaleTransform mais pas quel était le problème. Enveloppez votre ellipse dans une grille de la taille maximale.

Answer 4

Tant qu'il est plus petit, l'Ellipse sera centrée sur la grille:

<Grid 
     Canvas.Left="10" 
     Canvas.Top="10" 
     Width="100" 
     Height="100"> 
     <AdornerDecorator> 
      <Ellipse x:Name="myEllipse" 
      Height="{Binding Path=Value, ElementName=mySlider}" 
      Width="{Binding Path=Value, ElementName=mySlider}" 
      Stroke="Aquamarine" 
      Fill="AliceBlue" 
      RenderTransformOrigin="0.5 0.5"> 
       <Ellipse.RenderTransform> 
        <RotateTransform Angle="{Binding Path=Value, ElementName=myRotationSlider}" /> 
       </Ellipse.RenderTransform> 
      </Ellipse> 
     </AdornerDecorator> 
    </Grid> 

Vous devrez peut-être ajuster votre logique glisser pour gérer en faisant glisser la grille au lieu de l'Ellipse lui-même.

Answer 5

J'ai trouvé un moyen très simple de le faire en XAML simple: définir Margin="-1000000". Lire la suite ici: Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF