使用动态矩形坐标裁剪图像

Question

我有一个图像，我想用一个矩形来裁剪它，下面的代码是我放置一个图像并在图像中间绘制一个矩形的代码：

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>

我可以移动图像。下面的代码是转换图像，并且裁剪功能正在工作。如何绑定数据并将矩形坐标设置为动态而不是硬代码坐标？谢谢。

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

Answer 1

使用下面的代码，矩形将位于屏幕中间，并且可以平移图像。矩形内的内容将被剪裁。

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

更新：按照 Howard Hee 的说法更新了代码 解决了放大/缩小只会显示黑屏的问题