矩形裁剪图像 [英] Crop image with rectangle

问题描述

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

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 successful display the image and draw a rectangle. The sample image as below:

现在，我想单击一个按钮来裁剪矩形内的图像(不是自动剪辑).加载图像后会自动添加矩形.因此，不能使用按了点"和已释放点".并且也不能使用"rectangle.clip"，因为它将自动裁剪图像.我该如何解决?谢谢

Now I want click a button to crop the image within the rectangle(not auto clip). The rectangle is auto added when image loaded. So cannot use "Point Pressed" and "Point Released". And also cannot use "rectangle.clip" because it will auto clip the image. How do I solve it? Thanks

更新: 我可以移动图像，如何绑定数据并将矩形坐标设置为动态?下面的代码是要转换图像.谢谢.

Updated: I able to move the image,How do I bind the data and set the rectangle coordinate to dynamic? Code below is to transform the image. 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;
        }
}

推荐答案

我没有使用过XAML，因为它使我感到困惑.因此，我根据您的问题创建了一个代码段.试试看，让我知道结果.我使用了与您发布的图片相同的图片

I have not used or XAML as it creates confusion for me. So I created a snippet according to you problem. Try that and let me know the results. I have used the same image as you posted

XAML

<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://i.stack.imgur.com/UIBSp.png" />
    <Path x:Name="path" Stroke="Red" StrokeThickness="3">
        <Path.Data>
            <RectangleGeometry Rect="545,212,440,420"/>
        </Path.Data>
    </Path>
</Grid>

C#

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

这篇关于矩形裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！