Crop image with dynamic rectangle coordinate

问题:

I have a Image and I want crop it by using a rectangle, code below is the code I put a image and draw a rectangle at middle of the image:

MainPage.Xaml:

<Canvas x:Name="canvas" HorizontalAlignment="Center" VerticalAlignment="Center" Width="340" Height="480" Background="Blue">
        <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image>
        <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <RectangleGeometry Rect="0,0,340,480"/>
            </Path.Data>
        </Path>
    </Canvas>

I able to move the image. Code below is to transform the image, and the crop function is working. How do I bind the data and set the rectangle coordinate to dynamic instead of hard code coordinate? Thanks.

public sealed partial class MainPage: Page
{
        private CompositeTransform compositeTranslation;

        public MainPage()
        {
            this.InitializeComponent();
            photo.ManipulationDelta += Composite_ManipulationDelta;
            compositeTranslation = new CompositeTransform();
            photo.RenderTransform = this.compositeTranslation;
        }

        void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            // scale the image.
            compositeTranslation.CenterX = photo.ActualWidth / 2;
            compositeTranslation.CenterY = photo.ActualHeight / 2;
            compositeTranslation.ScaleX *= e.Delta.Scale;
            compositeTranslation.ScaleY *= e.Delta.Scale;
            compositeTranslation.TranslateX += e.Delta.Translation.X;
            compositeTranslation.TranslateY += e.Delta.Translation.Y;
        }

        private void btnCrop_Click(object sender, RoutedEventArgs e)
        {
            var _rect = new RectangleGeometry();
            _rect.Rect = path.Data.Bounds;
            photo.Clip = _rect;
        }
}

回答1:

Using below code, rectangle would be in middle of screen and image can be panned. The content within rectangle will be clipped.

<Page.BottomAppBar>
    <AppBar IsSticky="True" IsOpen="True">
        <Button Content="Crop" Click="btnCrop_Click" />
    </AppBar>
</Page.BottomAppBar>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Image x:Name="photo" HorizontalAlignment="Center" VerticalAlignment="Center" ManipulationMode="All" Source="http://www.wired.com/reviews/wp-content/uploads/2012/10/Windows-8-1.jpg" />
    <Path x:Name="path" Stroke="Red" StrokeThickness="3" />
</Grid>

private CompositeTransform compositeTranslation;
RectangleGeometry rect = new RectangleGeometry();
public BlankPage4()
{
    this.InitializeComponent();
    rect.Rect = new Rect((Window.Current.Bounds.Width - 480) / 2, (Window.Current.Bounds.Height - 340) / 2, 480, 340);
    path.Data = rect;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    photo.ManipulationDelta += Composite_ManipulationDelta;
    compositeTranslation = new CompositeTransform();
    photo.RenderTransform = this.compositeTranslation;
}

private void btnCrop_Click(object sender, RoutedEventArgs e)
{
    GeneralTransform gt = photo.TransformToVisual(null);
    Point pt = gt.TransformPoint(new Point(0, 0));
    var _rect = new RectangleGeometry();
    _rect.Rect = new Rect((rect.Bounds.X / compositeTranslation.ScaleX) - (pt.X / compositeTranslation.ScaleX), (rect.Bounds.Y / compositeTranslation.ScaleY) - (pt.Y / compositeTranslation.ScaleY), 480 / compositeTranslation.ScaleX, 340 / compositeTranslation.ScaleY);
    photo.Clip = _rect;
}

void Composite_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // scale the image.
    compositeTranslation.CenterX = photo.ActualWidth / 2;
    compositeTranslation.CenterY = photo.ActualHeight / 2;
    compositeTranslation.ScaleX *= e.Delta.Scale;
    compositeTranslation.ScaleY *= e.Delta.Scale;
    compositeTranslation.TranslateX += e.Delta.Translation.X;
    compositeTranslation.TranslateY += e.Delta.Translation.Y;
}

Updated: Code updated as told by Howard Hee solving the issue wherein zooming in/out will show only black screen