WPF: Zmieniając rozmiar koła, zachowując punkt środkowy zamiast TopLeft?

Question

Chciałbym zmienić rozmiar koła na moim płótnie za pomocą suwaka. Ten okrąg może być przenoszony na płótnie przez jakiś przeciągnięty kod, który usunąłem z kodu, więc jego pozycja nie jest ustalona.

Związałem wartość suwaka z wysokością i szerokością elipsy. Niestety, kiedy używam suwaka, kółko zmienia rozmiar z lewym górnym punktem (właściwie lewy górny punkt prostokąta, w którym siedzi) pozostając tym samym podczas operacji.

Chciałbym zmienić rozmiar jego punktu centrum punkt jest stały podczas operacji. Czy jest to prosty sposób na XAML? BTW, już wypróbowałem ScaleTransform, ale nie całkiem zrobiłem to, co chciałem.

Wielkie dzięki! :-)

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

Można związać swoją Canvas.Left i Canvas.Top do wysokości i szerokości poprzez ValueConverter.

W szczególności (edycja):
Utwórz właściwość dla każdego elementu Canvas.Left i Canvas.Top i połącz je.
Zapisz stare wartości Szerokość i Wysokość lub starą wartość suwaka.
Gdy suwak zostanie zmieniony, uzyskaj przyrostową zmianę "dx", odejmując zapisaną wartość.
(Nie zapomnij zaktualizować zapisanej wartości ...)
Dodaj dx do właściwości Szerokość i Wysokość.
I, jak powiedział Will, dodaj dx/2 * -1 do właściwości Canvas.Left i Canvas.Top.

Czy to ma sens?

Answer 2

Problem polega na tym, że używasz SLIDERA do regulacji szerokości i wysokości. Szerokość i wysokość nie są obliczane wokół RenderTransformOrigin; tylko RenderTransforms używa tej wartości.

Oto wersja poprawiona (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> 

Oczywiście, to prawdopodobnie nie będzie pracować dla Ciebie. Czemu? Cóż, użyty ScaleTransform, którego użyłem, powiększa nie tylko okrąg, ale także obramowanie; w miarę jak krąg powiększa się, granica również się poprawia. Mam nadzieję, że nie będziesz się tym przejmował.

Wykonuj również kombinację transformacji (skalowanie, a następnie obracanie w tym przypadku), aby były one stosowane w kolejności i można wpływać na sposób wykonania innej. W twoim przypadku tego nie zauważysz. Ale jeśli, powiedzmy, robisz rotację i tłumaczysz, kolejność będzie trafna.

---

Ah, o czym myślałem? Po prostu przyklej elipsę do siatki (najprostsze rozwiązanie, ale działają inne pojemniki). Siatka automatycznie dba o centrowanie elipsy podczas zmiany jej rozmiaru. Nie potrzeba żadnych konwerterów wartości! Oto kod:

<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

Ponieważ używasz płótna, lokalizacja, w której znajduje się element, jest lokalizacją. Jeśli chcesz zmienić górną, lewą pozycję, musisz to zrobić samodzielnie.Jeśli używasz innego typu Panelu, np. Siatki, możesz zmienić wyrównanie swojej Elipsy, aby umieścić ją w tej samej względnej lokalizacji, bez względu na rozmiar. Możesz uzyskać ten efekt, dodając siatkę w swoim AdornerDecorator i centrując elipsę, ale musisz także ustawić AdornerDecorator lub Grid na stały rozmiar, ponieważ nie rozciągną się w płótnie.

Najlepszym rozwiązaniem, z którego można skorzystać, jest ScaleTransform zastosowany do właściwości RenderTransform za pomocą RenderTransformOrigin w wersji 0.5,9.5. Mówiłeś, że masz problemy z ScaleTransform, ale nie masz problemu.

Answer 4

Owiń swoją elipsę w siatkę o maksymalnym rozmiarze. Tak długo, jak to jest mniejsze, Elipsa będzie w środku siatki:

<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> 

może być konieczne dostosowanie logiki przeciągając uchwyt przeciągania siatki zamiast samego elipsy.

Answer 5

Znalazłem bardzo prosty sposób to zrobić w zwykłym XAML: set Margin="-1000000". Przeczytaj więcej tutaj: Positioning an element inside the Canvas by its center (instead of the top left corner) using only XAML in WPF