使用动态矩形坐标裁剪图像 [英] 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;
}
}
推荐答案
使用以下代码,矩形将位于屏幕中间,并且可以平移图像.矩形内的内容将被剪切.
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;
}
已更新:代码已按照Howard Hee的指示进行了更新 解决了放大/缩小将仅显示黑屏的问题
Updated: Code updated as told by Howard Hee solving the issue wherein zooming in/out will show only black screen
这篇关于使用动态矩形坐标裁剪图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!