Skaletransform transformiert nicht linear

Question

Ich verwende eine Skalentransformation, um einem Benutzer die Größe eines Steuerelements zu ändern. Was jedoch passiert, ist, wenn Sie anfangen, die Maus zu bewegen, springt die Steuerung auf eine neue Größe und senkt sich dann seltsam. Je weiter Sie Ihre Maus vom Startort bewegen, desto größer wird die Größe der Größe.

Ich gehe davon aus, dass ich die Art und Weise, wie ich die angewendete Skala berechne, berechnet habe. Hier ist der Code:

private void ResizeGrip_MouseDown(object sender, MouseButtonEventArgs e)
{
    ResizeHandle.CaptureMouse();

    //Get the initial coordinate cursor location on the window
    initBtmX = e.GetPosition(this).X;

    bottomResize = true;
}

private void ResizeGrip_MouseUp(object sender, MouseButtonEventArgs e)
{
    bottomResize = false;
    ResizeHandle.ReleaseMouseCapture();
}

private void ResizeGrip_MouseMove(object sender, MouseEventArgs e)
{
    if( bottomResize == true)
    {
        //Get the new Y coordinate cursor location
        double newBtmX = e.GetPosition(this).X;


        //Get the smallest change between the initial and new cursor location
        double diffX = initBtmX - newBtmX;

        // Let our rectangle capture the mouse
        ResizeHandle.CaptureMouse();

        double newWidth = e.GetPosition(this).X - diffX;

        double scaler = newWidth / ResizeContainer.ActualWidth;

        Console.WriteLine("newWidth: {0}, scalar: {1}", newWidth, scaler);


        if (scaler < 0.75 || scaler > 3)
            return;

        ScaleTransform scale = new ScaleTransform(scaler, scaler);

        ResizeContainer.LayoutTransform = scale;
    }
}

Update: Jetzt mit XAML

<wtk:IToolDialog x:Name="VideoPlayer" ParentControl="{Binding ElementName=Stage}" DialogTitle="Video Player" Margin="90,5,0,0">
    <Grid> 
        <Grid x:Name="ResizeContainer" ClipToBounds="True" Width="320" Height="240" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,1">
            <!-- The video frame -->
            <Image Stretch="Fill" Source="{Binding CurrentFrameImage}" x:Name="VideoImage" />
            <Grid>
                <pplcontrols:VideoGroundPlane Foreground="Black" GridSize="20" GroundPlane="{Binding GroundPlane}">
                </pplcontrols:VideoGroundPlane>
            </Grid>
            <Grid x:Name="HitMask" IsHitTestVisible="False"/>
        </Grid>
        <ResizeGrip Cursor="SizeNWSE" x:Name="ResizeHandle" VerticalAlignment="Bottom" HorizontalAlignment="Right" Mouse.MouseDown="ResizeGrip_MouseDown" Mouse.MouseUp="ResizeGrip_MouseUp" Mouse.MouseMove="ResizeGrip_MouseMove"></ResizeGrip>
    </Grid>
</wtk:IToolDialog>

Answer 1

Ein Grund, warum Sie resizeContainer.rendertransfrom anstelle von resizeContainer.layouttransform nicht verwenden? Dh benutzt

ResizeContainer.LayoutTransform = scale;

Wenn Sie möchten, dass die Skala linear ist, denke ich, dass Sie verwenden sollten

double scaler = 1 - diff / ResizeContainer.ActualWidth;

---

BEARBEITEN:

Der Code enthält einen Fehler, der dazu führt, dass die skalierte Steuerung in Größe "springt", wenn Sie versuchen, die Größe mehr als einmal zu ändern. Ich schlage vor, Sie tun Folgendes:

Fügen Sie Ihrem Resizecontainer -Netz eine RenderTransform hinzu:

<Grid.RenderTransform>
    <ScaleTransform x:Name="transform" ScaleX="1" ScaleY="1" />
</Grid.RenderTransform>

Ändern Sie den Code in Ihrem Mousemove -Ereignishandler in Folgendes:

if (bottomResize)
{
    double newBtmX = e.GetPosition(this).X;
    double scaler = -(initBtmX - newBtmX) / grid1.ActualWidth;
    initBtmX = newBtmX;

    transform.ScaleX += scaler;
    transform.ScaleY += scaler;
}

Auf diese Weise ändern Sie die Skala um die kleine Menge, die die Maus beim Ziehen bewegt hat. Alle Kinderkontrollen innerhalb des Netzes sollten ebenfalls skaliert werden.